Unityに関連する記事です

 ゲームオーバー用のゲームオブジェクト群を作成し、拠点の耐久力が 0 以下になったときに表示する制御を実装します。


<実装動画 .押璽爐鮗孫圓垢襪 GameOverSet ゲームオブジェクトが透明になって見えなくなる>
動画ファイルへのリンク


<実装動画◆ゝ鯏世梁儺徇呂 0 以下になる GameOverSet ゲームオブジェクトが透明ではなくなり見えるようになり、Game Overの文字が1文字ずつ表示される>
動画ファイルへのリンク


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

手順27 −ゲームオーバー表示の作成と実装−
57.Canvas内に ゲームオーバー表示を行う GameOverSet ゲームオブジェクト群を作成する
58.UIManager スクリプト、GameManager スクリプト、 DefenseBase スクリプトを修正し、ゲームオーバー表示の制御処理を追加する



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

 ・DOTweenの補間機能と実装例ぁ DOText メソッド−



57.Canvas内に ゲームオーバー表示を行う GameOverSet ゲームオブジェクト群を作成する

1.設計


 この手順では、Canvas ゲームオブジェクト内にゲームオーバーを表示する情報として、ゲームオーバー表示用のゲームオブジェクト群を製作していきます。
このゲームオブジェクトもゲーム画面に映る必要のあるゲームオブジェクトですので、 Canvas ゲームオブジェクトの子オブジェクトとしてゲームオブジェクトを作成していきます。

 ゲームクリア関連のゲームオブジェクトを管理するためのフォルダ役の GameOverSet ゲームオブジェクトを作成し、その子オブジェクトとして各画像の表示設定するゲームオブジェクト群を順番に作成します。


<完成時のヒエラルキー画像>



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


 製作作業を行う前に、環境を整えてから作業を行いましょう。
GameClearSet ゲームオブジェクトが表示されている状態のままですと、製作するゲームオブジェクトと重なって表示されてしまって作業が困難ですので、
一時的に、GameClearSet ゲームオブジェクトを非表示にしてから作業を開始します。
このゲームオブジェクトを非表示にすれば、その子オブジェクトもすべて非表示になります。
このような構造にしておくと管理だけではなく、こういった切り替えの際にも便利な仕組みになっています。

 今後も特に注意書きがなくても、自分が作業を行いやすい環境を作ってから作業を行うようにしてください。



 Canvas ゲームオブジェクトの上で右クリックをしてメニューを開き、Create Empty を選択します。
新しく空のゲームオブジェクトが作成されますので、名前を GameOverSet に変更します。

GameOverSet ゲームオブジェクトは、ゲームオーバー表示に関連するゲームオブジェクト群をまとめておくための、フォルダ役のゲームオブジェクトです。


ヒエラルキー画像



 GameOverSet ゲームオブジェクトを選択して、RectTransform コンポーネントがアタッチされているか確認します。
Canvas ゲームオブジェクトに含まれるオブジェクトは Transform コンポーネントではなく、RectTransform コンポーネントによって位置情報を管理しています。
もしも通常の Transform コンポーネントがアタッチされている場合には、再度作り直してください。


インスペクター画像



Sceneビュー画像



 続いてこのゲームオブジェクトの設定を行います。



 GameOverSet ゲームオブジェクトを選択してインスペクターの一番下にある Add Component ボタンを押して、Canvas Group コンポーネントを追加します。
Block Raycast のチェックを外しておいてください


インスペクター画像



 以上で設定は完了です。


3.GameOverSet ゲームオブジェクトの子オブジェクトとして、btnRestartFilter ゲームオブジェクトを作成して設定を行う


 GameOverSet ゲームオブジェクトの子オブジェクトとして、合計2つのゲームオブジェクトを作成していきます。

 GameOverSet ゲームオブジェクトの上で右クリックをしてメニューを開き、UI => Button を選択します。
Image コンポーネントと Button コンポーネントがアタッチされたゲームオブジェクトが新しく作成されますので、名前を btnRestartFilter に変更します。


ヒエラルキー画像



 btnRestartFilter ゲームオブジェクトはゲーム画面全体を覆って、どの部分をタップしても機能するボタンの役割を持つゲームオブジェクトです。
また色を変更することによって、画面全体を薄暗い状態にしてゲームオーバーになっていることをユーザーに伝えるようにします。
ボタンの機能については先の手順で実装しますので、現在はそのような役割のゲームオブジェクトがある、ということを覚えておいてください。


インスペクター画像



Sceneビュー画像



 続いて、btnRestartFilter ゲームオブジェクトの設定を行います。3つの手順がありますので、順番に設定していきます。



 まずは最初に、サイズを画面一杯、あるいは少し大きめに設定してください。
