Unityに関連する記事です

 先ほどの手順でゲームのサイクルが完成しました。その中においてクリアの状態(GameStateがResultのとき)を実装できましたので、
ゲームクリアになった際にはゲーム画面にクリアと表示して、ゲームの状態がユーザーに伝わるようにします。


完成動画
https://gyazo.com/478ce79c7473fb5122460271021fc70a


 また次の手順ではゲームオーバーの状態を追加して、ゲームオーバーの際にもゲーム画面にゲームオーバー表示をするように、順番に実装していきます。

 これらを表示するためには、同じ部分の共通UI部品を利用して、その表示内容を場面にあった内容に動的に変更するようにします。
イメージとしては掲示板が1つあり、クリア時にはクリアと書き、ゲームオーバー時にはゲームオーバーと書いて、それを画面に見せる、という感じです。
つまり1つのTextコンポーネントのTextを、ゲームの状態に見合った情報に書き換えて使う設計になります。

 ここでは共通で利用する掲示板用のUIの作成と、それを利用してゲームクリア時にクリアの表示を画面に表示する機能を実装していきます。



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

手順21 −ステージクリア表示を実装−
44.Canvas内にUI部品を作成するァ.押璽爐両態を表示するStageInfoゲームオブジェクトを追加する
45.UIManagerスクリプトを修正する
46.BattleManagerスクリプトを修正する



 新しい学習内容は、以下の通りです。

・処理の内容を見て自分でコメントを書いてみる
 ・Circle Outline アセット



44.Canvas内にUI部品を作成するァ.押璽爐両態を表示するStageInfoゲームオブジェクトを追加する

設計


 Canvas内に作成してあるTop_UI ゲームオブジェクトの子オブジェクトとして、ゲームのステージ情報の表示を行うためのゲームオブジェクトを追加していきます。

 用意するのは、フォルダ用のゲームオブジェクトと、その子オブジェクトにスコア表示用のText、Imageコンポーネントを持つゲームオブジェクトです。
このコンポーネントを UIManagerスクリプトを修正して操作出来るようにし、ステージクリアの状態と同期させて情報を表示します。

 順番に作成していきます。


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


 ヒエラルキーの Canvas ゲームオブジェクトの上で右クリックをしてメニューを表示し、Create Empty を選択します。
名前を StageInfoPlace に変更します。このゲームオブジェクトはこれから作成するステージ情報表示用のゲームオブジェクトのフォルダとしての役割を持ちます。
作成後、ヒエラルキーを確認して、Canvas内での位置を確認してください。
下記の画像のような親子関係になっていれば大丈夫です。なっていない場合には再度作成してください。


ヒエラルキー画像



 フォルダとして利用しますので、位置や大きさは変更せずに問題ありません。Position が (0, 0, 0)ではないときだけ、(0, 0, 0)に修正してください。
また、インスペクターの一番下にある Add Component ボタンを押して、CanvasGroup コンポーネントを追加してください。
追加するだけで他の操作はまだ不要です。


StageInfoPlace ゲームオブジェクト インスペクター画像



StageInfoPlace ゲームオブジェクト Sceneビュー画像



  CanvasGroupの機能を利用することで、この後に作成する子ゲームオブジェクトの透明度をまとめて操作出来ます。(下記の動画のように変更できます)

検証動画 CanvasGroupのAlpha操作 後程スクリプトを修正し、この操作をスクリプトから行います
https://gyazo.com/889cfeec19e6cb22f0e46aa698bca449


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


 StageInfoPlace ゲームオブジェクトの上で右クリックをしてメニューを表示し、UI => Image を選択し、名前を imgStageInfo に変更してください。
作成後、ヒエラルキーを確認して、Canvas内での位置を確認してください。下記の画像のような親子関係になっていれば大丈夫です。
なっていない場合には再度作成してください。


