Unityに関連する記事です

 この手順ではゲームクリア時のクリア表示を制御する処理を実装します。


<完成動画>
https://gyazo.com/eb7adfd73c381fef43453ab893a45c8f


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

手順25 ークリア表示の実装ー
43.Canvas内にUI部品を作成するΑ淵リア表示)
44.スクリプトを使って、ゲームクリアの際にクリア表示をする処理と、クリックで最初からリスタートする処理を追加する



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

 ・DOTweenの補間機能と実装例ァ OnCompleteメソッドー



43.Canvas内にUI部品を作成するΑ淵リア表示)

1.設計


 着水した際に、ゲームクリアとわかるように画面にクリアの表示を行います。
クリア時にリザルト(結果)として表示する内容についてはここでは実装していません
それぞれ設計をして考えてみてください。
得点については画面の左上に表示されていますので、こちらをそのまま中央に表示してもよいのですし
他の追加要素を表示するようにしてもよいです。

 クリア表示には、後のリザルト表示を追加してもよいように設計をしていますので
ゲームオブジェクト自体も ResultPopUp という名前で作成していきます。

ヒエラルキー完成図



 今回は、キャラが着水してから、画面にクリアと表示し、合わせてタップをするとゲームをもう一度遊べることを促すテキストを表示します。
画面の中央部分を空けてデザインしているのは、この部分にリザルト表示を追加してもよいためです。

Gameビュー画像



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


 ゲームクリア表示をUIとして作成していきます。
 すでに Canvas ゲームオブジェクトがありますので、こちらをそのまま利用しましょう。

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


ResultPopUp ゲームオブジェクト ヒエラルキー画像



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

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

 問題なければ、インスペクターの一番下にある Add Component ボタンを押して、CanvasGroup コンポーネントを追加してください。
CanvasGroup コンポーネントの設定は変更なしです。


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



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



 以上でこのゲームオブジェクトの製作は完了です。


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


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


btnRetry ゲームオブジェクト ヒエラルキー画像



 btnRetry ゲームオブジェクトはボタンの制御と ResultPopUp 全体の背景色の設定を行うゲームオブジェクトです。


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



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



 Canvas Renderer コンポーネントの Cull Transparent Mesh のチェックをいれておいてください



 最初に btnRetry ゲームオブジェクトの子オブジェクトにある Text ゲームオブジェクトは今回使用しませんので、これを削除します


 続いて、btnRetry ゲームオブジェクトのインスペクターを確認し、Image コンポーネントの Color を (0, 0, 0, 72) で設定します。
色を黒にして、透明度を下げて半透明にする設定です。画像は初期設定のままで問題ありません。
こうすることでゲーム画面全体が、フィルターにかかったように薄暗い表示になりますので、ゲームが動いていない状態であることをユーザーに伝えることが出来ます。


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



 色の設定が終了したら、Raycast Target のスイッチは入れてオンの状態にしておいてください
このチェックが入っていると Button コンポーネントにタップ感知した情報が伝わって OnClick イベントに登録したメソッドが実行されます。



 背景用の色を設定したら、大きさを調整します。
Sceneビューで直接変更してもよいですし、RectTransform コンポーネントの Width、Height の値を変更しても調整できます。
下記のインスペクター画像を参考にして、画面全体を覆うサイズに調整してください。(この画像と同じである必要はありません)
画面の解像度を同じになるようにすればよいでしょう。


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



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



btnRetry ゲームオブジェクト Gameビュー画像



 以上でこのゲームオブジェクトの設定は完了です。


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


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


txtRetry ゲームオブジェクト ヒエラルキー画像



 txtRetry ゲームオブジェクトはゲームのリトライ(再スタート)を促す文字列の表示を行う役割を持つゲームオブジェクトです。


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



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


 
 Canvas Renderer コンポーネントの Cull Transparent Mesh のチェックをいれておいてください



 設定項目は2つあります。

 最初にインスペクターの一番下にある Add Component ボタンを押して、CanvasGroup コンポーネントを追加してください。
CanvasGroup コンポーネントの設定は変更なしです。このコンポーネントにDOTween 機能を利用することで文字列の点滅処理を実装出来ます


 txtRetry ゲームオブジェクトはゲームのリトライを促す役割があります。
ゲーム内で文字列を書き換える必要はありませんので、事前にTextコンポーネント の Text プロパティ欄に文字列を登録しておきます。

 txtRetry ゲームオブジェクトを選択してインスペクターの Text コンポーネントを確認します。
