CGBoxの一部の記事にはアフィリエイト広告が含まれております。
【Unity】トランジションを使用した場面転換の作り方!

こんにちは!コチラの記事では、シーン遷移のトランジション・アニメーション遷移のトランジションの作り方を分かりやすく解説していきます。
シーン遷移のトランジションの作り方!
ルール画像(今回は星形を使用)でイメージをくり抜いて、そのくり抜いた形が拡大・拡縮することで、シーン遷移するようにトランジションを設定していきます!

シーン遷移のトランジションを作る手順は、以下のとおりです。
- Image を設定・調整する。
- トランジション用のシェーダーを作成する。
- マテリアルを作成し、ルール画像を設定する。
- マテリアルのトランジションの値を変更して、シーン遷移を作成する。
Image を設定・調整する


トランジション用のシェーダーを作成する
続いてルール画像でイメージをくり抜いて、そのくり抜いた部分が拡大・拡縮するようにトランジションするシェーダーを作成していきます。

まずはシェーダーを作成するフォルダを開きそのフォルダ上で、右クリック → Create → Shader Graph → URP →「 Sprite Unlit Shader Graph 」でシェーダーを作成します。

以下シェーダーを作成する手順を解説します!


Transition の値を、マテリアルのパラメーターから変更できるように設定します。

ルール画像についても、マテリアルから変更できるように設定します。

Transitionの値が0になったときに、ルール画像でくり抜く場所が完全に消えるように設定します。
Base Color には、Vertex Color を繋ぎ、Image の Inspectorから色を変更できるように設定します。

以上がシェーダーの作成手順です。
上記のとおりシェーダーが作成出来たら保存をして、シェーダー画面からシーンビューに戻りましょう。
マテリアルを作成し、ルール画像を設定する
つぎにマテリアルを作成して、そのマテリアルにルール画像を設定する手順を解説します。

※マテリアルをImageに適用させるには、以下の画像のように、Imageを選択し、 Inspector → Material にドラッグアンドドロップで、適用させることができます。

※フォルダにあるルール画像をドラッグアンドドロップで設定することができます。


今回は赤ピンクのような色に設定してみました。
マテリアルのトランジションの値を変更して、シーン遷移を作成する。
マテリアルの Inspector → Transition の値を調整することで、シーン遷移のトランジションを設定することができます。

アニメーション遷移の作り方!
キャラクターの動き(アニメーション)を繋ぐトランジションの設定の方法は、以下のとおりです。

繋ぎたいオブジェクト上で、右クリック → 「 Make Transition 」で矢印を表示します。
表示されたら、繋ぎたいもう一方のオブジェクトまでドラッグします。

そのようにしてトランジションを繋ぐことでキャラクターの動きと動きを繋げることができます。
今回使用したアセットについては、次項の「トランジションに関するおすすめのアセット紹介」でご紹介します!
アニメーション遷移・トランジションの削除の方法

削除したいトランジションを選択し、キーボードの「 delete 」をクリックすると、トランジションを削除することができます。
トランジションに関するおすすめのアセット紹介
トランジションに関するおすすめのアセット2つを紹介します!
おすすめのアセット①Transition Blocks
こちらはシーン遷移のトランジションについてのおすすめのアセットです。

今回作成方法を解説したのは、星形のトランジションでしたが、コチラのアセットを使用すると以下の動画のようにさまざまなトランジションを簡単に用意することができます。
おすすめのアセット②Unity-Chan! Model
「アニメーション遷移の作り方!」の項で使用したアセットもコチラです。
コチラのアセットは無料で使用することができます。

キャラクターと、その動き・アニメーション遷移を簡単に表現することができるのでおすすめです。
まとめ
- シーン遷移のトランジションを作成する手順は、
- Image を設定・調整する。
- トランジション用のシェーダーを作成する。
- マテリアルを作成し、ルール画像を設定する。
- マテリアルのトランジションの値を変更して、シーン遷移を作成する。
- Hierarchy で右クリック→ UI → Image を選択し、Imageを作成し、Inspector → Scale を画面のサイズに調整する。
- 右クリック → Create → Shader Graph → URP →「 Sprite Unlit Shader Graph 」でシェーダーを作成することができる。
- シェーダーは、ルール画像でイメージをくり抜いて、そのくり抜いた部分が拡大・拡縮するようにトランジションするように作成する。
- マテリアルを作成したら、シェーダーとルール画像を適用させる。
- マテリアルのトランジションの値を調整して、シーン遷移を作成する。
- アニメーション遷移の作り方は、繋ぎたいオブジェクト上で、右クリック → 「 Make Transition 」で矢印を表示し、繋ぎたいもう一方のオブジェクトまでドラッグすることで可能。
- 削除したいトランジションを選択し、キーボードの「 delete 」をクリックすると、トランジションを削除することができる。