0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 1 year has passed since last update.

[Unity] シーン遷移のフェードアウト実装

Posted at

シーン遷移時のフェードアウト機能の実装について!
アニメーションを使用して作成する方法です。

使用PC: MacBook Pro (13-inch, M1, 2020)
OSバージョン: 11.5.2
Unityバージョン:2020.3.30f

完成図

フェードアウト_AdobeCreativeCloudExpress.gif

やり方

シーン遷移本体のオブジェクトを作成

【Hierarchy】→【Create】→【Canvas】を作成

Canvasの子オブジェクトにImageを作成

Imageのcolorを黒に、サイズをcanvasいっぱいに変更する。

画面収録_2022-04-30_1_36_57_AdobeCreativeCloudExpress.gif

ImageAdd ComponentからCanvas Groupを付け加える。
スクリーンショット 2022-04-30 1.39.10.png

Imageのinspectorビューで、gameビューでcanvasにピッタリになるように設定。colorを黒色にする。
スクリーンショット 2022-04-29 23.03.02.png

アニメーションの作成

(もし表示されていなければ、【Window】→【Animation】AnimatorAnimationのビューを開いておいてください。)
スクリーンショット 2022-04-29 23.11.41.png

AnimationビューからCreateを押し、保存先を好きなところに設定し保存する。(名前も自由に!)
画面収録-2022-04-29-23.27.45.gif

【Add Property】→【Canvas Group】→【Alpha】から+ボタンで追加する。タイムライン0秒のキーフレームを選択。Color.a(透明度)をクリックして「0」に設定する。
(キーフレームの「1」のところのColor.aが「1」になるようにする。)
画面収録_2022-04-30_1_01_31_AdobeCreativeCloudExpress.gif

※キーフレームは自由に調節してください。

③Projectビューにfade(Animation)Image(Animator Controller)ができているか確認する。

※ループが一回で良ければ、AnimationのLoop Timeのチェックを外してください。
スクリーンショット 2022-04-30 1.51.10.png

以上!!

参考記事

0
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?