【RPGツクールMV】ノベルゲームのチャートを自作してみた

前回に引き続き、ノベルゲームのベース的なものを作っていきたい。
表示、操作周りを整えてついに本編のストーリーを考え始めるかと思いきや、まだまだベースのほうを調整します。
カスタムメニュー周りの機能を充実させていくことによって実際にゲームを作り始めた際の負担をなるべく減らしていきたいみたいな考え方。
と言う訳で前回課題として残ったマウス操作周りを対処していこうと軽い気持ちで始めてみたらとんでもない大改修になってしまった。
その作業量たるやメインテーマのチャート機能作成が途中で妥協してしまうレベル。
見た目は地味な変更過ぎてまったく伝わらないのが悲しいけど、一応そのあたりを中心にまとめていきたい。

ノベルゲームを作りたい

名作アドベンチャーとか、ノベルゲーム制作プラグインなどに触れたことでなんだか熱が上がってきてしまったノベルゲーム制作欲。
今時なら専門の製作ツールがいくつもあるのだけどせっかくなので日頃触れているRPGツクールMVの可能性を見てみたい。
ということで自作してみた、という流れ。
ちなみに、前回分に関してはこちら

【RPGツクールMV】ノベルゲームのベースを自作してみた

基本的な構成、ゲーム内容、メニューの基本についてはこちらのほうでかなりざっくり説明してあるので今回は割と足早に本題へ行きたい。
まずは前回最大の問題点であるマウスクリック対応について。
今回分でも改めて触れてみて感じたけどキーボート、パッド操作に比べて挙動が特殊過ぎるんだが何だろうこれ。
入力系統としては同じもののはずなのに、マウスクリックだと誤動作したり、無反応になってしまうイベントがいろいろあり大苦戦。
もうマウスはいいんじゃないかな。
とか割と本気で思い始めているのですが、その上にさらにタッチ操作なる未知種が存在しているので向き合わないわけにもいかない。

マウス操作対応

マウス対応メインイベント編

まずはメインイベントから。
今回からの大きな変更点として今まで自動イベントだった各シーンのイベントを並列処理イベントに変更しました(画像下、トリガーの部分)。
後ほど触れますが、メニューに関してあるプラグインを追加で使うことにしたのですが、キーボード操作などでは割り込めるタイミングでもなぜかマウスだけは無反応という現象が発生しあれこれ調べてみたところ、並列処理イベント中ならば反応してくれるということが分かったので、変更という流れになります。
メインイベントを並列処理で行ってしまうという非常に不安の残る変更ですが、今のところ順調に動いてくれているので何とか大丈夫かと思われます。

その他変更点としては出現条件がプラスされていますが、これは並列処理ならではというか、メニューを開いている最中や、セーブ中でも隙あらばイベントを実行してくるアグレッシブさに対処するため、テキストを表示してほしくない場面などでイベントの切り替えが出来るように配置したものです。
正直この辺は自動イベントなら何もしなくても問題なかった点なので微妙にマイナス点なのですが、マウス対応という大義の為には仕方ないですね。

マウス対応メインイベント二ページ目

二ページ目は自動イベント。
前回で触れたページのリフレッシュ系の処理をまとめてあります。
後にチャートなどで自由にシーン切り替えを行う場合のことを考えてセルフスイッチはオフにして繰り返し同じシーンが見られるようにしてあります。
ここだけ自動実行イベントにしてあるのは画面切り替え時のバグに対応しようとしたものなのですが、イベントの起動条件にスイッチを取り入れたので実のところ不要説もなくはないのですが、
管理上楽そうなのでそのままにしてみたり。

カスタムメニュー通常

ここまで完全に見た目に現れない変更点ばかりですが、残念なことにまだまだ続きます。
カスタムメニューに関して。
前回は一つのコモンイベントでほぼ作成されていたカスタムメニューですが、今回から起動時のイベントと中身が別になりました。
次の画像を見て貰えばわかる通り、マウス対応の為です。
中身に関しては前回適当に埋めていたその他のところにチャート関連のものが入るだけで大きな変更点はありません。

カスタムメニューマウス対応

クリック対応のカスタムメニュー。
スイッチの名前にやたらクリックと書いてある辺りに怨念めいたものを感じますね。
先ほども触れた通りなぜだかマウス操作とキーボードの操作で反応が異なる点があります。
メニュー周りでも同様で通常のキーボード操作では問題ない場面でも、クリック操作だとなぜか並列処理イベントが割り込んできてしまったり、メニュー画面の選択肢が出ているのに文章送りのループがなぜか生きていて表示がバグるなどやりたい放題。
キーボードとマウス操作を同時にしなければ問題ないので普通のRPGならあまり気にしなくてもいい点なのですが、ノベルゲームだと文章送りはマウスでスキップはキーボードみたいな操作もあり得そうなので意外に問題。
今回の場合はメニューを開くイベントを完全に隔離して、なおかつ片方が実行されているときにはもう片方は実行されないような感じにして対処しています。