ヒエラルキー画像



 このゲームオブジェクトはステージ情報の文字列を表示する際の、背景の役割を担います。

 Image コンポーネントを確認して、Source Image プロパティに任意の画像を設定します。画像を利用する際にには、適宜な無料素材を探してUnityにインポートして利用してください。
今回は初期画像のまま設定は変えずに、色と透明度を調整しています。
また RaycastTarget のスイッチをオフにしてください


 画像を設定したら、大きさを調整します。RectTransformコンポーネントを画像を参考にしながら調整してください。
設定している画像に応じて適宜な大きさにしてください。
今回は画面の中央に帯状で設置していますが、他の形状でも問題ありません。自分の考えたデザインで作成しましょう。

 最後に、Canvas Rendererコンポーネントの Cull Transparent Mesh のチェックをオンにしてください。


imgStageInfoゲームオブジェクト インスペクター画像



imgStageInfoゲームオブジェクト Sceneビュー画像



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


 StageInfoPlace ゲームオブジェクトの上で右クリックをしてメニューを表示し、UI => Image を選択し、名前を txtStageInfo に変更してください。
作成後、ヒエラルキーを確認して、Canvas内での位置を確認してください。下記の画像のような親子関係になっていれば大丈夫です。
なっていない場合には再度作成してください。


ヒエラルキー画像



 Text コンポーネント内の Raycast Target のスイッチをオフにしてください
また Text 欄ですが、文字の大きさを調整し、Stage Clear! と記述して、収まる程度、あるいは大きめの大きさを用意してください。
調整が終わったら文字列を削除し、空白にしておいてください。

 Textにアウトラインなどの装飾を行いたい場合には、OutLineコンポーネントやShadowコンポーネントなどを追加して調整してみてください。
今回は CircleOutline コンポーネントをアタッチして文字装飾をしています。


<CircleOutline>


 Github で公開されている文字装飾用のスクリプトです。
文字の外枠に対して作用し、通常の Outline コンポーネントよりもくっきりとした輪郭を作って装飾することが出来ます。

CircleOutline
https://gist.github.com/FreelyApps/e9f3f4a4d89882b...

 上記サイトの右上に「Download Zip」というボタンがありますので、そちらを押してダウンロードして解凍し Unity へインポートするか、
新しいスクリプトを Circle Outline という名前で作成して、上記のサイトのソースコードをコピーしてペーストするかしてください。

 作成に成功すると、Add Component より、Circle Outline を選択し、設定出来るようになります。




imgStageInfoゲームオブジェクト Textコンポーネント インスペクター画像



CircleOutline インスペクター画像



 RectTransformコンポーネントも、文字の大きさと imgStageInfo ゲームオブジェクトで設定した画像の大きさに合わせて適宜な大きさに調整してください。

 続けて、Canvas Rendererコンポーネントの Cull Transparent Mesh のチェックをオンにしてください。


imgStageInfoゲームオブジェクト インスペクター画像



imgStageInfoゲームオブジェクト Sceneビュー画像



確認


すべて追加後のヒエラルキー画像



すべて追加後のGameビュー画像


 
 以上でステージ情報表示用のUIの追加は終了です。完成したので、StageInfoPlace ゲームオブジェクトのCanvasGroupコンポーネントの Alpha の値を 0 にしてください。
これでゲームクリアになるまでは一時的に見えない状態になります。


StageInfoPlace ゲームオブジェクト インスペクター画像



 なお、この操作を追加後に、画面の中央部分がスワイプできない不具合が発生するようであれば、RaycastTargetが原因であると考えられます。
追加したゲームオブジェクトのTextコンポーネントかImageコンポーネントのRaycastTargetを確認してください。
スイッチがオンのままになっている可能性があります。これをオフにすればスワイプが有効になります。



45.UIManagerスクリプトを修正する

設計


 ステージクリアの表示を行う処理をUIManagerに行わせます。
