Unityに関連する記事です

 以下の内容で順番に実装していきます。

25.メッセージ表示用のスクリプトを作成するА淵僖薀哀薀佞虜埜紊離瓮奪察璽犬表示されたときに分岐の選択肢用のボタンを生成する分岐を作り、【24】の生成処理に紐づける)
26.メッセージ表示用のスクリプトを作成する─淵轡淵螢データに合わせてキャラの立ち絵と背景を制御する)


25.メッセージ表示用のスクリプトを作成するА淵僖薀哀薀佞虜埜紊離瓮奪察璽犬表示されたときに分岐の選択肢用のボタンを生成する分岐を作り、【24】の生成処理に紐づける)


 パラグラフの最後のメッセージが表示されたときに分岐の選択肢用のボタンを生成する処理を追加します。
この処理を追加することで、【24】でデバッグして確認しているGameDirectorクラスの選択肢ボタン生成処理と、TextMessageViewerクラスの分岐発生の処理とを紐づけていきます。


TextMessageViewerスクリプトのNextTouchメソッドを修正して、分岐発生の処理を追加する



TextMessageViewer.cs

 <= クリックすると開きます。


 修正が完了したら、ヒエラルキーからTextMessageViewerゲームオブジェクトを選択し、インスペクターを確認します。
GameDirectorクラスのアサインが出来る場所が追加されていますので、こちらにヒエラルキー上にあるGameDirectorゲームオブジェクトをドラッグアンドドロップしてアサインします。
 これで1つのシナリオデータ内(パラグラフ内)のすべてのメッセージが表示されたあとにタップすると、画面に先ほどデバッグで確認した分岐用の選択肢ボタンが
シナリオデータに登録されている分岐の数だけ生成されるようになります。


GameDirectorスクリプトのStartメソッドを修正する


 これで選択肢ボタンの生成をデバッグする必要がなくなりましたので、GameDirectorスクリプトを開いて、Startメソッドを修正しましょう。


GameDirector.cs

 <= クリックすると開きます。


 修正が終わったらゲームを実行します。
 
 デバッグ前と同じようにシナリオデータのメッセージが再生されていき、最後のメッセージが終わってタップをした際に、
シナリオデータに登録されている分岐の数だけ選択肢ボタンが表示されるか確認しましょう。
またその選択肢ボタンを押した際にも、タップされた選択肢ボタンとタップされなかった選択肢ボタンの挙動がデバッグの際と同じ挙動かどうかを確認します。

 タップ後、次のシナリオデータのメッセージが再生され始めれば処理は成功です。無事にGameDirectorクラスの処理とTextMessageViewerクラスの処理とが紐づきました。

26.メッセージ表示用のスクリプトを作成する─淵轡淵螢データに合わせてキャラの立ち絵と背景を制御する)

 Excelのシナリオデータには、まだゲーム内に反映されていない情報があります。
1つはキャラの立ち絵イメージです。これはメッセージの再生に合わせて制御を行います。例えば、会話をしているキャラは画面に表示されていることがほとんどだと思いますが
そのキャラの前に会話していたキャラがいたのであれば、二人分のキャラを画面に表示させておいた方が話の流れとしてはスムースでしょう。

 もう1つは背景のイメージです。こちらはパラグラフ単位でシナリオデータが進むことを考えると、各シナリオデータで1つの背景イメージを設定すれば問題なさそうです。

 これらの情報はすでにシナリオデータには含まれていますので、TextMessageViewerスクリプトを修正して以下の処理を追加します。

  1.パラグラフが始まる(新しいシナリオデータが再生される)際に背景イメージを変更する処理を追加する。
  2.メッセージの再生に合わせてキャラの立ち絵イメージを制御する処理を追加する。

1.背景イメージを用意する


 シナリオデータには背景イメージを変更する際の情報として、イメージの通し番号を設定しています。
そのため、ゲーム内で使用するために用意した背景イメージは、同じ書式でファイル名を設定しておく必要があります。
このファイルをResourcesフォルダ内に配置し、それをゲーム内で読み込む処理を行うことで動的に背景イメージを差し替えて変更を行います。

 Resourcesフォルダ内にBackGroundフォルダを作成しましょう。その中に背景イメージを配置し、ファイル名は半角数字に変更します。
この数字とシナリオデータの背景イメージ用の数字とを合致させて背景イメージを読み込みます。下記の画像のような状態にしてください。




2.キャラの立ち絵イメージを用意する

 こちらはResourcesを使って動的に変更する方法ではなく、Canvas内にキャラの立ち絵イメージを設定して用意おき、そちらを表示/非表示を切り替える形で設計します。
