Chapter22 ADVゲームのUIをカスタマイズ

ご覧いただいたのは、僕が一人でコソコソ作っているADV(アドベンチャー)ゲームの現段階での動作である。

今回は、プレイヤーが押すことで反応を返すことが出来る『Buttonオブジェクト』を自分好みの画像にカスタマイズする方法と、テキストがすべて読まれたタイミングで『Buttonオブジェクト』を表示させるスクリプトの書き方をご紹介する。

『Panelオブジェクト』内に『Buttonオブジェクト』を3つ用意し、等間隔で配置された状態。何も手を加えていない『Buttonオブジェクト』はこのように真っ白な長方形である。

今回は、後ろが少し透けて見えるような画像を三つ用意したので、これを『Buttonオブジェクト』に組み込もうと思う。

まずは、いつも通り『Assetsフォルダー』内に、用意した画像を追加しておく。

『Buttonオブジェクト』の見た目は『Source Image』から変更が可能なので、反映させたい画像を青枠の中にドラッグアンドドロップするか、右の丸いボタンを選択して追加すれば・・・

このように、早速画面に反映される。

デザインについてはこれで問題ないが、このままプログラム開始すると、選択肢が常に表示されたままの状態になる。

理想としては、会話文がある程度あって、相手が質問を投げかけてきたタイミングで初めて選択肢が表示されるという流れが良い。

以前、文章を表示させる『Textオブジェクト』に、配列型で文をいくつか用意しておいて、『画面がタッチされたら次の文章を表示する』というようなスクリプトを追加した。

変数『nowNumber』というものを作り、もし (if) 画面がタップされたら、『nowNumber』の値を『+1』するというコードを作り、『nowNumber』の値に対応した文を出力させるというようなスクリプトになっている。

今回は『おかえりなさい・・・』のタイミングで、キャラクターを表示させて、『わ・た・し？』のタイミングで選択肢を表示させたいので・・・

『nowNumber』の値が『2』の時に『Charaオブジェクト』を表示させ、『3』の時に『Panelオブジェクト』を表示させるというコードを書いた。

ちなみに、『Chara』、『Panel』というのは自分で名付けたフェールド名で、

このように、スクリプトの冒頭で宣言している。

フィールドの型は『GameObject』型にしており、Unity上のすべての『オブジェクト』をこのフィールドに渡すことが出来る。

Unity上に『Panel』、『Chara』のフィールドが表示されるので、それぞれのオブジェクトをドラッグアンドドロップする。

『〇〇.SetActive(false)』で〇〇オブジェクトを削除することができ、反対に『〇〇.SetActive(true)』で〇〇オブジェクトを呼び出すことができる。

まず、プログラムが開始して直ぐは非表示にしたいのでスタート関数内で『〇〇.SetActive(false)』を記述し、

画面が二回タップされた時に『Charaフィールド』に格納されている『Charaオブジェクト』を呼び出し、三回タップされた時に『Panelフィールド』に格納された『Panelオブジェクト』を呼び出せるよう記述した。

呼び出されたオブジェクトは、呼び出されたタイミングからスクリプトに書かれた内容を実行し始めるので、『Charaオブジェクト』や『Panelオブジェクト』には、呼び出されてから行ってほしいプログラムを書いたスクリプトをアタッチすると良い。

今回は、透明度や座標を少しずつ更新していくというようなスクリプトを作ってキャラクターや選択肢の出現時のアニメーションを作っている。

そのやり方については前回の投稿で紹介しているので、興味のある方はそちらも観ていただきたい。

ということで、今日はここまで。

つい最近、絵が凄い上手い友達と久しぶり会って夕食を共にしたのだが、さりげなく「ゲーム作らへん？」と尋ねてみたところ、「ええで。ギャルゲー作ろ。」と速攻で返事が返ってきた。

そっちの制作は、おそらく完成後お披露目ということになるだろうが、完成した際は是非遊んでいただきたい。

ご閲覧ありがとうございました。