Unityに関連する記事です

 ゲームをクリアした際の演出を2回に分けて実装を行います。
この手順ではゲームクリアの表示の各ロゴ画像部分にアニメ演出を行います。

<実装動画>
動画ファイルへのリンク


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

発展30 −ゲームクリア演出の追加◆
59.UIManager スクリプトを修正し、ゲームクリアのロゴのアニメ演出を追加する
60.UIManager スクリプトを修正し、追加のゲームクリアのロゴのアニメ演出と、リスタートのロゴのループアニメ演出を追加する



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

 ・DOTweenの補間機能と実装例─ DOPunchScale メソッドー
 ・DOTweenの補間機能と実装例 ーDOShakeScale メソッドー
 ・Block Raycast プロパティ



59.UIManager スクリプトを修正し、ゲームクリアのロゴとタップスタートのロゴにそれぞれアニメ演出を追加する

1.設計


 この手順ではゲームクリア時のアニメ演出について実装しています。
これは一例なので、他にも考えたアイディアがあれば、そちらのロジックを実装してみてください。

 ゲームクリアのロゴ画像と、リスタートのロゴ画像について、アニメ演出の設計を行います
どちらも DOTween の機能を利用して実装を検討します。

 ゲームクリア関連のゲームオブジェクトは GameClearSet ゲームオブジェクトにまとめてあります。
またこれを表示/非表示の切り替えを行っているスクリプトがありますので、そちらを修正することで処理を実装します。

 アイディアとしては次のような内容になります。

<ゲームクリア時のアニメ演出>
 1.GameClearSet ゲームオブジェクトの表示が終了したら
 2.ゲームクリアのロゴ画像を伸縮(拡大・縮小)させる
 3.【2】の状態が終了したら、ゲームクリアのロゴ画像をポヨンと揺らす
 4.【2】の状態が終了したら、リスタートのロゴ画像を表示と非表示をループさせることにより点滅アニメ演出をさせて、タップを促すようにする

 DOTween では、「この動作が終了したら」という、DOTween の処理が完了するのを待ってから、次の処理を実行するためのメソッドが用意されています。
発展10でボスの移動の挙動を設定した際に利用した OnComplete メソッドです。こちらを上手く活用することがポイントになります。

 まずは【1】と【2】の処理をつなげて処理が実装できるようにロジックを考えましょう。
【1】の状態になるのを待たずに【2】の処理を開始してしまうと、ロゴの画像が完全に表示されていない状態で
ゲームクリアのロゴ画像がアニメ演出をしてしまうためです。

 ゲームオブジェクトの伸縮については、DOScale メソッドを利用して拡大する処理と縮小する処理を用意し、それを何回かループしてもよいですし、
DOPunchScale メソッドを利用してもいいと思います。


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


 先ほどもありましたが、発展10の実装例を参考にして、OnComplete メソッドを活用してみましょう。
新しく操作を行いたいコンポーネントがある場合には、SerializeField 属性つきでで変数を宣言して、インスペクターより事前にアサインしておくと
スクリプト内で GetComponent メソッドを実行せずに済みます。そういった設計も一緒に考えてみてください。


UIManager.cs

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


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



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


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



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


 新しく実装を行った DOTween の機能について説明します。

  // ゲームクリアの画像を DOPunchScale メソッドで伸縮させる
  imgGameClear.transform.DOPunchScale(Vector3.one * 2.5f, 0.5f);

 DOPunchScale メソッドは、他の移動系の DOTween のメソッドと同じで、制御したいゲームオブジェクトの Transform コンポーネントに対して命令を出すメソッドです。
Transform コンポーネント、あるいは RectTransform コンポーネントの Scale の値に対して補間処理を行って、アニメしているように演出してくれる機能です。

 Scale の値を、現在値から第1引数で指定した値の範囲内で、第2引数に指定した時間をかけて伸縮させます。
第1引数は Vector3 型を指定します。これが Scale の伸縮する最大値になります。つまり、この幅の中でランダムな大きさにサイズを変更する処理になります。

 第2引数は 0.5f ですので、0.5秒の間、指定したゲームオブジェクトの Scale を 現在値(1.0) 〜 2.5倍 の間で伸縮させてから、
最初の Scale (1.0f)に戻します。


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


 UIManager ゲームオブジェクトのインスペクターの UIManager スクリプトに SerializeField 属性で宣言している変数が追加されていますので、適切な情報をアサインして登録します。


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



 以上で設定は完了です。




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


 スクリプトの見直しをして、制御する内容を確認してから、ゲームを実行して動作を検証します。

 ゲームクリア時に、ゲームクリアのロゴ画像が伸縮アニメする演出が実行されれば制御成功です。


<実装動画>
動画ファイルへのリンク


 続いて残っている処理の実装を行います。


60.UIManager スクリプトを修正し、追加のゲームクリアのロゴのアニメ演出と、リスタートのロゴのループアニメ演出を追加する

1.設計


 引き続き、ゲームクリア時のアニメ演出について設計を実装を行っていきます。
現在残っている内容を確認します。

<ゲームクリア時のアニメ演出>
〇1.GameClearSet ゲームオブジェクトの表示が終了したら
〇2.ゲームクリアのロゴ画像を伸縮(拡大・縮小)させる
 3.【2】の状態が終了したら、ゲームクリアのロゴ画像をポヨンと揺らしながら、ロゴ画像のサイズを 1.5 倍にする
 4.【2】の状態が終了したら、リスタートのロゴ画像を表示と非表示をループさせることにより点滅アニメ演出をさせて、タップを促すようにする

 【3】【4】がまだ実装されていませんので、こちらの設計を行います。