メニューボタン表示

ようやく画像的に見栄えのある追加要素、メニューボタン表示になります。
前回かなり笑えない問題としてマウス操作でのメニューを開く難易度の高さがあったので、それの対応策として常時画面に表示されるボタンを導入しました。文章表示の際などメニューを開ける場面で表示し、マウス操作の人はそれをクリックしてもらうことによってメニューを開けるといった仕組みになります。

メニューボタン作成には画像にコモンイベントを仕込めるようになるプラグイン『PictureCallCommon』を利用させてもらいました。
プラグインコマンドの内容としては
ピクチャ10番を押した際にコモンイベント11「カスタムメニュー(クリック対応)」を起動
ピクチャ10番に対して右クリックのリリース時に「OK」キーを入力
の二種類になります。
後者はメニューを開く際に起こる、とある現象の対応策として入れてみましたが、効果のほどは微妙なので詳細に関しては割愛。

テストプレイメニューボタン

テストプレイ。
今回初めての花のある画像やったー。
画面切り替え時、メニュー画面を開いている最中などを除き同じ位置に配置して押せるようになっています。
ボタンに関しては完全に自作。
なるべくシンプルなものにしてごまかそうとしてますが隠しきれないデザインセンスのなさに泣いた。

ゲーム本編に関係する変更点は以上となります。
画面にボタンが一つ追加されるだけという変わり映えのなさなのですが、その一つの追加、通常のほうのメニューとの連動、テスト周りで思うようにいかないバグやら挙動やらが本当にもうわらわら出てきてですね。
マウスでメニューを開いた後キーボードで閉じて見たら会話が一つ飛ぶバグみたいな理解できないところに影響が出るものもありてんやわんやでした。
そろそろなんか身の丈に合ってないことをしている感が出てきた感じもしますが、一応熱意があるうちは頑張りたいですね。

カスタムフローチャート

と言う訳で今回の本題、カスタムフローチャートについて。
ノベルゲームと言えばフローチャートだろ。
というほどにはあまり見かけないような感じもしなくないですが、街みたいなマルチ視点アドベンチャーというのはいつの時代もあこがれるもの。
今回はピクチャの描写を主に使ってフローチャートっぽいのを再現していきたいと思います。

という意気込みだったのですが、前のマウス対応で予想外に時間を使ってしまったので今回は割と中途半端な形になります。
申し訳ありません。

カスタムフローチャートの基本設計について。
せっかくノベルゲーなんだから、フローチャートをつけてみたい。
でも全部画像で用意するのも、修正したりするのも手間だなあ。
基本のパーツだけ用意してツクール側で適当に作ってくれるイベントを作っちゃえばいいんじゃね?
という発想から生まれたものです。
実際試してみたところまだまだビジュアル面に難ありといった感じですが、思ったよりは自動生成っぽくなっていると思っているので生温い目で見守ってください。

実際の設定内部に関して。
まずは今後の取り回しのことを考えてイベントを複数のブロックに分けて作りました。

シーンアイコンの配置イベント
座標計算イベント
シーン接続イベント
接続総合管理イベント

の四種類となります。

理想形としてはシーンアイコンの配置イベントと接続総合管理イベントの二種類に数値を設定するだけで残り二種類のイベントが勝手に生成してくれるといった感じの設計になります。
出来るだけ楽できるように作りたかった感だけでも伝われば幸い。

カスタムフローチャート

こちらが シーン単位の配置、設定 のコモンイベント「カスタムフローチャート」になります。
基本的な設定の他、イベントとしての本体も兼ねており、実行時にはこちらのコモンイベントが読み込まれるという形になっています。
とはいえ細かい処理に関してはほかのコモンイベントで行うのでこちらでやることは割と簡素、になる予定でしたがいろいろ詰め込んでいるうちにちょっと混雑してきたような。
隙を見て整理していきたいです。

設定項目としては
変数「フローチャート座標ID」、
表示する画像、
シーンID(追加予定)

