画像選択メニューの作り方（RPGツクールMZ）※追記あり

有楠

セルフメモです。

スマホゲーとかにありそうな画像メニュー

ツクールMVでは2つのプラグインを組み合わせて実現していたこのようなメニュー画面。
しかし、ツクールMZではうち1つのプラグインが動かなかったので、急遽別の方法で作り直す必要が生じました。
試行錯誤の末にどうにか動いたので、ここにやり方をメモしときます。

使うのはトリアコンタン様の「PictureCallCommon」「DTextPictures」という素晴らしいプラグインです。
実装したいのは次の3つの機能です。
①メニューボタンを押すことで特定のイベントを起動できる（マップ移動等）
②メニューボタンの上にカーソルを合わせると説明書きが表示される
③メニューボタンの上からカーソルが離れると説明書きが消える

まずはメニュー選択用の画面にマップイベント（自動実行）を配置します
一番上のメニューが「メインストーリー」になるので、まずはそのメニューボタンを設置します。

1つのボタンに３つの設定が必要。ボタンの数だけ設定する

次に、ボタンが呼び出すコモンイベントを設定します（この画像の例だと71番イベント）

まずは「起点」ラベルまで飛んで、そこでメニュー用変数によってそれぞれのボタン用の処理シーンに飛びます（わかりやすいように注釈で前後挟んでます）

メニューボタン用の処理は
①メニュー選択スイッチがONの場合（ボタンを押されてる場合）
②メニュー選択スイッチがOFFの場合（ボタンの上にカーソルがある場合）
に分けて入力します。
前者はここではメインストーリー内のさらなる選択メニューを出すための処理をしてます（詳細は割愛）
後者は説明書き用のテキストをピクチャとして表示する処理をしてます。
（最初はテキストとして表示していたのですが、そうすると「クリックして文字表示ウィンドウを消さない限り、そのテキストがいつまでも表示される」という不具合が出たので、ピクチャ表示という手段を選んでます）

ちなみにボタンからカーソルが離れた場合にはこの説明書きピクチャ（ここでは99番）が消えるように、マップイベントの段階で設定してます。

完成！カーソルが見えませんが、一番上のメニューを選んだときの説明書きが出てます。

一応完成した動作はこちらにアップしてます。

＜追記＞
このやり方だとマウスカーソルが出てこないスマホ上では説明書きが表示できないので、独自にポインタを表示させる処理を加えてみました。

やり方は単純。並列実行で以下のようなイベントを組みます。

ポインタ画像としてyubiという手描きの指の画像を使ってます。

スクリプトのTouchInput.x, TouchInput.yを用いて画面上のどこがタッチされてるかの座標を割り出し、その位置にポインタ画像が表示されるようにしてます。ウェイト1で並列実行してるので、常にタッチ位置をポインタ画像が追尾する形になります。

これでスマホ画面でもポインタを表示させて、それをスライドさせることで説明を見ることができるようになりました。

実際の動作はこんな感じです。