【ゲーム制作者向け】ツクールでの自作メニュー画面の作り方【前編】

こんばんは！ツムミです。

今日はゲーム制作者さん向けにアズテイルで作ったような自作メニューUIの作り方を共有しようと思います。

具体的にはこういうのですね
https://twitter.com/Tsumumi_So_R18/status/1404726216863617028?s=20

最終的にはこうなるよというサンプルプロジェクトもこの時点で共有しておきます。

なお、一応現状はRPGツクールMV用のチュートリアルとなります。恐らくほとんどの部分はMZでも流用できるとは思うのですがこちらは後程確認してみます。

また、今回の記事は「前編」となります。全部解説しようと思ったのですが前編だけでもアホみたいな長さの記事になったので分けないとあかんなと...
全３回を予定していて、前編では自作メニューの開き方、ＵＩボタンの配置方法、またそのボタンを十字キーで選択する方法を解説します。
２回目の中編ではより複雑なＵＩボタン配置時の選択方法の解説、
３回目の後編ではボタンにアニメーションをつける方法を解説していく予定です。

今回これを公開する意図としては二つありまして、一つは自作UIの敷居を下げたいという点です。
みなさん、自作のUIを作りたい！と思ったことはないですか？１から全てデザインするのは大変でも有料素材で素晴らしいUIもあります。それをグワングワン動かして表示するの、憧れません？
ただ現状、凝った自作メニュー画面を作ろうにも情報が細かく分散しすぎていて自作UIのハードルが高い状況に見受けられます。UIを画面に並べるやり方の記事は存在するのですが、それ以上を求めだすと記事としてまとめたところは見受けられませんでした。
実際のところは必要なプラグインも少ないですし理解さえしてしまえば応用も効く知識なので、これらの情報をまとめることは同人ゲームを盛り上げる意味合いでも価値があることなのかなと。

二つ目はシンプルに自分用のメモですねｗ
そこまで難しいことは無いとは言え少しややこしい手順があったりするので将来的に他にもＵＩを作成する際アーカイブとして残しておきたいという考えです。

また、サンプルプロジェクトも同封するので設定や数値、アニメーション等を流用したい場合などは活用して頂ければと（申し訳ないですが画像データはそのまま使えないようにSAMPLEの透かし文字が入っています）

ただ一点注意点として、これから説明するのはあくまで我流でのメニュー作成であること、そして作品ごとに理想的なUIの表示方法やアニメーション方法は違ってくることはご理解ください。この記事の最終的な目標は多くの人の弊害となっているシステム部分のハードルをとっぱらって皆さんが自由にクリエイティブな部分を発揮できるようにすることです

さて、ただでさえ長くなりそうな記事なのにこれ以上長々と語るのもアレなので本題に入っていこうと思います。

目次

a. 参考にしたサイト様
b. 必要プラグイン
c. チュートリアルに使用した画像データ（zip）
１. 自作メニューの開閉
２. ボタンの表示
３. ボタンの選択
-Ⅰ（簡単）：一列のボタン配置の場合

a. 参考にしたサイト様

自作メニューのつくりかた（のんちゃ様）：https://ch.nicovideo.jp/non_non_cha/blomaga/ar1122282

RPGツクール MV でオリジナルのメニュー画面を作る方法（トレトレ様）：
https://pd-present.moo.jp/PC_otaku/archives/471

【RPGツクールMV】ピクチャ（画像）をフェードインさせる方法：
https://denno-sekai.com/rpgmaker-picture-fadein/

b. 必要プラグイン

※（サンプルプロジェクトに同封されているのでそちらからコピーでも大丈夫です）

１．SAN_EasingPicture（イージングアニメーションさせる場合必須）https://plugin.fungamemake.com/archives/1610

※２．tween（↑のプラグインを十全に動かす為に必須）（正しいファイルをダウンロードするのがややこしいので後述します）
https://github.com/tweenjs/tween.js

３．MenuCallCommon（キャンセルキーでデフォルトのメニューの代わりにコモンイベント（この場合だと自作メニュー）を表示させられるプラグインです）
https://www.dropbox.com/sh/08ko2xo7leab7ob/AAAOYt1nOi82K0d5QORqL3Zpa?dl=0

４．PictureCallCommon（配置したUIがタッチやクリックでも反応するようになるプラグインです）
https://raw.githubusercontent.com/triacontane/RPGMakerMV/master/PictureCallCommon.js

