【Unity】トランジションを使用した場面転換の作り方！

2023年8月21日

tainari

こんにちは！コチラの記事では、シーン遷移のトランジション・アニメーション遷移のトランジションの作り方を分かりやすく解説していきます。

シーン遷移のトランジションの作り方！

ルール画像（今回は星形を使用）でイメージをくり抜いて、そのくり抜いた形が拡大・拡縮することで、シーン遷移するようにトランジションを設定していきます！

シーン遷移のトランジションを作る手順は、以下のとおりです。

Image を設定・調整する。
トランジション用のシェーダーを作成する。
マテリアルを作成し、ルール画像を設定する。
マテリアルのトランジションの値を変更して、シーン遷移を作成する。

Image を設定・調整する

STEP

まずは、Hierarchy で右クリック→ UI → Image を選択し、Image を作成します。

STEP

作成した Image を選択し、Inspector → Scale を画面のサイズに調整します。

トランジション用のシェーダーを作成する

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

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

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

STEP

シェーダーが作成出来たらそのシェーダーを開き、Graph Inspector の Alpha Clipping に、チェックを入れます。

STEP

設定するルール画像が拡大・拡縮してシーン遷移するように設定するので、UV が拡大拡縮するシェーダーを設定します。

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

STEP

拡大・拡縮するために組んだシェーダーの「 Saturate 」を、「 SampleTexture 2D 」の UV に繋ぎます。

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

STEP

STEP1で設定したTransitionの値を、「 Ceilling 」に繋ぎます。そのCeilling の値と、SampleTexture 2D の値を掛け算します。

Transitionの値が０になったときに、ルール画像でくり抜く場所が完全に消えるように設定します。

STEP

前の工程で消す処理をした数値を、One Minus に繋いで、形をくり抜くように設定します。その値をFlagment の Alpha に設定しましょう。
Base Color には、Vertex Color を繋ぎ、Image の Inspectorから色を変更できるように設定します。

以上がシェーダーの作成手順です。

上記のとおりシェーダーが作成出来たら保存をして、シェーダー画面からシーンビューに戻りましょう。

マテリアルを作成し、ルール画像を設定する

つぎにマテリアルを作成して、そのマテリアルにルール画像を設定する手順を解説します。

STEP

任意の Unity フォルダ上で、右クリック→ Create → Material を選択し、Material を作成します。

STEP

マテリアルに先ほど作成したシェーダーをドラッグアンドドロップで適用させ、さらにそのマテリアルを Image に適用させます。

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

STEP

マテリアルを選択し、マテリアルの Inspector の Shape にルール画像を設定します。

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

STEP

Image の Inspector → Color から、お好みで色を選択します。

今回は赤ピンクのような色に設定してみました。

マテリアルのトランジションの値を変更して、シーン遷移を作成する。

マテリアルの Inspector → Transition の値を調整することで、シーン遷移のトランジションを設定することができます。

アニメーション遷移の作り方！

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

繋ぎたいオブジェクト上で、右クリック → 「 Make Transition 」で矢印を表示します。

表示されたら、繋ぎたいもう一方のオブジェクトまでドラッグします。

そのようにしてトランジションを繋ぐことでキャラクターの動きと動きを繋げることができます。

今回使用したアセットについては、次項の「トランジションに関するおすすめのアセット紹介」でご紹介します！

アニメーション遷移・トランジションの削除の方法

削除したいトランジションを選択し、キーボードの「 delete 」をクリックすると、トランジションを削除することができます。

トランジションに関するおすすめのアセット紹介

トランジションに関するおすすめのアセット２つを紹介します！

まとめ

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