Text プロパティ欄に "Tap to Retry" と入力してください。同じような意味合いの単語、あるいは日本語であっても構いません。
フォントや配置、大きさも自由に設定してください。自分がユーザーだったら、という観点でデザインするといいでしょう。


 文字の設定が終了したら、Raycast Target のスイッチを外してオフにしておいてください


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




 CanvasGroup コンポーネントを追加し、文字列を設定したら、大きさを調整します。
Sceneビューで直接変更してもよいですし、RectTransform コンポーネントの Width、Height の値を変更しても調整できます。
下記のインスペクター画像を参考にして、適宜なサイズに調整してください。(同じである必要はありません)


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



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



txtRetry ゲームオブジェクト Gameビュー画像



  以上でこのゲームオブジェクトの設定は完了です。


5.ResultPopUp ゲームオブジェクトの子オブジェクトとして、imgTitle ゲームオブジェクトを作成して設定を行う


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


imgTitle ゲームオブジェクト ヒエラルキー画像



 imgTitle ゲームオブジェクトは、ゲームクリア表示の背景画像の役割を持つゲームオブジェクトです。


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



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



 Canvas Renderer コンポーネントの Cull Transparent Mesh のチェックをいれておいてください



 それでは画像を設定します。
imgTitle ゲームオブジェクトのインスペクターを確認し、Image コンポーネントの Source Image の部分に画像を設定します。

 アイコン用の画像ですが、インポートしたアセットから選択してもよいですし、画像をダウンロードしてきてインポートして利用しても、どちらでも構いません。
こちらの画像がゲーム画面に適用されます。

 今回はこちらのパスにある画像を利用しています。
Assets/JKT_Art/UI/Arrow/popup_3.png


フォルダ画像



 画像の設定が終了したら、Raycast Target のスイッチを外してオフにしておいてください



 画像を設定したら、大きさを調整します。
Sceneビューで直接変更してもよいですし、RectTransform コンポーネントの Width、Height の値を変更しても調整できます。
下記のインスペクター画像を参考にして、適宜なサイズに調整してください。(同じである必要はありません)


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



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



imgTitle ゲームオブジェクト Gameビュー画像



 以上でこのゲームオブジェクトの設定は完了です。


6.imgTitle ゲームオブジェクトの子オブジェクトとして、imgClear ゲームオブジェクトを作成して設定を行う


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


imgClear ゲームオブジェクト ヒエラルキー画像



 imgTitle ゲームオブジェクトは、ゲームクリア表示の画像の役割を持つゲームオブジェクトです。


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



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



 Canvas Renderer コンポーネントの Cull Transparent Mesh のチェックをいれておいてください



 画像を設定します。
imgClear ゲームオブジェクトのインスペクターを確認し、Image コンポーネントの Source Image の部分に画像を設定します。

 アイコン用の画像ですが、インポートしたアセットから選択してもよいですし、画像をダウンロードしてきてインポートして利用しても、どちらでも構いません。
こちらの画像がゲーム画面に適用されます。

 今回はこちらのパスにある画像を利用しています。
Assets/JKT_Art/UI/FONT/clear_2.png


フォルダ画像



 画像の設定が終了したら、Raycast Target のスイッチを外してオフにしておいてください



 画像を設定したら、大きさを調整します。
Sceneビューで直接変更してもよいですし、RectTransform コンポーネントの Width、Height の値を変更しても調整できます。
下記のインスペクター画像を参考にして、適宜なサイズに調整してください。(同じである必要はありません)


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



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



imgClear ゲームオブジェクト Gameビュー画像



 以上で ResultPopUp 関連のゲームオブジェクトの作成が完成です。最後に、Canvas 内の順番を変更します。


7.Canvas 内の ResultPopUp ゲームオブジェクトの位置を変更する


 ヒエラルキーの情報のうち、Canvas ゲームオブジェクト内の子オブジェクトについては、画面上の表示の優先順位と、ボタンの優先順位が存在しています
そのため、並べる順番を間違えると、表示したい情報が見えなくなってしまったり、ボタンが押せない、という状況が生まれます。

 Canvas 内の優先順位は、同列に並んでいる場合、Canvas からみて遠い(下)になっているゲームオブジェクトほど、優先順位が高くなります
また子オブジェクトは、自分の親オブジェクトよりも優先順位が常に高くなります。


ヒエラルキー画像



 今回の ResultPopUp ゲームオブジェクトも同じです。現在のままの位置ですと、Buttons ゲームオブジェクトよりも優先順位が高くなってしまっているため、
このままではカメラのボタンと姿勢を変更するボタンが押せない状態になっています。変更する前に、ゲームを実行して確認してみましょう。

 確認したら、ResultPopUp ゲームオブジェクトを移動させて、次のヒエラルキー画像の状態にしてください。