※：SAN_EasingPictureのページだとtweenは https://github.com/tweenjs/tween.js の「src」フォルダにファイルがあると説明されていますが実際は「dist」フォルダから「tween.umd.js」をダウンロードしたのち、こちらのファイルを「tween.js」にリネームする必要があります。

c．このチュートリアルで使用する画像達

画像データはプロジェクトフォルダにあるimgフォルダ、その中のpicturesフォルダの中に格納してください

１．自作メニューを開いたり閉じたりできるようにする

※今回のチュートリアルは解像度を1280×720で作成しています。

※↓この工程の作業をまとめたサンプルプロジェクト

この工程では以下の画像を使用します。
background_main2
mainmenu_01
mainmenu_02
mainmenu_03
mainmenu_08

まず最初のステップとして、Xキー（または右クリック）で自作メニューが開けるようにする必要があります。
このためにMenuCallCommonのプラグインを使用します。
設定はシンプルで、MenuCallCommonのプラグイン設定の「ComEvent」と「ComCloseEvent」に別の数値を割りふるだけです。
この数値で対応したコモンイベントが呼び出されます。今回は１と２にしていますが既に使用している場合は別の番号を割り振ってください。
「ComSwith」は対応するスイッチ番号です。これがOFFである時にXを押すとComEvent（メニュー開く動作）が、これがONである時にXを押すとComCloseEvent（メニューを閉じる動作）が作動するという仕様だと思います。
こちらもスイッチで既に使用していない番号を割り振ってください。

これでXキーを押すとデフォルトのメニュー画面ではなく、設定した番号のコモンイベントが呼び出されるようになりました。（この時点でテストプレイしてみるとXを押しても何も起こらないのが確認できると思います）

次に、コモンイベントで実際にメニューを開いた時の処理を入力する必要があります。
まずはベースとなるウィンドウを表示させることにします。
サンプル画像内のbackground_main2というデータです。↓（最終的には別の画像に差し替えるのですが、説明の為にこの画像を使用しています）

コモンイベントでは

※ピクチャ番号はなるべく余裕を持たせてスタートしとくのをオススメします！自作メニューを作ると多数のピクチャを使用することになるのですが、プラグイン無しだと『番号が高くなるほど優先度が高く上に表示される』ようになります。この仕様のせいで番号キツキツで作ると後々「これを一番後ろで配置させたいな」ということになった際に全ての番号をずらす必要が出てくるので...

次にメニューを閉じるためのコモンイベント設定ですが、

これでXを押すことでメニューの開閉ができるようになりました。
というわけで他にもバンバン必要なものを入れていきましょう。
ここで入れるのは
・mainmenu_01
・mainmenu_02
・mainmenu_03
・mainmenu_08
の四枚です。

※ピクチャ配置のTIPS：
ピクチャは左上を原点にして配置されるので、画面の解像度とピクチャの解像度の差で計算して配置したほうがいいですよ！目視で何度もやり直すのは地獄です...（経験談）

ピクチャ配置例：

これにてメニュー画面の基盤は完成です！
ここからアニメーションさせたりなんやかんやしていくわけですが、それはまた後程～。

２．ボタンを表示させる

※↓この工程の作業をまとめたサンプルプロジェクト

この工程では以下の画像を使用します。
mainmenu_item
mainmenu_item_sel
mainmenu_skill
mainmenu_skill_sel
mainmenu_skilltree
mainmenu_skilltree_sel
mainmenu_status
mainmenu_status_sel

メニューの基盤ができたので、お次はボタンを配置していきます。

まずは「ボタン表示」のコモンイベントと「ボタン選択」のコモンイベントを新たに作成してください。
その次に、コモンイベント１（メニュー開く動作）に変数の操作を入れます。
変数に「選択肢」のように命名して、それに定数の１を代入してください。
その後、「ボタン表示」コモンイベントを入力します。

後述しますがこの「選択肢」変数がとても重要で、この変数は言ってしまえばボタンが選択されているか否かを判断するものとなります。

お次はボタンを配置していきます。

↓ピクチャ表示時の設定はこんな感じにしてください

ちなみにこの文の内容としては、
１．「ボタン表示変数XとYに設定した値の位置にそのボタンを配置する」（赤文字部分）
２．「選択肢変数の特定の値の時（つまり選択されている状態の間）選択された状態のボタンが表示されて、選択肢変数がそれ以外の場合は非選択状態のボタンが表示される」（条件分岐以下の文）
という処理です。