そのようにしておくことで、画面全体がボタンとして機能するようになります。
Width と Height の値は Canvas ゲームオブジェクトの Canvas Scaler に設定した値と同じにすることで Canvas と同じサイズになります。
Width などの値を変更してもよいですし、Sceneビューで操作しても構いません。

 2つめは Image コンポーネントの Color のプロパティを選択し、色を黒(0, 0, 0)、Alpha の値を 100 - 105 前後に変更してください。
これでゲームオブジェクトが黒く半透明な状態になります。画像の設定は不要です

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


インスペクター画像



 Button コンポーネントについては変更はありませんので、初期状態のままで問題ありません。


インスペクター画像



Sceneビュー画像



 以上で設定は完了です。


4.GameOverSet ゲームオブジェクトの子オブジェクトとして、txtGameOver ゲームオブジェクトを作成して設定を行う


 GameOverSet ゲームオブジェクトの上で右クリックをしてメニューを開き、UI => Text を選択します。
Text コンポーネントがアタッチされたゲームオブジェクトが新しく作成されますので、名前を txtGameOver に変更します。


ヒエラルキー画像



 txtGameOver ゲームオブジェクトはゲームオーバーの文字列の表示を行うゲームオブジェクトです。
手法としては、 "Game Over" という文字列を Text コンポーネントを利用して画面に表示します。


インスペクター画像



Sceneビュー画像



 続いて、txtGameOver ゲームオブジェクトの設定を行います。3つの手順がありますので、順番に設定していきます。



  Text コンポーネントの Text プロパティ欄に文字列で "Game Over" と入力してください。
この部分は後にスクリプトから制御を行いますので、ここでは事前にチェックのために入力し、どのように見えるかを確認しておく作業です。

 文字のサイズやフォントは任意です。サイズは 130 - 150 前後にすると見やすくちょうどよいサイズ感になります。
文字は位置は中央寄せ・中央位置で設定してください。SceneビューとGameビューを見ながら調整をしてください。

 その後、Raycast Target のスイッチを外してオフの状態にしてください。



 続いて、画像の位置とサイズを変更します。これについては任意です。
自分がユーザーの立場になってみて、見やすい位置とサイズに設定してください。
他に表示するゲームオブジェクトはありませんので、画面の中央に設置しても問題ありません。

 最後に前のゲームオブジェクトと同じように Canvas Renderer コンポーネントの、Cull Transparent Mesh のスイッチをオンしてください。


インスペクター画像



インスペクター画像



Sceneビュー画像



Gameビュー画像



 以上で設定は完了です。
Text コンポーネントの Text プロパティに入力した文字列は削除してください
この部分はスクリプトから制御を行って文字列を表示します。そのため予め文字が入力されていると正常に動作しなくなります


 なお、文字装飾については自由に行ってください。
Outline コンポーネントや Shadow コンポーネントが利用できます。




 以上で GameOverSet ゲームオブジェクトは完成です。

 非表示になっている GameClearSet ゲームオブジェクトを表示して、以前の状態に戻しておいてください。


58.58.UIManager スクリプト、GameManager スクリプト、 DefenseBase スクリプトを修正し、ゲームオーバー表示の制御処理を追加する

1.設計


 こちらの設計方法は、前回の GameClearSet とロジックとまったく同じです。
今回もゴールとなる処理を決定してから実装を行っていきます。

 実装したい内容としては、GameOverSet ゲームオブジェクトを見えない状態にしておいて、
拠点の耐久力が 0 以下になった際に GameOverSet ゲームオブジェクトが見える状態になって、ゲームオーバーをユーザーに通知する、という一連の処理の流れです。

 前回作成してある UIManager スクリプトに、ゲームオーバーの表示の制御を行う処理を用意し、
そちらに命令を出すことによって、ゲーム画面にゲームオーバーの表示を行う設計にして考えていきます。

 一連の流れをロジックにしてみます。

<ロジックの流れ>
 △1.GameManager スクリプトから UIManager スクリプトに命令を出して、GameOverSet ゲームオブジェクトを見えない状態にする
 〇2.拠点の耐久力が 0 以下になったら、DefenseBase スクリプトから GameManager スクリプトに命令を出して、ゲーム終了の状態に切り替える
 △3.拠点の耐久力が 0 以下になったら、DefenseBase スクリプトから GameManager スクリプトに命令を出して、ゲームオーバーの準備を行わせる
 △4.GameManager スクリプトから UIManager スクリプトに命令を出して、GameOverSet ゲームオブジェクトを見える状態にする

 いかがでしょうか。
