
マイケルです!


以下のような・・・




参考書籍


UI構築に必要な機能が幅広く盛り込まれているので、
一冊持っていて損はないと思います!

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

TabBarオブジェクトの作成

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

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



Toggleオブジェクトの作成

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


↑Background(チェックOFF時の画像)

↑Checkmark(チェックON時の画像)

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


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

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


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


これ以降は非表示にしておきます!
画面切替の実装

空のGameObjectの下に、タブの数だけ画面を作成して実装しましょう!
・切り替える画面を空のGameObject(TabContent)配下に作成する。

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



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

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

少し味気ないので切替アニメーションを付けていきます!

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


まずは各画面のオブジェクトを子要素も含めて操作するため、
「Canvas Group」コンポーネントをアタッチします!
・各画面オブジェクトに「Canvas Group」コンポーネントをアタッチする。

Animation Controllerの作成

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

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

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

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

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

Animationの作成

動かしながら調整していきましょう!

黒い背景のオブジェクト(Black)も追加しています!
・HomeのAnimationを下記のように設定する。
[Homeオブジェクト]
Active:true
Position:画面中央
[上記以外の画面オブジェクト]
Active:false
Position:画面枠外(右)

・Home以外のAnimationを下記のように設定する。
[遷移する画面オブジェクト]
Active:true
Position:画面中央
[上記以外の画面オブジェクト]
Active:false
Position:画面枠外(左)→画面枠外(右)



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

おわりに

どうだったかな?


作り方をしっかりと覚えておきましょう!

アデュー!!

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