Unityに関連する記事です

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

 ここまでの実装がすべて終了すると、次のような動画の状態になります。

https://gyazo.com/d84791ecbf748362a948eafa0c814f86

22.Canvas内にUI部品を作成するぁ癖岐の選択肢用のボタンを作成し、プレファブにする)
23.GameDirectorスクリプトを修正する 福擅横押曚悩鄒した選択肢用のボタンを生成できるようにする。デバッグで確かめる)
24.GameDirectorスクリプトを修正する◆福擅横魁曚悩鄒した選択肢用のボタンを複数個(分岐の数だけ)生成できるようにする。デバッグで確かめる)


22.Canvas内にUI部品を作成するぁ癖岐の選択肢用のボタンを作成し、プレファブにする)

 
 シナリオデータを利用してメッセージの表示ができるようになりましたので、前回TextMessageViewerクラスに追加したbranchs変数を利用して
最後のメッセージが表示されたあとに、分岐用の選択肢を表示できる機能を追加していきます。

 この選択肢はボタンになっており、タップすることで次のシナリオデータのシナリオ番号が呼ばれ、その番号のシナリオデータを再生するような設計にします。
 
 作成するのはボタンを持つゲームオブジェクトです。また、こちらのゲームオブジェクトにはシナリオの番号を登録できるように専用のクラスを作ってアタッチします。
 順番に作成しましょう。

BranchSelectButtonクラスを作成する


 最初にBranchSelectButtonクラスから作成していきます。

 Scriptsフォルダ内でメニューを表示し、Create => C# Script を選択し、名前をBranchSelectButtonに変更します。
このスクリプトでは、シナリオ番号と、選択肢の内容を表示するテキストとの紐づけを持たせます。
また選択肢が画面左端から中央に向かってスライドしながら表示される設定も行います(DoTweenのシーケンス機能を新しく使用します。)

BranchSelectButton.cs

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


 続いて、このスクリプトをアタッチするゲームオブジェクトを作成します。

BranchSelectButtonゲームオブジェクトを作成し、プレファブにする


 ヒエラルキーのCanvas上でメニューを表示し、UI => Button を選択し、名前をBranchSelectButtonに変更します。
作成されたゲームオブジェクトのインスペクターを確認し、RectTransformコンポーネントがアタッチされているか確認しましょう。
(UI用のTransformコンポーネントです。普通のTransformコンポーネントの場合には削除して作り直してください。)

 Buttonを作成すると、親のオブジェクトにはImageとButtonコンポーネントがアタッチされており、子オブジェクトにはTextコンポーネントがアタッチされています。
今回はこれをそのまま利用します。画像を参考にして、親と子のゲームオブジェクトの名前を変更してください。

 

BranchSelectButtonゲームオブジェクトを設定する


 親であるBranchSelectButtonゲームオブジェクトのインスペクターを表示し、RectTransformのWidthとHeightを操作して、適宜なサイズに変更しましょう。

 つづいて、CanvasRendererコンポーネントにある Cull Transparent Mesh のチェックを入れます。
このプロパティにチェックを入れるとゲームオブジェクトが透明な間(アルファ値が0の間)は、このゲームオブジェクトの描画が停止されます。

 ゲームオブジェクトを透明にする処理は、透明な状態を常時描画するという処理になります。そのため、描画の処理の中でも負荷の高い処理になります。
このチェックをいれておくと透明である間は、この透明な状態を描画する処理が止まりますので、描画負荷が低下してゲームのパフォーマンスが上昇します。

 こういったコンポーネントのプロパティについては、一度、どういった処理なのかを確認をしてみるとよいでしょう。

 Imageコンポーネントで色を変更できます。メッセージの背景色となります。文字が読みやすい色にしましょう。



 続いて、作成しておいたBranchSelectButtonスクリプトを親のBranchSelectButtonゲームオブジェクトにアタッチします。
このとき、自動的にCanvasGroupコンポーネントもアタッチされます。
これはBranchSelectButtonスクリプトに記述した[RequireComponent(typeof(CanvasGroup))]という属性によるものです。
この属性情報を持つスクリプトは、アタッチされたゲームオブジェクトに対して引数で指定している型(コンポーネント)のアタッチを強要します。
もしもアタッチされていない場合には、今回のように対象のコンポーネントが自動的にAddされて追加される機能です。
 スクリプト内での処理で必要不可欠なコンポーネントがある場合には、このRequireComponent属性を利用するといいでしょう。

 アタッチされたBranchSelectButtonスクリプトをインスペクターで確認すると、アサイン情報が3つ表示されますので、順番にアサインしていきます。



 アサイン情報を持つゲームオブジェクトをドラッグアンドドロップすることで、アサイン出来ます。

 一番上のTextコンポーネントのアサインには、子オブジェクトであるtxtBranchMessageゲームオブジェクトをアサインします。
 2つ目のButtonコンポーネントのアサインには、親オブジェクトであるBranchSelectButtonゲームオブジェクトをアサインします。
 一番下のCanvasGroupコンポーネントのアサインも、親オブジェクトであるBranchSelectButtonゲームオブジェクトをアサインします。
あるいは動画のように、インスペクター上からアサインしても大丈夫です。

