夢 幻 劇 場

[個人創作ブログ/イラスト/小説/漫画・他]

RPGツクールMZ|ピクチャクリックADVのキーボード・ゲームパッド操作対応のやり方

1092 views
約8分
RPGツクールMZ
アバター
八神 旭
こちらは以前、近況報告に書いたRPGツクールMZの記事を再編集したものです。ピクチャクリックADVのキーボード・ゲームパッド操作対応のやり方の備忘録です。

RPGツクールMZによるゲーム制作において、八神は主に、ピクチャクリック形式のゲームを作っています。ツクールMZでの画面のピクチャクリック式のゲームは、キーボードやゲームパッドの操作に対応できないので、その2つでプレイしていただくことは諦めねばならない雰囲気だったのです。しかし、プラグインを駆使してなんとかキーボードとゲームパッドの操作に対応することができたので、その方法を備忘録として記録したいと思います(対応作業が大変でしたが、ゲームパッドで遊べるのは快適でした)

きっかけ|作業の息抜きに蒼鋼のドラグーンのゲームを作り始める

一年近くイノシシを倒すゲームに手を加え続けていた自分に、無透さんが「そんなに時間をかけるなら本当に好きなものを作ったほうがええで」とおっしゃったので、イノシシゲームのほうも好きですがたしかに創作本編のゲームも作りたいでござる!と思い(本編をゲームにすることに関しては、エターナルしてしまうのが怖くて逃げ腰になっていたのです)、RPGツクールMZで蒼鋼のドラグーンのゲームを作り始めました(イノシシゲームも、蒼鋼のドラグーンの過去のお話ではあるのですが)

本編は小説でやるつもりなので、ゲームの方は、クエストを受けて主人公三人のルートに出てくる強い敵を、主人公+スカウトキャラ一緒に倒すようなものにしたいと思っておりました。ストーリーはどこまで描くか悩みますね。

ゲーム画面のキャプチャー画像です

こちらのゲームを、キーボード・ゲームパッドの操作に対応させていきます。

ピクチャボタンの作り方と、キーボード・ゲームパッド対応のやり方

任意のピクチャをボタンにしてコモンイベントを実行+オンマウス効果を与えるために『PictureCallCommon.js』というプラグインを使わせてもらっています。公式のボタンピクチャのプラグインも大変よいのですが、こちらは透過部分もクリック範囲になってしまい、画像が重なり合うと指定したイベントの実行が難しくなってしまうのです。

その視点で見ると、『PictureCallCommon.js』は透過部分はクリック範囲とならず、切り抜きボタンを重ねたりして配置できるので、ボタンメニューを作る際には『PictureCallCommon.js』がより適していてありがたいと感じます。

ピクチャボタンの作り方

①画像編集ソフトで実際の出力サイズのモックアップ(ゲーム制作用語だとワイヤーフレームというらしいですね)を作り、素材をフォルダごとに分けて切り抜きやすいようにした形で、画面の完成形を作ります。

②切り抜いてpictureフォルダに保存したピクチャを、実際のゲーム画面に貼り付けていきます。画像編集ソフトにスポイト位置の座標が見れる機能があると思うのですが、そこでX.Y座標をメモ帳にメモして、ツクールのピクチャの表示コマンドにあるX,Yの項目に入力すると、大体モックアップと同じ位置に画像が表示されます(ちょっとずれたら数値を変えて編集してみてください)(画像の座標の値には逆向きに移動する -(マイナス)も使えます)

③『PictureCallCommon.js』のプラグインコマンドを呼び出し、②で決めたピクチャ番号をIDに入力します。コモンイベントも設定できるので、ボタンを押した時に実行されるイベントも設定します。あと、自分がわからなくて難儀したのが、画像オンマウス効果の付け方です。プラグインコマンドの『トリガー種別』を設定する必要があって、『4.マウスをピクチャに重ねた場合』に画像が縮小表示される効果を、『5.マウスをピクチャから離した場合』に元の画像に戻る効果をつけたコモンイベントを設定すると、ボタンがピコッと押されているように伸縮する動きになります。

【注意】クリック後の動きが停止した感じになるので、クリックしたときに実行されるコモンイベントに、画像が元に戻る処理(元画像をもう一回指定する)を加えておくと安心かもしれないです。

ピクチャクリックゲームのキーボード・ゲームパッド対応のやり方