前回の実装と呼び出すメソッドや、EnemyGenerator スクリプトではなく DefenseBase スクリプトに変わっている部分はありますが
処理のロジック自体は全く同じであることが分かります。

 〇の部分は実装済です。残りの3つ△の部分を実装していきます。

 また処理の実装の順番も考えてみましょう。

<処理の実装順番>
 1.UIManager スクリプトを修正して、GameManager スクリプトから実行するメソッドを作成する
 2.GameManager スクリプトを修正して、△1と△4の処理を追加する。UIManager スクリプトにはメソッドが用意してあるので処理が記述できる
 3.GameManager スクリプトを修正して、△3のための処理を追加する。
 4.DefenseBase スクリプトを修正して、△3の処理を追加する。GameManager スクリプトにはメソッドが用意してあるので処理が記述できる

 このような順番での実装になります。

 前回の手順でもお伝えしましたが、大切なことは、ロジックで考えた順番と実装の順番が同じになる必要はない、ということです。
処理の結果としてロジック通りに動けば問題がない訳ですから、必ずしも、実装する順番をロジックに合わせる必要はありません

 いままで実装してきた処理も見直しつつ、このことを念頭において、処理を作っていきましょう。


2.UIManager ゲームオブジェクトを修正する


 設計の処理の順番を確認しながら、このスクリプトに用意するべき情報や処理を考えて実装していきましょう。

  △1.GameManager スクリプトから UIManager スクリプトに命令を出して、GameOverSet ゲームオブジェクトを見えない状態にする
 △4.GameManager スクリプトから UIManager スクリプトに命令を出して、GameOverSet ゲームオブジェクトを見える状態にする

 このスクリプトには、2つの制御処理が必要になります。これらの処理はどちらも外部のスクリプト(GameManager スクリプト)より実行される命令になりますので、
public 修飾子を持つメソッドを2つ用意して、それぞれの処理の中に、GameOverSet ゲームオブジェクトの状態を制御する処理を記述します。

 GameOverSet ゲームオブジェクトには CanvasGroup コンポーネントがアタッチされていますので
この情報を利用できる状態にし、CanvasGroup コンポーネントの持つ機能を利用して、Alpha の値を操作する処理をそれぞれ記述するとよいでしょう。

 △1の見えない状態にする処理はゲーム実行と同時に呼び出される処理になりますので、すぐに Alpha の値を 0 に操作した方がよいですが、
△4の見える状態にする処理はすぐに Alpha の値を 1 にしてもよいですし、DOTween の機能を利用して徐々に Alpha の値を 0 => 1 に移動させてもよいです。
その場合は徐々にゲームオーバーの表示が見えてくるようになる処理が実装出来ます。

 また今回の場合には、Text コンポーネントに Game Over という文字列を表示する処理も必要になります。
そのため、GameOverSet ゲームオブジェクトの txtGameOver ゲームオブジェクトの Text コンポーネントの情報を変数に取得しておく必要があります。

 文字の表示ですが、そのまま表示してもよいですが、DOTween の機能を利用して、Game Over の文字を1文字ずつ表示する処理を実装してみましょう。


UIManager.cs

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


 スクリプトを作成したらセーブします。
UIManager ゲームオブジェクトのインスペクターを確認し、新しく SerializeField 属性で宣言した変数が表示されているか確認しておきます。


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



3.<DOTweenの補間機能と実装例ぁ DOText メソッド、SetEase メソッド−>


 新しいDOTweenの処理を実装していますので、各メソッドの説明をします。


1.メソッド・チェーンによる記述

 // DOTween の DOText メソッドを利用して文字列を1文字ずつ順番に表示
  txtGameOver.DOText(txt, 1.5f).SetEase(Ease.Linear);

 この処理は、複数のメソッドをつなげて1行で記述している処理になります。
ピリオドの位置までが1つの処理になっており、合計で2つの DOTween のメソッドが実行されています

 このようにピリオドを利用して、前のメソッドの処理に続けて次のメソッドの処理を書くと、前のメソッドの処理を受けて次のメソッドの処理が実行されます。
この記述方法をメソッド・チェーンといいます。

 今回の場合、Text コンポーネントに対して DOText メソッドが最初に実行されて、その処理結果を利用して、次の SetEase メソッドが実行されます。

 プログラムは上から下に実行されていきますが、1行に書かれた処理の場合は、手前(左側)より、ピリオド単位で区切って実行されることになります。
しっかりと処理の順番を追えるように、読み解いてみましょう。


2.DOText メソッド

 DOText メソッドは Text コンポーネントで実装が可能な機能です。

  // DOTween の DOText メソッドを利用して文字列を1文字ずつ順番に表示
  txtGameOver.DOText(txt, 1.5f);

 処理の記述内容としては第1引数に対象となる文字列、第2引数に、その対象の文字列をすべて表示するまでにかける時間と、書式は同じです。
