【Unity】タブバーと画面切替アニメーションを実装する【uGUI】

参考書籍

uGUIではじめるUnity UIデザインの教科書

タブバーと画面切替の実装

TabBarオブジェクトの作成

・CanvasとTabBar用のImageオブジェクトを追加する。

・TabBarオブジェクトに下記コンポーネントをアタッチする。
Toggle Group：Toggleを操作するコンポーネント
Horizontal Layout Group：横方向に整列するコンポーネント（Chilid Force ExpandのチェックON）

Toggleオブジェクトの作成

・TabBarの子オブジェクトとしてToggleコンポーネントを追加し、
BackgroundとCheckmarkのSpriteを設定する。
※それぞれの大きさは調整する。

↑Background（チェックOFF時の画像）

↑Checkmark（チェックON時の画像）

↑オンオフ切り替え時に画像が変わるようになる

・Toggleの数だけ同様に作成する。

・各ToggleのGroupにTabBarオブジェクトを設定する。

↑Toggleの切り替えができるようになる

画面切替の実装

・切り替える画面を空のGameObject（TabContent）配下に作成する。

・Toggleの「On Value Changed」に画面オブジェクト、Functionに「SetActive」を設定する。

↑Toggle切り替えで画面が切り替わるようになる
※TabBarイメージは不要のためオフに変更

画面切替アニメーションの実装

↑作成するアニメーション

・各画面オブジェクトに「Canvas Group」コンポーネントをアタッチする。

Animation Controllerの作成

・AnimationControllerと各画面のAnimationを作成し、下記のように配置する。

・TabContentオブジェクトにAnimationコンポーネントをアタッチし、
作成したAnimationControllerを設定する。

・AnimationControllerにパラメータとして各画面のトリガーを追加する。

・トリガーが呼ばれたら各画面のAnimationに遷移するよう設定し、DurationとOffsetを下記に設定する。

・各ToggleコンポーネントのChangeイベントを削除し、「Event Trigger – Pointer Click」時に
各画面のトリガーをONにするよう設定する。

Animationの作成

・HomeのAnimationを下記のように設定する。

[Homeオブジェクト]
Active：true
Position：画面中央

[上記以外の画面オブジェクト]
Active：false
Position：画面枠外（右）

・Home以外のAnimationを下記のように設定する。

[遷移する画面オブジェクト]
Active：true
Position：画面中央

[上記以外の画面オブジェクト]
Active：false
Position：画面枠外（左）→画面枠外（右）

↑画面切替アニメーションの完成

おわりに

【Unity】タブバーと画面切替アニメーションを実装する【uGUI】 〜完〜