クリア表示のためのメソッドを用意して、ステージクリアの状態になったときに、BattleManagerクラスからこのメソッド呼び出して、画面にステージクリアと表示する設計します。


UIManagerスクリプトを修正する


 新しく変数を2つ用意し、先ほどCanvasに作成した、ステージの情報表示を行う Text コンポーネントを持つ txtStageInfo ゲームオブジェクトの情報をアサイン出来るようにします。
またCanvasGroupコンポーネントを持つ StageInfoPlace ゲームオブジェクトの情報もアサイン出来るようにします。
これらコンポーネントとスクリプトを紐づけし、コンポーネントの操作をスクリプトから利用出来るようにします。

 新しくDisplayStageClearメソッドを用意し、このメソッドでゲーム画面にステージクリアを表示させます。


UIManager.cs



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


 UIManagerスクリプトの修正が終了したら、UIManagerゲームオブジェクトを選択してインスペクターを確認し、アサイン情報を設定します。
新しく追加した txtStageInfo 変数と canvasGroupStageInfo 変数の情報が表示されています。
先ほどの手順で作成した、同名のゲームオブジェクトをヒエラルキーからドラッグアンドドロップしてアサインしてください。


手順動画
https://gyazo.com/364785a7932dca003fb1b0d209498e49

 
UIManagerゲームオブジェクト インスペクター画像



46.BattleManagerスクリプトを修正する

設計


 ゲームの進行状態をBattleManagerクラスにて管理していますので、敵をすべて破壊してGameStateがResult状態になったときに
UIManagerクラスに用意した DisplayStageClear メソッドを呼び出して、画面にステージクリアを表示します。
また障害物ゲームオブジェクトをすべて破棄する処理も合わせて行います。

 処理の流れとゲームの流れが連動する場所になりますので、記述しながら処理を正確に追えるように読み解いてください。


BattleManagerスクリプトを修正する


 新しい変数を1つ追加して、ゲームに登場している障害物ゲームオブジェクトを登録して管理出来るようにします。

 またCheckRemainingEnemiesメソッドに処理を追加して、すべての敵を倒した状態(GameStateがResult)になったら、
障害物ゲームオブジェクトをすべて破棄するとともに、UIManagerのDisplayStageClearメソッドを呼び出す処理を追記します。


BattleManager.cs

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



BattleManagerゲームオブジェクトを確認する


 BattleManagerスクリプトの修正が終了したら、BattleManagerゲームオブジェクトを選択してインスペクターを確認します。
ObstacleList 変数が追加されていますので、ここにヒエラルキーにある Obstacle_Hole ゲームオブジェクトを登録します。


BattleManagerゲームオブジェクト インスペクター画像



 ObstacleList 変数の Size を、ヒエラルキーにある Obstacle_Hole ゲームオブジェクトの数に指定してください。
Element情報が追加されますので、こちらに Obstacle_Hole ゲームオブジェクトをドラッグアンドドロップしてアサインしてください。

 ゲームクリアの状態になったときに、この ObstacleList 内にある障害物を削除するためです。


手順動画
https://gyazo.com/713758e54d7adbb5f1a4e79b28b02056


BattleManagerゲームオブジェクト アサイン後のインスペクター画像



ゲームを実行して動作を確認する


 ゲームを実行して敵をすべて破壊してみましょう。障害物ゲームオブジェクトが破棄されて、ステージクリアの文字が入った状態でStageInfoが表示されれば成功です。
表示される際には、DoTweenによるアニメーションの演出が入ります。自分で新しい演出に変えてみてもいいでしょう。


実行動画
https://gyazo.com/478ce79c7473fb5122460271021fc70a

 
 以上でこの手順は終了です。

コメントをかく


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

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

Menu



技術/知識(実装例)

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

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

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

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

レースゲーム(抜粋)

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

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

3D脱出ゲーム(抜粋)

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

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

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

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

VideoPlayer イベント連動の実装例

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

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

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

private



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

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