Unityに関連する記事です

 ステージデータを活用し、経路の移動が完了した際に、分岐があるか判定をおこない、分岐がある場合には画面上に選択肢を表示し、
選択した内容の経路へ分岐させる機能の処理を作成します。



発展5 ー経路分岐用ポップアップウインドウの作成ー

 2回の手順に分けて実装を行います。
まずは、分岐の処理の前に、分岐が発生した際に画面に表示する選択肢用のボタンとその配置位置の準備から行います。

 今後自分で処理を作成していく際にも、まずは実装したい処理の全体を俯瞰的に考えて、その事前の準備として必要なものはなにかを精査し、
1つずつ順番に作成していくことをイメージしてください。



Canvas 内にボタンを配置するためのゲームオブジェクトを作成する


 分岐用のボタンを3つ配置できるように、Canvas 内にゲームオブジェクトを配置します。

 完成した際のゲームオブジェクトの構成です。
分岐方向は、右・左・前方(真っすぐ正面)の3つです。


ヒエラルキー画像



RootBranchSet ゲームオブジェクトを作成する


 分岐用のボタンを配置するためのゲームオブジェクトを管理するフォルダ役のゲームオブジェクトです。


インスペクター画像



Sceneビュー画像



RightBranchTran ゲームオブジェクト


 分岐用のボタンのうち、右方向の分岐のボタンを表示する位置の設定を行うゲームオブジェクトです。
この位置に分岐用ボタンを生成します。Rotation の値に注意してください。

 これは、分岐方向を示す矢印の画像を回転させるために設定しています。
矢印の画像は、初期設定で上方向を向いていることを想定して Rotation の値を設定していますので、
矢印の画像により、Rotation の値は適宜調整を行ってください。


インスペクター画像



Sceneビュー画像



LeftBranchTran ゲームオブジェクト


 こちらは左方向への分岐のボタンを配置するためのゲームオブジェクトです。
Rotation の値については、先ほどの説明と同じです。画像に応じて適宜調整してください。


インスペクター画像



Sceneビュー画像



CenterBranchTran ゲームオブジェクト


 正面方向への分岐ボタンを配置するためのゲームオブジェクトです。
Rotation の値については、矢印の画像が上方向を初期向きとして想定しているため、このゲームオブジェクトでは設定していません。


インスペクター画像



Sceneビュー画像



分岐用ボタンの作成

RightBranchTran ゲームオブジェクトの子オブジェクトとして Button ゲームオブジェクトを作成する


 分岐用のボタンのゲームオブジェクトを1つ作成し、完成したらプレファブにします。
RightBranchTran ゲームオブジェクトの子オブジェクトとして Button ゲームオブジェクトを作成してください。
名前は btnSubmitBranch に変更してください。

 3つの分岐のボタンを作成するのではなく、1つの分岐のボタンを3つの分岐ボタンとして活用する手法で設計します。
分岐ボタンを生成後、どの分岐位置に配置するかによって、矢印の画像を回転させて、分岐方向の情報をそれぞれ異なる情報として管理させます。

 ゲームオブジェクトのサイズについては、適宜調整してください。
矢印の画像についても、無料イラストなどを Unity へインポートして利用してください。
ここでは、上方向の矢印の画像を1つだけ用意し、Image コンポーネントの SourceIamge の項目にアサインしてください。
この画像を配置する位置に応じて回転させて利用しています。


ヒエラルキー画像 



インスペクター画像(この画像では矢印の画像はセットされていません)



Sceneビュー画像



矢印の画像例



 プレファブにしたら、ヒエラルキーから分岐ボタンは削除してください。


SubmitBranchButton スクリプトを作成する


 分岐用のボタンにアタッチし、ボタンの制御や、分岐方向の情報を管理させる機能を持つスクリプトを作成します。


SubmitBranchButton.cs


 スクリプトを作成したらセーブします。

 各メソッドや変数が、どういった役割を持って用意されているかをしっかりと理解してから進めてください。


btnSubmitBranch ゲームオブジェクトに SubmitBranchButton スクリプトをアタッチして設定を行う


 プレファブにした分岐用のボタンに SubmitBranchButton スクリプトをアタッチして、インスペクターから各変数へのアサイン設定をおこなってください。

 Button コンポーネントのアサインを行う必要がありますので、btnSubmitBranch ゲームオブジェクト自体か、
btnSubmitBranch ゲームオブジェクトにアタッチされている Button コンポーネントをドラッグアンドドロップしてアサインしてください。
自動的に Button コンポーネントの情報が登録されます。


インスペクター画像(この画像では矢印の画像はセットされていません)




 以上で移動先の分岐の処理に必要なゲームオブジェクトの作成が完了しました。
次の手順では、スクリプトの修正を行い、分岐の機能を実装します。

 => 次は 発展6 ー経路分岐機能ー です。

コメントをかく


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

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

Menu



技術/知識(実装例)

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

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

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

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

レースゲーム(抜粋)

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

3Dレールガンシューティング(応用編)

3D脱出ゲーム(抜粋)

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

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

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

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

VideoPlayer イベント連動の実装例

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

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

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

private



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

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