変更後のヒエラルキー画像



 変更後、もう一度ゲームを実行して、各ボタンが押せるようになっているか、確認してください。

 これですべての設定が完了です。


44.スクリプトを使って、ゲームクリアの際にリザルトを表示する処理と、クリックで最初からリスタートする処理を追加する

1.設計


 ゲームクリアの表示をタイミングよく表示させたりするには、ResultPopUp ゲームオブジェクトの制御操作が必要になりますので、
新しくスクリプトを作成して、ResultPopUp ゲームオブジェクトにアタッチし、このスクリプトを通じて制御を行っていく設計にします。

 まず、ゲームを開始したら、CanvasGroup コンポーネントの機能を利用して、ResultPopUp 内のゲームオブジェクトを一時的に透明な状態にして非表示にします。
CanvasGroup の Alpha の値を 1 から 0 にすることで、ResultPopUp ゲームオブジェクトと子オブジェクトをまとめて透明にすることが出来ます

 このように制御する部分のイメージが浮かんだら、実際にコンポーネントの値を自分で操作してみてください。今回であれば、CanvasGroup の Alpha の値をいじってみます。
その部分をスクリプトで操作するにはどうすればいいのか、という視点でロジックを考えていくといいでしょう。



 着水したら、ResultPopUp ゲームオブジェクトを表示するように制御するのですが、すべてをそのまま表示してしまうよりは
少しずつ演出を含めて表示させた方が見栄えもよく、ゴール地点である水面についたぞ、というユーザーの気持ちが反映した作りになります。

 そこで今回も、DOTweenの機能を利用して、以下のアニメ演出を行います。

 1.ゲームの実行時に ResultPopUp ゲームオブジェクト群を非表示にする  => DOFade メソッドを利用する
 2.ゲームクリアの表示を一瞬だけ大きくする               => Sequence機能のAppendメソッドを利用して DOScale メソッドを実行する
 3.ボタンが有効になってから、画面にも Tap To Retry の文字を表示する  => OnComplete メソッドを利用する
 4.文字は点滅して、ユーザーに Tap を促すようにする          => DOFade メソッドを利用する
 5.btnRetry ゲームオブジェクトが画面全体を覆っているので、どこをタップ(クリック)しても、ゲームが再スタートする
    => 画面が徐々に明るくなって、それからゲームが再スタートする   =>  コルーチン処理と DOFade メソッドを利用する 


<1.ゲームの実行時に ResultPopUp ゲームオブジェクト群を非表示にする>
https://gyazo.com/8e5349ab25a5bf8a9af552b9466e1167


<2.ゲームクリアの表示を一瞬だけ大きくする>
https://gyazo.com/f69f5cd928542d85df795f03b2471ca0


<3.ボタンが有効になってから、画面にも Tap To Retry の文字を表示する(Button コンポーネントの Interactable のチェックが入ってから文字が表示される)>
https://gyazo.com/da8c17c88352f6c3d491c13059231221


<4.文字は点滅して、ユーザーに Tap を促すようにする>
https://gyazo.com/52e7f5755e3418618179732ce1803cc3


<5.画面のどこをタップしても徐々に画面が明るくなってゲームが再スタートする>
https://gyazo.com/2b3b2216075583d898d264f634fe28b2


 まだ学習していない処理は OnComplete メソッドだけです。つまり、設計ロジックを考えれば、すでに学習している内容のみで実装が可能です。
どのような制御を行えばこれらを実装することができるのか、まずは日本語で書き出してみて、その後、ロジックを考えてみてください。
 

2.ResultPopUp スクリプトを作成する


 上記の設計をよく考えてみてから、こちらの処理を記述してみてください。
どんなロジックで、どんな変数が必要で、どのような処理になっているのかを読み解きながら書いてみましょう。


 ResultPopUp ゲームオブジェクトのメインとなる演出の制御は、DisplayResult メソッド内にすべて記述しています。
こちらのメソッドは public 修飾子で宣言しているメソッドになりますので、いずれかのスクリプトから、このメソッドを呼び出すことにより、
用意している演出の処理を実行することが出来ます。


 また btnRetry ゲームオブジェクトは画面全体を覆うフィルターになっていますが、同時にボタンです。
つまり、画面のどの部分をタップしてもボタンとしての機能を利用することができる設計になっています
この機能を阻害しないように、他のゲームオブジェクトの Raycast Target のスイッチをオフに設定しています

 ボタンを押した際に呼び出されるメソッドは OnClickRetry メソッドです。こちらのメソッド内で次のコルーチンメソッドを呼び出し、