を置くだけ。
座標変数に関しては画面を48×48単位で割ったマス目単位で捉えて十の位にx座標、一の位にy座標を入れるという形式。
ツクールでいうところの(2,4)マスなら24、(5,5)なら55といった感じ。
この辺りは正直、数値を入れると勝手に向こうが計算してくれるという仕組みを作りたかっただけ感はある。
ともあれ、後述する計算イベントによって割り出した座標にシーンアイコンをピクチャ表示して完了。
一応該当シーンを閲覧するまでは非表示にしておくように条件分岐で囲ってみたりしました。

シーンIDに関しては現状そのシーンに入ったことのある証明として採用を予定しているが、利便性を考えると別にした方がいいかも?といったところ。

カスタムフローチャート後半

同コモンイベントの後半部分。
シーンアイコンの表示を終えた後は改めて シーン接続 のコモンイベントでアイコン同士の接続を行ってフローチャート感を出していくといった感じ。
表示を終えた後はお約束のループイベントで入力待ち。
今回分では画面を閉じるためのみに使用していますが、後々キー入力などでアイコンを選択、シーンの説明とかジャンプ機能とかを入れられるようにしていきたいと前向きに検討中です。

フローチャートを閉じる際にピクチャの消去を行うのですが、今回フローチャートの生成にやたらめったらピクチャを使用するので、その一つ一つを削除していたらやってられない。
ということでスクリプトに頼ってみました。
チャートの表示周りに使っているピクチャ番号は11以降なので、
カウント11から適当に100迄のピクチャを乱雑に削除。
見た目簡単そうですが、基本機能のほうだと1行で一つの番号のピクチャ消去しかできない上に消去対象に変数を使えないので、消すだけでも90行近く並べないとできない処理が簡単にできます。
少し前まで面倒でも安定性を考えてツクール内の基本機能で済ませておこうという考え方だったのに、最近行数的に面倒臭そうな処理があるとスクリプトを探す癖がついてしまった。
これが慣れということなのか、悲しいね。

座標計算

こちらが座標計算のコモンイベント。
引っ張ってきた座標IDをばらしてXY座標の変数にそれぞれ格納した後、マス目に合わせた数値調整をして返すといった形。
ぶっちゃけ分ける程度でもない簡単な計算なのですが、
この素材を投げて成型されて帰ってくるというやり取りが工場チックで素敵だと思うのですがどうでしょうか。

テストプレイフローチャート

テストしてみるとこんな感じ。
画面の大半を使っているウィンドウがフローチャートの表示用。
ここが内部的にマス目状に区切られているので場所を選んでシーンアイコンやら線とかを配置していくという形になる。
背景画像は毎度おなじみMADOを使用して拵えたものを画像編集ソフトで無理やり組み立てたもの。
汎用性はない。
スクリプトでもウィンドウの生成は意外に面倒らしくてプラグインだよりっぽいので今後もこういう形になっていく予定です。
ちょっと見えづらいけど左上にある青い四角がシーンアイコンになります。

シーン接続解説1『変数地獄』

今回制作分のある意味肝と言えるシーン接続について。
今後楽したいという一心で比較的簡単な設定のみでフローチャートを作れるようにしたい、というためのコア部分になります。
とにかく小難しい表示は全部頼むといった感じの詰め込みようなので無駄が多いうえに長くなりますがご容赦ください。

1枚目は変数埋め込み地獄
やっていることは一つ前の座標計算とほぼ同じですが、線の描写に使う都合上微妙に数値設定が異なる点があり、使いまわしできず、畜生。
この後紹介する接続総合イベントのほうから
接続元シーンアイコン
接続先シーンアイコン
の二つの座標IDを取得してきて計算、描画位置、二点間の距離を計算して後のループイベントで活用するといった形。
接続元はアイコンの下部分、
接続先はアイコンの上部分を基点として利用するので微妙に計算が異なっています。

シーン接続解説2『温床地獄』

二枚目は変数の設定を終えて最初のアクションから。
今回のフローチャートでは基本的に接続元が上、接続先が下という形を想定して、接続する二点間に高低差がある場合のみ描画を行うという形になっています。
なので当然最初の一歩は下に伸びる線になるはず、という思考でまずは直進。
この線はマス目でいうところの一つ下にあるアイコンとのちょうど中間で止まるようになっているので、そこで、目標地点とX軸上の距離があるかどうか確かめます。
あった場合はその方向の左右どちらかに向かって曲がり進んでいくという流れになります。
今回のフローチャートではできる限り楽しようという概念から途中途中の障害物の感知を一切行わず、なるべくぶつからないようなルートどりをするというものになっています。
各シーンアイコンは周囲一マスをあけてあるので、その隙間を縫って目的に向かうという感じでルート決定をするといった感じです。