https://gyazo.com/2f823dd65029da3ca6ac14389cf85a3b

 branchNoは、このゲームオブジェクトが生成された際に代入される情報です。ここでは0のままで問題ありません。

 isClickableも、このゲームオブジェクトが画面上でタップされた際に動作する変数ですので、チェックはなし(falseの状態)で問題ありません。

 EaseTypeはプルダウンメニューから設定できますので、アニメを見ながら好みのものを設定しましょう。

txtBranchMessageゲームオブジェクトを設定する


 大きさについては、親のゲームオブジェクトの内側に収まるようにしましょう。親のゲームオブジェクトが背景になりますので
それよりも大きくなってしまうと、文字が背景をはみ出て表示されてしまうからです。

 文字の色も読みやすい色にしましょう。以前に紹介したCircleOutlineを設定し、文字に輪郭をつけてもいいです。


 
 ここまですべての設定が終了しましたらプレファブにします。ヒエラルキーにあるBranchSelectButtonゲームオブジェクトを
Prefabsフォルダにドラッグアンドドロップしましょう。無事にプレファブになったら、ヒエラルキー上にあるこのゲームオブジェクトは削除します。



23.GameDirectorスクリプトを修正する 福擅横押曚悩鄒した選択肢用のボタンを生成できるようにする。デバッグで確かめる)


 作成したBranchSelectButtonのプレファブですが、こちらは1つのシナリオデータ(パラグラフ)内のメッセージがすべて表示された後に生成されるものです。
生成処理は、GameDirectorクラスが処理を行いますので、GameDirectorクラスを修正して、分岐用のボタンが生成されるように処理を追加します。

 とはいえ、処理が正常に動作し、ボタンが生成されるかどうかを確認しておく必要があります。
そこでシナリオの再生を一時ストップし、ゲームの実行と同時にボタンを1つ生成する処理で動作確認をしていきましょう。
 
 このようにデバッグ処理を行う場合、一部を書き換えればよいような設計にしておくと修正が容易です。意識して設計しましょう。
 
GameDirector.cs

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


 GameDirectorクラスの修正が終わったらインスペクターを確認します。
変数が3つ追加されていますが、一番上のbranchSelectButtonListはゲーム内で追加される情報ですので、こちらはSize0のままで大丈夫です。

 2つ目のbranchSelectButtonPrefabには、Project内PrefabsフォルダにあるbranchSelectButtonゲームオブジェクトをドラッグアンドドロップしてアサインします。

 3つ目のbranchButtonTranですが、こちらはボタンを生成する位置の情報をアサインするようになっています。
このbranchButtonTranを利用して、画面外に生成されたボタンを、画面外から画面の中央に向けてスライドさせながら表示したいので、
まずはこのbranchButtonTranを作成しましょう。

 Canvasの上でメニューを表示し、CreateEmptyを選択し、名前をbranchButtonTranに変更します。他のコンポーネントは不要です。
こちらを画面外の左側に配置しましょう。この位置から画面の中央に向かってボタンをスライドさせます。

位置については画像を参考にしながら、調整してみるといいでしょう。


全体で見た場合には、Canvasよりもさらに画面左端の半透明の丸い部分が、このゲームオブジェクトの位置です。


 位置の調整が終わったらGameDirectorクラスのインスペクターを確認して、3つ目のアサイン情報に
このbranchButtonTranをヒエラルキーからドラッグアンドドロップしてアサインしましょう。


 インスペクターの設定が終わりましたら、先ほど作成したBranchSelectButtonスクリプトのこちらのコメントアウトを削除して、該当の処理を呼べるようにします。

gameDirector.ChooseBranch(branchNo);   // 次の手順が終わるまでコメントアウトしておく


 それではゲームを実行してみましょう。シナリオの再生は処理をコメントアウトしてありますので、実行後、すぐにボタン1つが生成されれば問題ありません。
 実際にボタンを押すと、最初のシナリオのメッセージが再生されるはずです。

https://gyazo.com/77b1171fcb0ec93bf7fa03571ea6ca2b 

24.GameDirectorスクリプトを修正する◆福擅横魁曚悩鄒した選択肢用のボタンを複数個(分岐の数だけ)生成できるようにする。デバッグで確かめる)


 GameDirectorスクリプトのStartメソッドにあるこの処理の引数を1から3に変更します。

// 分岐選択肢ボタン生成用のDebug処理
StartCoroutine(CreateBranchSelectButton(3)); // 追加。分岐選択肢ボタンの生成処理。引数で指定された数だけボタンを生成する

 実行してみましょう。複数の選択肢ボタンが順番に生成されて、画面中央にスライドしてくれば正常な処理です。
またGameDirectorゲームオブジェクトのインスペクターを確認し、BranchSelectButtonListに3つのボタンが登録されているかも一緒に確認しましょう。



 選択肢ボタンを1つタップすると、選択されたボタンは右端にフェイドアウトしながらスライドし、残るボタンはその場でフェイドアウトします。

ここまでの完成動画です。(ページの最初に提示した動画と同じです)
https://gyazo.com/d84791ecbf748362a948eafa0c814f86

コメントをかく


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

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

Menu



プログラムの基礎学習

コード練習

技術/知識(実装例)

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

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

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

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

レースゲーム(抜粋)

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

3D脱出ゲーム(抜粋)

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

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

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

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

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

VideoPlayer イベント連動の実装例

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

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

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

private



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

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