画面が明るくなるのを待ってから、ゲームが再スタートするロジックになっています。


ResultPopUp.cs

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



 ResultPopUp スクリプトが完成したら、ResultPopUp ゲームオブジェクトにアタッチします。
SerializeField属性で宣言してある変数が4つありますので、それらを順番にアサインして値を代入します。


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



3.<DOTweenの補間機能と実装例ァ OnCompleteメソッドー>


 OnCompleteメソッドも SetLoops メソッドや SetEase メソッドと同じように、メインとなる他のDOTweenメソッドに付随する処理です。

 この処理はコールバック処理になっており、一緒に処理しているメインのメソッドの処理の終了を待ちます。
その処理が終了してから、このOnCompleteメソッドの中に記述した処理を実行してくれます。

 今回は DOFade メソッドによって CanvasGroup コンポーネントの Alpha の値が 1.0f に変更された後に、この OnCompleteメソッドの処理が実行されるようになっています。
OnComplete メソッドにはボタンを活性化する処理と、文字列を点滅させる処理が記述されていますので、これらの処理は、DOFade メソッドの処理が終わるのを待った後に自動的に実行されます。

  // CanvasGroup のアルファを変更してリザルト表示。OnComplete メソッドを利用すると、DOFadeメソッドの処理を終わった後に登録してある処理を自動的に実行してくれる
  canvasGroupPopUp.DOFade(1.0f, 1.0f)
   .OnComplete(() =>
      { 
          // ボタンを活性化して押せるようにする
     btnRetry.interactable = true;

          // リトライの文字を点滅
          canvasGroupTxt.DOFade(1.0f, 1.0f).SetEase(Ease.Linear).SetLoops(-1, LoopType.Yoyo);
      });


 1行でも書くことは出来ますが読みにくく長くなってしまうため、可読性を高めるためにも複数行に渡って処理を書いています。
こういった配慮もスクリプトを記述する際には必要ですので、可読性の高い処理を書けるように心がけてください。


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


 ResultPopUp スクリプトが完成したら、ResultPopUp ゲームオブジェクトにアタッチします。
SerializeField属性で宣言してある変数が4つありますので、それらを順番にアサインして値を代入します。
変数名と同名のゲームオブジェクトや、それに近い名称のゲームオブジェクトにしておくことで、これらのアサイン時に分かりやすくなります。

 操作する型を参考に、アサインをしてみましょう。すべて ResultPopUp ゲームオブジェクト関連のゲームオブジェクトになります。


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



5.GameManager スクリプトを修正して、ResultPopUp ゲームオブジェクトを制御する処理を追加する


 ResultPopUp ゲームオブジェクトは、ResultPopUp スクリプトのStart メソッド内の制御によって、ゲームを実行すると自動的に非表示になります。
ResultPopUp ゲームオブジェクトを再度表示し、かつ、設定してある所定の演出はすべて、ResultPopUp スクリプト内の DisplayResult メソッドにまとめてあります。

 そのため、次に必要な制御は、ResultPopUp スクリプトに用意してある、DisplayResult メソッドを呼び出す処理を、どこに追加するか、ということになります。

 この処理を GameManager スクリプト(自作したスクリプト)の適宜な場所で呼び出してみてください。メソッドを呼び出すためには ResultPopUp スクリプトへの参照が必要になります。
以前に実装している、CameraController スクリプトの制御処理を参考にしてみましょう。処理を呼び出すことが出来れば、あとは ResultPopUp スクリプトが
書いてある処理を実行してくれますので、ゲームクリアの表示や、文字列の点滅などの処理が実行されることになります。


GameManager.cs(自分で作成しているスクリプトがある場合には、そのスクリプトを修正する)

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



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


 すべての処理を実装しましたので、ゲームを実行してみましょう。
着水と同時に、ゲームクリアの表示が演出されて実行されれば制御成功です。
また画面全体がボタンになっていますので、どの部分をタップ、あるいはクリックしてもゲームが再度最初からスタートするようになります。


<実行動画 ゲームクリアの演出、文字列が点滅>
https://gyazo.com/eb7adfd73c381fef43453ab893a45c8f


<実行動画 タップしたらゲームが再スタートする>
https://gyazo.com/2b3b2216075583d898d264f634fe28b2


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

 => 次は 手順26 ーBGMの制御処理の実装ー です。

コメントをかく


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

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

Menu



技術/知識(実装例)

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

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

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

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

レースゲーム(抜粋)

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

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

3D脱出ゲーム(抜粋)

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

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

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

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

VideoPlayer イベント連動の実装例

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

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

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

private



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

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