①『PicturePriorityCustomize』というプラグインを使います。それから、歩行グラフィックをカーソルの代わりに使います(キーボードやゲームパッドで動かせる矢印アイコンとして使用)そのためにはピクチャの上に歩行グラフィックを持ってくる必要があるので、『PicturePriorityCustomize』の設定で、『上層ピクチャ番号:90』『下層ピクチャ番号:100』『下層ピクチャZ座標:1』『戦闘下層ピクチャZ座標:1』にすると、ピクチャの上で歩行グラフィック(矢印)が動かせるようになります。

③プラグイン『Event ReSpawn』の設定箇所はなく、ONにすれば完了です。『TemplateEvent』を使うために、メインのマップをコピーして、全く同じ大きさのマップを作ります(これをテンプレートとします)1280×720だと、横27マス×縦15マスでちょうどいいサイズになります。

②テンプレートのマップを選択して、マップ作成のリージョンタブを開き、1の色(赤)で塗りつぶします。プラグイン『TMRegionPassable』で通行可能リージョンに1を入力すると、歩行グラフィック(カーソルとして活用)がマップの全域を移動できるようになります。

テンプレートマップ

③元のマップのボタンが置いてある位置全てにイベントIDを設定するので、テンプレートマップを色分けしてIDをメモします。言葉にしにくいので画像を載せますが、こういう感じになります。ボタン位置がわかるように、画面の遠景画像を背景に表示させています。

本編のマップ

④先程作ったテンプレートマップと同じ位置に、ボタンを押したときのイベントを作ります。本編マップのメモ欄に、テンプレートマップのイベントIDを入れると、本編のマップにリージョン情報?とイベント情報?がコピーされて、キーボードやゲームパッドでも移動とクリックが可能になるみたいなのです(仕組みがよくわかってないで使っている民なので、使い方が間違っているかもしれません、すいません…)

⑤プラグイン『Mano_InputConfig』『TMCommonEventKey』で、ゲームパッドやキーボードの操作の設定をします。こちらはプラグインのヘルプを見れば難しいことはないので、お好きなキーを設定してあげてください。

⑥実際にキーボードやゲームパッドでプレイしてみます(タイトル画面のオプションから、より使いやすく設定できるので、プレイの前に快適な設定にすることをおすすめします)オプションでキーボードもゲームパッドも使いやすくしたし、さあやってみよう!とプレイした所、キーボードでも、ゲームパッドでもカーソル(矢印に姿を変えた歩行グラフィック)動いてボタンの上でクリックもできました!欲をいうなら、タッチアニメの進行方向に出る光るやつ(?)を消したいのだけど(カーソルを非表示にしても残ってしまうので)、やり方がわかりませんでした…。

【追記】プラグイン『MNKR_SwitchPointer.js』を使わせていただき、光るポインターを消すことができました!

マップを一枚作るごとにこの作業をするのかと思うと、気軽にマップを増やせないような気持ちになりますが、実際便利だからやったほうがいいかもなあと感じました。なによりゲームパッドでプレイできるとおもしろいですね!!戦闘の操作がしやすくなって感動いたしました民です。

【注意】マウスクリック主体で遊びたい場合、歩行グラフィック(カーソル)が表示されて操作しにくくなる場合、『TMCommonEventKey』で、任意のキーに『透明状態のON』『透明状態のOFF』のコモンイベントを割りあてて、表示・非表示ができるようにすると便利です。

ゲーム制作では、プラグイン制作者の方々や、素晴らしい素材作品を提供して下さる方々、サンプルプロジェクトを公開してくださる方、技術を動画にして配信して下さる方々のお陰で作れています。なので、自分もなにか制作に役立つことを記録しようと思ったのですが、説明が下手で申し訳ありません…!時間ができた時に、項目別に詳しい記事にまとめられたらいいなと思っております。ここまで読んでくださった方、ありがとうございます!

おまけ

ホーム画面で使う予定のちびキャラ

ドット絵を描くのが得意ではないため、3500×3500サイズで描いたイラストを縮小してちび絵として使うことに。縮小した時に主線が潰れないように、主線をクリスタの丸ペン50ピクセルで太めに描くとちょうどよい表示になりました。このイラストの元になったSD素体も作ってあるので、時間ができたら記事からDLできるようにして、絵を描く制作者さんが気軽に使えるようにもしてみたいです。

ピクチャクリックADV形式ゲームの進捗

以前作っていただいたジーク編のテーマソングのインスト曲をストーリー画面で使わせていただいているのですが、とっても素敵でたいそう興奮いたしました。曲が聴きたいがために画面を開きっぱなしにしているほどです。空き時間を見計らって、こちらのゲームもちょこちょこ進めていきたいですね。