見出し画像

物書きが『ツクールMZ』で挑む、デジタルゲーム制作記１ 〜サイバーパンク風UIをJavaScriptで構築〜

水;雨

なぜデジタルゲームなのか？

まだ同人的な本を１冊（それもアンソロジー）しか出していないし、出る予定の本もまだ世に出ていない状態で果たして自分を「物書き」と称してよいのだろうかという疑念はあるのだが、「文芸叢書CAL」のメンバーにならさせてもらっているのだし、まあいいだろうといことで「物書き」で通させていただく。

そんな私が、本来のワークである小説の執筆がひと段落し、AIとの共創をはじめたことで書いている時間が短縮された。AIイラストは世に氾濫しすぎで、AI漫画も少々煮詰まり、AI TRPGは遊んだのを基本コピペしてればいいので、手持ち無沙汰になった。
読書やテレビゲームやアニメや漫画、動画かと言えば、ちびちびかじっているのがちょうどいい。それなら、何をメインに据えようーーと自分の棚卸をしてみたら、音楽、動画、ゲーム制作はまだだったなと。
デジタルゲームを制作すれば、すべて叶うのではと、AIとやりとりすると、拙作『MwILi』という小説がゲーム向きであることが分かった。

簡単に言ってしまうと、ひとつの魂（量子データ）が複数のボディを持てる、さまざまな物語（世界）が多奏している（重なり合い、層にもなり、複雑に絡み合っていること）舞台での冒険譚である。元のジャンルはSFである。

ゲームにするにあたって、TRPGにする手もあったが、多くの人に遊んでもらうにはデジタルゲームにしたほうがいいと考え、世界観、テーマを見せたかったので「ゲームブック型テレビゲーム」の形をとることにした。いわゆるノベルゲーム、ADVのようなものである。
ちょうど手元にはセールの時に手に入れておいた「RPGツクールMZ」があった。聞くところによると、これで望む形のゲームが作れるという。

Gemini NotebookとObsidianで世界観を構築

まずは『MwILi』をテキストファイル化するところから始まった。メモ帳に１話分ずつのを次々コピペしていく。合計320KBほどになった。

次にこれをGemini Notebookに喰わせる。ついでに、Fatecoresystemやstorypath Ultraといった汎用TRPGシステム、使えそうなものをかたっぱしから入れてゆく。

他にも『action potencal』とかも入っているよ！

もちろん、著作権フリーのものはいいが、あるものはそのままは使えないのでAIにそう伝えておく。これであるていどやりとりして、ボディの基本構想まで持っていけた。よかったやりとりは、オブディシアンに「ゲーム制作」のフォルダを作ってコピペしてゆく。いわゆる「設計図」だ。

いざ、ツクールMZの画面構築へ

ボディ18種ができたところで、ツクールMZへ。並走して相談していたGeminiにUI画像を作成してもらう。
Geminiの言葉をヒントにhttps://plugin-mz.fungamemake.comを見つける。MZのプラグイン集のサイトだ。
ここから、NovelMessageMZ.jsをダウンロードさせてもらい、MZで新規作成した「MwILi_test」のjsのplugInフォルダに放り込み、プラグイン管理で右クリックし、有効化させる。ほかにもいくつか入れる。

つぎに、UIの常時表示に挑む。
Geminiとのやり取り。
「UIフレーム（枠画像）を「画面の最前面に固定してずっと表示させ続ける」仕組みですね！

ツクールMZでは、画像を画面に出すときに「ピクチャ番号」という管理用の番号を使います。この番号のルールさえ押さえればとても簡単です。

仕組みと設定手順を分かりやすく分解して解説しますね。

最前面に固定される「ピクチャ番号」の仕組み

ツクールMZでは、画像を画面に重ねるとき「番号が大きい画像ほど上に表示される（最前面に来る）」という決まりがあります。

  • ピクチャ1（背景や立ち絵など） ➔ 奥に表示される

  • ピクチャ99（UIフレーム枠画像） ➔ 一番手前（最前面）に表示される

イラストや立ち絵を「ピクチャ1」や「ピクチャ2」で差し替えても、UIフレーム枠を「ピクチャ99」などの大きな番号で一度表示しておけば、イラストの後ろに隠れることなく、常に一番手前に固定されて表示され続けます。

具体的な設定手順（1分でできます）

マップ上に「ゲーム開始時に1回だけ自動で動くイベント」を作ります。

① イベントを作る

  1. マップ上の適当な場所（どこでもOK）をダブルクリックしてイベントを開きます。

  2. 画面左下にある 「トリガー」 を [自動実行] に変更します。

    1. (※これでゲームが始まった瞬間に自動で実行されます)

② UIフレーム枠を表示する（ピクチャの表示）

  1. 右側の実行内容枠をダブルクリックし、2ページ目の [ピクチャの表示] を選択します。

  2. 設定画面で以下のように入力します：

    • ピクチャ番号： 99（※一番手前に出すため大きな番号にします）

    • 画像： 作成したUIフレーム画像（MwILi_UI_Frame など）を選択

    • 位置： 指定 ➔ X: 0, Y: 0

  3. 「OK」を押します。