二つ目以降も似たように配置していくのですが、一つ目のXとYに定数を入れていたのに対して、二つ目以降は加算で数値を足していきます。
言い換えると、「一つ目に配置されたボタンの位置からXとY軸分ずらして配置する」ということですね。

これを繰り返していって全部のボタンを配置していく、という流れになります。
なお、XとYに入れる数値に関してですが、アズテイルの場合だとボタンが斜めだったり不規則に配置されているのでこういうケースはひっじょーに面倒ですが目視で何度も試して合わせるしかないです。みなさんもそういうUIを自作する際は...頑張ってくださいネ！
（均一に配置されるUIの場合であれば加算するXとYをコピーペーストしていけば大丈夫です）

↓最終的にはこんな感じになります。最初に作った１セットをコピペして色が塗られた部分だけ書き換えれば大丈夫です

ちなみに選択肢変数は今の時点では１ずつ増やしていけば大丈夫です（後程複雑なことをするようになるとこの変数に工夫を入れる必要がでてきます）

この選択肢変数を設定することで何が起こるかと言うと、例えばこのサンプルプロジェクトではメニューを開くコモンイベントで選択肢変数が１になるよう設定しているので、メニューを開いた瞬間に選択肢変数１に設定されているスキルにカーソルが合わさる（今回の場合だとボタンが緑色になる）状態となります。もしこの選択肢変数が変動、例えば２になったならアイテムにカーソルが合わさります。

お次はボタン表示コモンイベントの設定をします。
テストプレイで気づいたと思うのですが、メニューを開いても十字キーを押すとキャラが動いてしまいますよね？これをまずは無効にします。

そのためにこのように設定してください。

これでメニューが開いてる間十字キーでの操作が無効になりました。

３．ボタン選択（基礎編）

この工程はUIによっては最も複雑になる部分です。とはいえシンプルにする分には単純なところでもあります。
ここでは四段階の難易度に分けて順番に説明していこうと思います。
ちなみにその四段階の内訳ですが、
Ⅰ（簡単）：一列のボタン配置
Ⅱ（ちょっと難しい）：二列かつ各列に同じ数のボタンがある配置
Ⅲ（難しい）：二列かつ各列のボタン数が異なる配置
Ⅳ（やばやば）：二列かつ各列のボタン配置が異なって、カーソルが特定の方向のみでループする

アズテイルの場合は（Ⅳ）を採用してますので最終的にはそこまで説明できればと。

今回の記事では（Ⅰ）のやり方を説明します。

Ⅰ（簡単）：一列のボタン配置の場合

※↓この工程の作業をまとめたサンプルプロジェクト

↓今回は初めに最終的な実行内容を先にお見せして、各入力がどういった意味を持つのか解説していきます。

第一に、ボタンを選択するにあたってまず必要なのが十字キーでボタンを選択する機能です。
これはスクリプトで Input.isTriggered('xxx')
と入力することで導入できます（xxxの中にはキーに対応した英単語、up, down, left, right のいずれかを入れます。今回はdownとupを使います）

つまり、この一連の入力は言い換えると（Input.isTriggered('down')の場合）
「↓キーを押した時、選択肢変数が＋１される（カーソルが下にずれていく）。カーソルを下に動かしていき（変数に＋１を重ねていき）、変数がボタンの数よりも大きい数値になった場合、カーソルが一番上に戻る。反対に変数が０以下になった場合、カーソルが一番下にループする（斜線部分が条件分岐の処理です）」
という処理になります。

Input.isTriggered('up')の場合はキーを押した時に選択肢変数がー１されるように設定すればあとは前のものをコピペするだけで大丈夫です。

最後に各条件分岐の最後で「ボタン表示」のコモンイベントを呼び出すようにしてください。これをしてあげないとカーソルが動かないので。

まとめ

ここまででメニュー画面を開いてボタンを操作できる段階まで進むことができました。ここまでが前編となります。
次回の中編ではボタン配置がもっと複雑になるパターン、Ⅱ、Ⅲ、Ⅳのケースを解説していきます。

非常に長い記事となりましたが、ここまで付き合ってくださった方々は本当にありがとうございます。
次回も近いうちに投稿できればと思いますのでよければ見てやってください。

質問、不明点等ありましたら加筆修正しますのでコメントで教えて頂けると幸いです！