両方を一度に実装する必要はありませんので、順番にロジックを考えてみてください。



 【3】の処理ですが、【2】の状態が終了したら、という条件については、【2】の処理と同じように OnComplete メソッドを活用することで実装をすることが出来ます。
OnComplete メソッド内で開始された処理についても、その処理の中でさらに OnComplete メソッドを実行することが可能です。

 ロゴのアニメ演出ですが、軽めに揺らす方法として、DOShakeScale というメソッドがあります。
こちらを活用してみてください。

 揺らしながらサイズを大きくする、という部分の処理については、そのままサイズを変更する処理を追加すれば、前の処理を待たずに実行します。



 【4】の処理も【3】と同じように、【2】の処理が終了したら、という条件ですので、
【3】の処理と同じように実装しましょう。OnComplete メソッド内には複数の処理を実行できますので、
【3】の処理のあとに【4】の処理を実行するようにすることができれば処理の順番は問題ありません

 リスタートのロゴ画像の表示と非表示を繰り返しループ処理をするためには、
Canvas Group コンポーネントに対して実行できる DOFade メソッドをメインの処理とし、
それに付随する処理として SetLoops メソッドを実行すれば点滅させる処理が実装可能です。
同じスピードで点滅を繰り返したい場合には、SetEase メソッドも一緒に実装するとよいでしょう。

 こちらの処理は発展9の記事を復習してみてください。ループの処理の実装例があります。

 現在、リスタートのロゴ画像には Canvas Group コンポーネントはアタッチされていますが、
Alpha の値は 1 のままです。この値をスタートの値にするのであれば、DOFade メソッドの目標値は 0 になりますし、
逆に、Alpha を 0 に設定してスタートの値にするのであれば、DOFade メソッドの目標値は 1 になります。
DOFade メソッドの第1引数は目標値を設定することになっていますので、注意してください。

 自分の考えているロジックになった設計と処理の内容で実装を行ってください


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


 設計に基づいて、ロジックを考えて実装を行ってみましょう。
変数の宣言や考え方についても、前回の実装と同じように考えてください。

 今回はアニメ演出に合わせて、GameClearSet ゲームオブジェクトの Canvas Group コンポーネントの Block Raycast の制御も行っています。
こちらについては、後程、リスタートの処理を実装する際に活用する機能になります。


UIManager.cs

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


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



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


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



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


 新しく実装を行った DOTween の機能について説明します。

  // ゲームクリアの画像を DOShakeScale メソッドで揺らす
  imgGameClear.transform.DOShakeScale(0.5f);

 DOShakeScale メソッドも、他の移動系の DOTween のメソッドと同じで、制御したいゲームオブジェクトの Transform コンポーネントに対して命令を出すメソッドです。
Transform コンポーネント、あるいは RectTransform コンポーネントの Scale の値に対して補間処理を行って、アニメしているように演出してくれる機能です。

 この処理も前回実装した DOPunchScale メソッドと同じように、指定した値内をランダムに変化させる処理ですが、DOPunchScale メソッドよりも
よりランダムな変化を行う処理になっています。

 指定したゲームオブジェクトの Scale を第1引数に指定した時間をかけてランダムに伸縮させます。


参考サイト
Qiita Kagigi 様
DOTweenをふわっとまとめてみた
https://qiita.com/kagigi/items/bdf4d42835add07b007...


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


 UIManager ゲームオブジェクトのインスペクターの UIManager スクリプトに SerializeField 属性で宣言している変数が追加されていますので、適切な情報をアサインして登録します。


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



 以上で設定は完了です。


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


 2つの手順に分けて制御内容を確認します。

 最初に GameClearSet ゲームオブジェクト インスペクターを確認してください。
Canvas Group コンポーネントの Block Raycast のスイッチがオフになっています。
こちらが、ゲームクリアの処理の最後にオンになるように処理を追加してありますので、
ゲームクリアの状態になったときに制御されているかどうかの確認を行います。

 また、ゲームクリアのロゴの画像も、さきほどのアニメ演出に加えて、最後にポヨンとしたアニメの動作を行い、
サイズが 1.5倍 になって終了します。この部分の違いも一緒に確認してください。


<ゲーム実行時 GameClearSet ゲームオブジェクト インスペクター画像(Canvas Group コンポーネントの Block Raycast がオフ(false)になっている)>



<実装動画>
動画ファイルへのリンク


<ゲームクリア時 GameClearSet ゲームオブジェクト インスペクター画像(Canvas Group コンポーネントの Block Raycast がオン(true)になっている)>




 次に、GameClearSet ゲームオブジェクトの 孫オブジェクトである imgRestart ゲームオブジェクトのインスペクターを確認し、
Canvas Group コンポーネントの Alpha の値を 0 に設定します。これでゲームクリア時に、制御の順番通りに、リスタートのロゴ画像が点滅するようになるか、確認を行います。
(この手順は、DOFade メソッドの第1引数を 1 に設定している場合です。0 に設定している場合には変更しないでください)


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



<実装動画>
動画ファイルへのリンク


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

 次は 発展31 −ゲームスタート演出の追加− です。

コメントをかく


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

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

Menu



プログラムの基礎学習

コード練習

技術/知識(実装例)

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

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

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

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

レースゲーム(抜粋)

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

3D脱出ゲーム(抜粋)

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

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

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

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

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

VideoPlayer イベント連動の実装例

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

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

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

private



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

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