もしも動的に立ち絵イメージを変更したい場合には、差し替えたいゲームオブジェクトにクラスを持たせることで対応できます。(今回はそちらの方法では実装しません。)


 まずはフォルダ代わりとなる空のゲームオブジェクトを1つ、Canvas内に作成をします。名前をCharaTranに変更しましょう。
Positionについては、立ち絵イメージの位置を全体的に制御するようになりますので、まずは(0, -100, 0)の位置にしておいて、適宜調整をしてください。

 なお、このCharaTranゲームオブジェクトの位置は、BranchSelectButtonTranゲームオブジェクトよりも優先順位を低い位置に設定します。
そうしないと選択肢が表示された際に、キャラの立ち絵の方が選択肢よりも手前に表示され、選択肢を隠してしまいます。(後述のヒエラルキーの画像を参考にしてください)

 CharaTranゲームオブジェクトのインスペクターを確認し、一番下にあるAdd Componentを選択してGirdLayoutGroupをアッドします。
このコンポーネントは縦方向、あるいは横方向のいずれか指定した方向に対して、子オブジェクトの大きさとスペースを制御して並べる機能を持っています。

 画像をみながら設定を行ってください。


 Cell Sizeは、このCharaTranゲームオブジェクトの子オブジェクト(1キャラ分)のWidthとHeightになります。適宜調整してください。

 Spacingに値を設定することで、子オブジェクトがくっつかないように間隔を空けて配置してくれます。
 
 Constrait Countが1行に並べる際の最大値です。今回は横方向に、最大で3キャラ分並べる予定ですので、こちらを3に変更します。
ここでは3キャラ分を想定していますが、もっと人数が増えるのであればこのConstrait Countを変更してください。


3.DisplayCharaスクリプトを作成する


 続いて、キャラの立ち絵用のゲームオブジェクトを作成していきます。
まずは始めに、以下のスクリプトを作成します。こちらは現在ゲーム中にキャラが表示されているか、いないかを判断させるためのスクリプトです。

DisplayChara.cs



4.DisplayCharaスクリプトを各 imgChara ゲームオブジェクトにアタッチする


 スクリプトの作成が終了しましたら、CharaTranゲームオブジェクトの子ゲームオブジェクトとしてImageゲームオブジェクトを追加します。
CharaTranゲームオブジェクトの上でメニューを表示し、UI => Image を選択します。名前はimgChara_0とします。また名前の左横にあるActiveスイッチをオフにして、非表示状態に設定します。

 こちらに先ほど作成したDisplayCharaスクリプトをアタッチします。キャラの名前をプルダウンメニューから設定できますので、Enumの0番目のキャラから順番に設定していきます。
 
 このimgChara_0を2つ複製してください。名前は最後の末尾の数字を1つずつ加算した値に変更してください。
完成すると、次のようなヒエラルキーと、各imgCharaになります。
 
ヒエラルキー(表示の優先順位があるので位置に注意!)


imgChara_0


imgChara_1


imgChara_2


 以上で背景イメージと立ち絵イメージの準備は完成です。


5.TextMessageViewerスクリプトを修正する


 それではここで、TextMessageViewerスクリプトを開いて修正していきます。こちらが最後の修正になりますので、長くなりますが全文を記載しておきます。

TextMessageViewer.cs

 <= クリックすると開きます。


 ゲームを実行してみましょう。まずは背景イメージが変更になるか確認します。その後、表示されるメッセージに合わせてキャラの立ち絵イメージが表示されたり、非表示になったりして
シナリオデータの設定の通りに制御されているかを確認します。

 これでテキストゲームの基本的なシステムの実装は終了です。おつかれさまでした。
 
 今後は演出や音楽、エンディングへの分岐など、ゲーム全体を見直しながら追加していく要素を実装していきます。

コメントをかく


「http://」を含む投稿は禁止されています。

利用規約をご確認のうえご記入下さい

Menu



プログラムの基礎学習

コード練習

技術/知識(実装例)

2Dおはじきゲーム(発展編)

2D強制横スクロールアクション(発展編)

3Dダイビングアクション(発展編)

2Dタップシューティング(拡張編)

レースゲーム(抜粋)

2D放置ゲーム(発展編)

3D脱出ゲーム(抜粋)

2Dリアルタイムストラテジー

2Dトップビューアドベンチャー(宴アセット使用)

3Dタップアクション(NavMeshAgent 使用)

2Dトップビューアクション(カエルの為に〜、ボコスカウォーズ風)

3Dトップビューアクション(白猫風)

VideoPlayer イベント連動の実装例

VideoPlayer リスト内からムービー再生の実装例(発展)

AR 画像付きオブジェクト生成の実装例

AR リスト内から生成の実装例(発展)

private



このサイト内の作品はユニティちゃんライセンス条項の元に提供されています。

管理人/副管理人のみ編集できます