名前入力システムのソースを表示

'''名前入力システム'''(ーなまえ)はWWA Wingに組み込みできるWWAギミックの1つです。

[[ファイル:Strange machine next-name input.png|サムネイル|こんな感じに動きます]]

[https://www.aokashi.net/wwa/strange%20machine%20next/ 謎めいた機械を追い求めて 闇組織の争奪]で試すことができます。

== 導入方法 ==

「謎めいた機械を追い求めて 闇組織の争奪」では文字テーブルの枠や入力欄に専用の画像を使用していますが、今回の解説では導入手順を簡略化するため省略します。パーツの配置を工夫したり、ピクチャ機能を活用したりして、色々カスタマイズしてみてください。

=== 必要なもの ===

* 不安定版のWWA Wing(v4.1.0-unstable.based-on.3.12.15.p1 以降)
* WWA Scriptのユーザー定義関数ファイルを取り扱えるスキル
* WWAイメージ画像を組み合わせて編集できるスキル

=== WWA Scriptファイルの取得 ===

[[名前入力システムのWWA Script]]ページより、WWA Scriptのコードをコピーします。

取り入れたいWWAのフォルダーを開き、scriptフォルダーに先ほど新規ファイルを作成します。そしてその中身にコピーしたコードをそのまま貼り付けます。

同じフォルダーにあるscript_file_list.jsonに<code>"./script/nameinput.js"</code>と追加します。追加後の中身は以下のようになると思います。

<pre>
[
  "./script/index.js",
  "./script/defined.js",
  "./script/lib.js",
  "./script/nameinput.js"
]
</pre>

<code>data-wwa-user-defined-scripts-file</code>を定義している場合はその定義を指している JSON ファイルを編集してください。JSONのルール上、最後の行末には<code>,</code>(カンマ)は含めないでください。

=== イメージ画像の用意 ===

イメージ画像ファイルを編集します。以下のイメージ画像をあらかじめ用意してください。

* 左矢印
* 右矢印
* 文字入力モードを変更するアイコン
* ボタンを押下するアイコン
* 1文字消すアイコン
* 完了アイコン
* キャレットアイコン

[[ファイル:25-system icons-nameinput.gif|フレームなし|中央]]

=== アイテムパーツの追加 ===

マップデータファイルを編集します。マップデータでそれぞれ以下の物体パーツを作成してください。

==== キャレットを前に戻すアイテム ====

* イメージ画像は「左矢印」
* 「アイテム」「使用してもなくならない」

<pre>
<script>
nameInputMoveCaretBack();
</pre>

==== キャレットを後ろに進むアイテム ====

* イメージ画像は「右矢印」
* 「アイテム」「使用してもなくならない」

<pre>
<script>
nameInputMoveCaretForward();
</pre>

==== 文字入力モードを変更するアイテム ====

* イメージ画像は「文字入力モードを変更するアイコン」
* 「アイテム」「使用してもなくならない」

<pre>
<script>
nameInputChangeMode();
</pre>

==== 文字入力をするアイテム ====

* イメージ画像は「ボタンを押下するアイコン」
* 「アイテム」「使用してもなくならない」

<pre>
<script>
nameInputInsertChar();
</pre>

==== 1文字消すアイテム ====

* イメージ画像は「1文字消すアイコン」
* 「アイテム」「使用してもなくならない」

<pre>
<script>
nameInputDeleteChar();
</pre>

==== 文字入力を完了するアイテム ====

* イメージ画像は「完了アイコン」
* 「アイテム」「使用してもなくならない」

<pre>
<script>
nameInputApply();
</pre>

==== 名前入力でおすすめの名前を選出するメッセージパーツ ====

* イメージ画像は透明。
* 「メッセージ」

<pre>
<script>
nameInputSetRecommend();
</pre>

==== 名前入力でおすすめの名前を選出する二者択一パーツ ====

* イメージ画像は透明。
* 「二者択一」「YESを選択したとき」には、前の「名前入力でおすすめの名前を選出するメッセージパーツ」の番号を記載する。

<pre>
おすすめの名前を自動で入力します。
よろしいですか？
</pre>

==== 名前入力を完了するメッセージパーツ ====

* イメージ画像は透明。
* 「メッセージ」

<pre>
<script>
nameInputFinish();
</pre>

==== 名前入力を終わらせる二者択一パーツ ====

* イメージ画像は透明。
* 「二者択一」「YESを選択したとき」には、前の「名前入力を完了するメッセージパーツ」の番号を記載する。

<pre>
この名前でよろしいですか？
</pre>

=== 名前入力領域の確保 ===

[[ファイル:Nameinput form design.png|サムネイル|キャラクターの部分は無くてもいいけど、あるといい演出になる]]

パーツが用意できたら次に名前入力の空間を確保します。縦1画面、横2画面の領域を見つけて、その一番左上の座標をメモしてください。

そしてその左上の座標から下4マス、右1マス進んだところに道パーツを隣の画面端まで、縦5マス分敷き詰めます。その上の空間も、入力した名前を表示するために右図のように5マス分設けます。

=== 設定 ===

「WWA Scriptファイルの取得」で保存したnameinput.jsを編集します。

<code>nameInputInit</code>の実装の中で、コメントの記載した変数をそれぞれ記入します。

<pre>
// 名前入力をする画面の一番左上の座標
v["nameinput_map_x"] = 60;
v["nameinput_map_y"] = 0;
// 入力できる文字数上限
v["nameinput_max"] = 5;
// おすすめの名前を選出する二者択一パーツの番号
v["nameinput_show_recommend_parts"] = 12;
// 名前入力を完了するかたずねる二者択一パーツの番号
v["nameinput_finish_parts"] = 17;
// キャレットのイメージ座標
v["nameinput_caret_img_x"] = 6;
v["nameinput_caret_img_y"] = 25;
// キャレットを前に戻るアイテムの番号
ITEM[7] = 9;
// キャレットを後に進むアイテムの番号
ITEM[8] = 10;
// 入力文字を変更するアイテムの番号
ITEM[9] = 11;
// 入力操作アイテムの番号
ITEM[10] = 6;
// 取消操作アイテムの番号
ITEM[11] = 7;
// 決定操作アイテムの番号
ITEM[12] = 8;
</pre>

最後に、以下のユーザー定義関数を追加します。すでに同じユーザー定義関数がある場合は、関数の中身だけ取ってきて追加してください。

<pre>
function CALL_CAMERA_MOVE() {
    if (
        CX >= v["nameinput_map_x"] && CX <= v["nameinput_map_x"] + 10 &&
        CY == v["nameinput_map_y"]
    ) {
        nameInputDrawChars();
    }
}
</pre>

これで名前入力システムの完了です！

任意のパーツで以下の構文を実行すると、名前入力システムが起動します！

<pre>
<script>
nameInputInit();
</pre>

=== 注意事項 ===

既存の7番～12番のアイテムはシステムのアイテムに上書きされてしまいます。既存のWWAに取り入れる場合は、あらかじめダミーのアイテムを確保させておくか、起動時に手持ちのアイテムを一度別の場所に退避させるか、などの対策が必要です。

[[Category:WWAギミック]]