Unityに関連する記事です

1.前提条件


 DoTweenアセットをインストールしてあるプロジェクトであることと、何らかのポップアップ用プレファブを作成してあることが前提として必要になります。

 DoTweenの導入についてはこちらの記事がわかりやすいので参考にしてください。
@loveRice様
[Unity] DOTweenを使ってみよう
https://qiita.com/loveRice/items/d2dcc1cd67ee1a699...

 ポップアップについてはブロック崩しの拡張のゲーム終了処理を追加するで作成したポップアップし、そちらにアタッチされている
QuitCheckPouUpに処理を追加して利用しています。

 他に自作のポップアップがあるようであれば、そちらのポップアップにアタッチされているスクリプトを加筆修正してご利用ください。

2.ポップアップをフェイドイン/フェイドアウトさせて表示する


 動画のように、ポップアップが開く際には徐々に表示させて、またポップアップが閉じる際には徐々に非表示にします。

https://gyazo.com/eef79937b219740f80b57c96dfdfe221

 QuitCheckPouUpスクリプトを修正して処理を実装します。

QuitCheckPouUp.cs

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


 いくつか新しい処理がありますので紹介しておきます。

[RequireComponent(typeof(クラス名/コンポーネント名))]属性

  
 この[RequireComponent(typeof(クラス名/コンポーネント名))]属性は、(引数)で指定したクラスやコンポーネントがゲームオブジェクトにアタッチされていないとエラーが出るようになります。 
またこの属性が定義されているスクリプトをゲームオブジェクトにアタッチすると、引数で指定しているコンポーネントが自動的にアタッチされます。(今回はCanvasGrourp)
 
 今回はCanvasGrourpコンポーネントが必要になりますので、[RequireComponent(typeof(CanvasGroup))]属性を追加して、コンポーネントのアタッチを必須条件にしています。

IEnumerator Start()

 
 Startメソッドは、voidではなく、IEnumerator型の戻り値を宣言できます。これによってStartメソッド内に非同期処理(コルーチン処理)を実装出来るようになります。
今回は以下の2つの待機処理を実装するために、StartメソッドをIEnumerator型で宣言しています。

 yield return new WaitForSeconds(fadeTime);
  yield return new WaitUntil(() => canvasGroup.alpha == 1);

コルーチン処理のメソッド(yield return new WaitForSeconds()、 yield return new WaitUntil())


 どちらもコルーチン内で命令できる待機処理です。yield return をつけて処理を実行します。

,両豺腓楼数でした秒数間だけ、処理を待ちます。ここでは fadeTime を引数に指定していますので、この変数の値だけ処理を待ちます。引数にはfloat型の値のみ入ります。

△両豺腓楼数の条件を満たす(trueになる)まで、処理を待ちます。ここでは canvasGroup.alpha の値が 1 になるまで処理を待ちます。引数の条件はラムダ式で記述し、デリゲートで指定します。



 スクリプトの修正が終了しましたら、ポップアップのプレファブのインスペクターにあるQuitCheckPopUpを確認しましょう。
CanvasGrourpがポップアップにアタッチされていなければAdd ComponentしてCanvasGrourpを追加します。その後、それをインスペクターにてアサインしてください。

FadeTimeはポップアップをフェイドイン/フェイドアウトする際のアニメ時間です。初期値は1ですが、自由に変更してみてください。


 

 設定が終了しましたら、ゲームを実行します。ポップアップがフェイドインして徐々に表示されれば成功です。
またポップアップを閉じる際にもフェイドアウトしながら徐々に非表示なっていくかも確認してください。

3.ポップアップのサイズを変化させて表示する


 動画のようにフェイド処理に加えて、ポップアップのサイズを変化させながら表示するようにしてみましょう。
https://gyazo.com/12c2e38ac8a50409a59b9e74643838db

 QuitCheckPouUpスクリプトを修正して処理を実装します。

QuitCheckPouUp.cs

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


Sequence(シーケンス)


 DoTweenの持つ機能の1つです。Tween処理を順番に処理したい場合、あるいは同時に処理したい場合に利用します。
今回はフェイド処理と一緒にポップアップのサイズを変更を行いたい=同時に処理したいことがあるために利用をしています。

 まずは宣言して初期化を行います。宣言自体は宣言フィールドで行っておいても問題ありませんが、今回はスコープを考えて各メソッド内で初期化しています。変数名も同名にしています。

Sequence sequence = DOTween.Sequence();
 

 次に同時に処理したいTweenを記述します。ここでは最初のフェイドイン処理+ポップアップのサイズを元の大きさに戻す処理を例に挙げます。

 まずは最初に行うTween処理を、sequence.Append()メソッドで引数内に処理を記述します。2の手順のスクリプトで書いたTween処理をそのままこの引数に入れて問題ありません。

 続いてこの最初の処理と同時に行いたいTween処理をsequence.Join()メソッドで引数内に処理を記述します。この引数内にポップアップの大きさを元のサイズに戻す処理を記述します。
引数にはDOScale()メソッドを利用することでサイズを変更します。こちらの第1引数が最終的なサイズ、第2引数が処理にかかる時間です。時間はDOFade()と同じ時間に指定します。

 2つ目の処理には、SetEase()メソッドを追加しています。このEase処理によってアニメする際に補間処理が入りなめらかな処理が実現できます。
こちらの引数にはEaseというDoTweenの用意している補間タイプを1つだけ設定できます。今回はPublicの変数を引数に指定しているのでインスペクターでEaseの設定が可能です。
色々なEaseがありますので、自分の好みかつ、よい雰囲気のEaseを調整して選択しましょう。

sequence.Append(canvasGroup.DOFade(1, fadeTime));
sequence.Join(transform.DOScale(Vector3.one, fadeTime).SetEase(easeType));  
 


 スクリプトを修正すると、インスペクターに2つのアサイン情報が追加されます。
startScaleは最初に小さくしておくためのサイズの値です。サイズは1に向かってアニメするので、0.3や0.5などの数字にしておいて実際の動作をみながら値を調整しましょう。
EaseTypeは先ほど説明しました、DoTweenのTweenの補間処理です。こちらも設定を変えて試してみてください。



 ゲームを実行し、ポップアップを開いてみましょう。フェイドイン処理とサイズ変更処理が一緒に行われるようになれば成功です。

コメントをかく


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

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

Menu



技術/知識(実装例)

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

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

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

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

レースゲーム(抜粋)

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

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

3D脱出ゲーム(抜粋)

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

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

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

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

VideoPlayer イベント連動の実装例

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

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

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

private



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

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