線の描写にはおなじみピクチャの表示を利用するのですが、今回は途中、ループを活用して多数のピクチャを扱う場面があったり、複数のルート接続を同時に行う処理上、ピクチャ番号の設定が大変なことになってきたので、変数を埋め込んで使えるスクリプトの力を借りることにしました。本当に楽。
座標設定には各座標を足し引きして作ったチャート位置XY、各種判定には同じような形で用意した距離XYを用います。

シーン接続解説3『直下地獄』

二枚目の時点で目標とのX軸が同じか、あるいは曲がって下が空欄になっている状態なので、Y軸方向に進んでいきます。
目標地点は対象の上部付近なのでその高さになるように下に線を伸ばしていきます。
対象との距離がマス目でいうところの一マスになったあたりでストップするといった感じです。

シーン接続解説4『再来地獄』

この時点で高さに関しては目的位置にたどり着いているはずなので改めて左右判定。
距離Xが0の場合はすでに目的地にたどり着いているということなので特に何もせず、
左右のどちらかが大きい場合はそちらのほうに向かって曲がるといった形です。
最初のカーブと合わせて二度曲がる機会があるので、見栄えとしては少し奇妙な形になりがちですが楽するためには仕方ない。

シーン接続解説5『横滑り地獄』

左右に曲がったうえで足りない分を再びループする形で伸ばしていきます。
ここで線を引くのに使ったパーツは適当に画像編集ソフトで作ったのですが、なんかこれ以上ないってくらいシンプルに仕上げたのに素人感が半端ないんですけどどういうことなんでしょうか。
見た目のいいパーツのつくり方が知りたい。

シーン接続解説6『最終横地獄イチタリナイ』

ここまでくれば目標地点の上部に線がたどり着いてくれているはずなので、最後に下に線を伸ばして到着、といった形になります。
調整してはズレ、数値を弄って、変な方向に線が飛び出して、画像を修正したらブツブツに途切れる、と作っていてうすうす感づいてはいたけど、これ普通に毎回手作りでチャート作っていった方が間違いなく楽。

カスタムフロー接続総合

最後に 接続総合管理イベントのほうでルート接続の設定を行うといった感じ。
ここでは接続元と接続先シーンのIDを入力して、先ほどのコモンイベントに投げ込むといった形。
そのうえで条件分岐を用いて、シーンアイコンの表示と同時タイミングでルートがつながるようにしてみた。
複数のルートから行ける、いわゆる共通ルートに関しては遷移元のシーンIDも条件分岐に入れてどちらのルートから来たのか判別するみたいな方式にしてみたけど、効果のほどは不明。

基本形としては最初に説明した通り、
カスタムフローチャートでシーンアイコン生成、ここで接続設定の二工程のみでフローチャートっぽいものが作れるのでこれからの作業がだいぶ楽になる、はず。

テストプレイフローチャート2

早速テストプレイ。
シーンを進めてみてから、確認、無事つながる。
この一歩は小さな一歩だが、フローチャートを楽して作りたいという自分にとっては大きな一歩なのだ。
と感動するのもつかの間、このあたりで根気が尽き始めたため、この後予定していたチャートの表示周りの作業は先送りに。
なんというか、本当に今回ビビるくらい進展ないなコレ。

テストプレイ3
夢膨らみます

適当に追加して、ごてごて伸ばしてみた。
こうやって複数がちゃんと結べているのを見るとなんか出来たって感じが出てきますな。
青色アイコンは既読、灰色アイコンは未読、もう一つ選択中アイコンみたいなのも用意していたけど今回は見送り。
これだけだと狭いからページスクロール、はおそらく無理なので、改ページ機能とか、現在通っているルートだけ線の色を変えるとか、交差しちゃっているルートを判別できるようにするとかいろいろやりたいこと、改善点が出てくるけど、今回はここまで。

以上カスタムフローチャートを作ってみるでした。
ノベルゲーム制作に触れるなら一度は作ってみたいと思っていた要素で最悪お蔵入りする可能性もあるかも、とか思っていましたが、とりあえずちゃんと動いてくれるような出来になって一安心です。
とはいえまだ見栄え自体はまあ、仕方ないけど機能面等でいろいろ遊べそうなので、ちくちく触っていきたいですね。

おまけ

フローチャート理想形

画像編集ソフトで作った初期フローチャート構想案をペタリ。
この位までゲーム上で自由にカスタマイズできるようになったら面白そうだけど、たぶん熱意のほうが先に燃え尽きそうですね。

コメントを残す

メールアドレスが公開されることはありません。 が付いている欄は必須項目です

CAPTCHA