第1引数は string 型、第2引数は float 型での指定になります。
このとき、第1引数に設定できる情報が画面に1文字ずつ表示させたい文字列の値になります。
 
 DOText メソッドを利用すると、第1引数の文字列を1文字ずつ順番に、第2引数で指定した時間をかけて文字列全文を表示させる処理を行います。
そのため、このメソッドによって、Game Over という文字列が1文字ずつカタカタと表示する演出を作成することが出来ます。


3.SetEase(EaseType easeType)

 SetEase メソッドは他の DOTween のメソッドに付随する処理です。このように DOTween でも、C# の他の書式と同じようにメソッド同士を1つの処理の塊として続けて処理を行うことができます。
処理を続ける場合には、前のメソッドの後にピリオド(ドット)を書くことで、次のメソッドを書くことが可能です。(最初に説明した、メソッド・チェーンの記述方法です)

 // DOTween の DOText メソッドを利用して文字列を1文字ずつ順番に表示
  txtGameOver.DOText(txt, 1.5f).SetEase(Ease.Linear);


 SetEase メソッドを利用すると Ease というアニメーションさせる際のパターンを変更することができます。Ease は enum で設定されており、Ease.タイプ の書式で記述します
非常に多くの種類があります。今回は Ease.Linear を使用しています。

 今回は、DOText メソッドが実行されて文字列が1文字ずつ表示されていく処理を実行している部分に、この SetEase メソッドが実行されますので
表示される文字列に対して、どのようなタイプのアニメーションのパターンを設定して表示を行わせるかを指定しています
文字列に Ease.Linear を指定している場合、文字列内の文字1つ辺りの表示時間が平均化されて表示されるようになります。

 例えば、Game Over と表示し、表示に 1.5 秒かけて表示させる場合には、
1.5秒 内で、Game Over という文字列を表示する時間が平均化されて、1文字辺りの表示時間がすべて一定時間に統一されます。


4.UIManager ゲームオブジェクトの設定を行う


 UIManager ゲームオブジェクトのインスペクターを確認すると、UIManager スクリプトに canvasGroupGameOver 変数と txtGameOver 変数が表示されていますので、
こちらに対象となるコンポーネントがアタッチされているゲームオブジェクトをドラッグアンドドロップしてアサインしてください。


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



 以上で設定は完了です。


5.GameManager スクリプトを修正し、UIManager スクリプトに用意したゲームオーバー表示の制御を実行する処理を追加する


 設計のロジックに基づいて、△1と△4の処理を記述するためにはどのような処理をどの部分に記述すればよいか、
また宣言する変数は必要かどうか、処理の前後を考えてスクリプトを書いてみてください。


GameManager.cs

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


 スクリプトを修正したらセーブします。


6.DefenseBase スクリプトを修正し、GameManager スクリプトのゲームオーバーの準備の処理を実行する処理を追加する


 設計に基づいて、△3の処理を記述していきます。〇2の処理は実装済ですので問題ありません。
前の手順で、GameManager スクリプト側に DefenseBase スクリプト側から呼び出すメソッドの準備が完了していますので、適切だと思われる部分に処理を実装しましょう。
前回の EnemyGenerator スクリプトの処理を参考にしてみてください。


DefenseBase.cs

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


 スクリプトを修正したらセーブします。


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


 すべての処理が実装できましたので、ゲームを実行して制御ができているか確認しておきます。
ゲームを実行すると、GameOverSet ゲームオブジェクトが見えない状態になれば制御成功です。


<実行動画 .押璽爐鮗孫圓垢襪 GameOverSet ゲームオブジェクトが透明になって見えなくなる>
動画ファイルへのリンク


 つづけて拠点の耐久力を 0 以下にしてみましょう。
GameOverSet ゲームオブジェクトが見える状態になり、Game Over の文字列が1文字ずつ順番に表示されれば、こちらも制御成功です。


<実装動画◆ゝ鯏世梁儺徇呂 0 以下になる GameOverSet ゲームオブジェクトが透明ではなくなり見えるようになり、Game Overの文字が1文字ずつ表示される>
動画ファイルへのリンク


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

 次は 手順28 −実装全体の振り返り− です。

コメントをかく


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

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

Menu



プログラムの基礎学習

コード練習

技術/知識(実装例)

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

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

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

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

レースゲーム(抜粋)

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

3D脱出ゲーム(抜粋)

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

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

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

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

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

VideoPlayer イベント連動の実装例

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

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

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

private



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

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