③ 自動実行を止める（入れっぱなし防止）

自動実行イベントは、止めないとずっと同じ処理をループし続けてしまうため、最後に「消去」コマンドを入れます。

  1. 「ピクチャの表示」の下の行をダブルクリックします。

  2. 2ページ目の [イベントの一時消去] を選択します。

完成したイベントの見た目

イベントの実行内容は、以下の2行だけになれば完璧です！

Plaintext

◆ピクチャの表示：#99, MwILi_UI_Frame, 左上 (0,0), (100%,100%), 255, 通常
◆イベントの一時消去

これでどうなる？

この設定をしてテストプレイを起動すると、ゲームが始まった瞬間に画面全体にUIフレーム枠が「バシッ」と最前面に表示されます。

このあとシナリオが進んで「背景画像」や「立ち絵」を [ピクチャの表示：#1] や [ピクチャの表示：#2] で表示・変更しても、UIフレーム枠（#99）は常に一番手前に残り続けるため、画面を切り替えても崩れない完璧なノベル・ゲームブック画面が完成します！

まずはこの2行のイベントを作って、テストプレイで枠が固定表示されるか試してみてください！」

試したが、上手くいかない。どうやら邪魔しているプラグインがあるといので、オフにしてみたがうまくいかない。

「スクリーンショットありがとうございます！

今度のエラーは Player's starting position is not set（プレイヤーの初期位置が設定されていません） です。

先ほどプラグインのエラーを無事に突破できた証拠ですね！

このエラーはツクールMZで新規プロジェクトを作った直後に100%発生する、とても親切なエラーですのでご安心ください。

「ゲームを始めるための、主人公（プレイヤー）のスタート地点がマップ上に置かれていないよ！」という理由で止まっています。

直し方（3秒で終わります！）

  1. ツクールMZのマップ画面を開く

    • マップ（格子状の画面）の上の、適当なマス目を右クリック（または画面長押し）します。

  2. 初期位置を設定する

    • 出てきたメニューから [初期位置の設定] ➔ [プレイヤー] をクリックします。

  3. Sマークが付いたことを確認

    • 選んだマス目に、「S」という文字（または主人公のキャラクター画像）が置かれたら設定完了です！

この状態で、もう一度画面上の [▶]（テストプレイ） ボタンを押してみてください。

今度こそエラーにならず、ゲーム画面（タイトル画面、または設定したイベント）が正しく起動します！」

それでも表示されない。
「スクリーンショットをありがとうございます！

実行内容（ピクチャの表示 ➔ イベントの一時消去）も、トリガー（自動実行）も、完璧に組めています！

画像が表示されない原因は、画面左下の「トリガー：自動実行」と「イベントの一時消去」の組み合わせによる処理スピードの問題です。

自動実行イベント内に「イベントの一時消去」が入っていると、画像が画面に描画される一瞬（1フレーム未満）の間にイベントが消去されてしまい、画像が表示されないという状態になります。

直し方（一番確実でキレイな方法）

「イベントの一時消去」を消して、セルフスイッチを使ってイベントを1回だけ実行させる形に変更します。

① イベントコマンドを調整する

  1. 実行内容の中にある ◆イベントの一時消去 をダブルクリック（または選択してDeleteキー）で消します。

  2. 代わりに、1ページ目の [セルフスイッチの操作] を追加します。

    • セルフスイッチ： A

    • 操作： ON

これで、実行内容は以下のようになります：

Plaintext

◆ピクチャの表示：#99, Gemini_Generated_Image...
◆セルフスイッチの操作：A = ON

② 2ページ目を作る（1回動いたら終わりにする）

  1. 画面の上側にある [EVページ作成] ボタンを押します。

  2. 上のタブが「2」に切り替わるので、左側の 「出現条件」 の スイッチ（セルフスイッチ）にチェックを入れます。

    • 条件：セルフスイッチ A が ON

  3. トリガーは [決定ボタン] のままでOKです（実行内容は空欄のままで大丈夫です）。

なぜこれで解決するの？

これでゲーム開始時に「自動実行」でピクチャが表示され、そのままセルフスイッチAがONになって「空欄の2ページ目」に移行します。

イベントが一時消去されずに裏で残り続けるため、ピクチャ#99は画面に固定されたままずっと表示されるようになります！

ぜひこの手順で試して、テストプレイ（▶）を押してみてください！」

ちゃんとやっても表示されないと思ったら、ウインドウが隠れていた（汗

こんどは画像が大きすぎる！

拡大率を変え、「35パーセント」が最適だと判明する。

やった！

ここまでで、最初の1歩はよかろうと区切りをつけたのだった。
ちなみに始めたのは2日前である。

順調にはいかないと思う。他のものに浮気したり、停滞、煮詰めなどもあるだろう。それでもアドバンテージは、素材（完成品の小説、TRPG本など）がすでにそろい、結果を出してきているということだ。ツクールMZの一歩目も歩みだした。これから、少しずつでも、一歩一歩進めていきたい。

いいなと思ったら応援しよう！