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

Unity
マイケル
マイケル
みなさんこんにちは!
マイケルです!
エレキベア
エレキベア
クマ〜〜〜〜
マイケル
マイケル
今回は画面の実装です!
以下のような・・・
Screenshot 2021 04 29 10 02 06
Screenshot 2021 04 29 10 02 57
マイケル
マイケル
画面切替できるタブバーを作っていこうと思います!
エレキベア
エレキベア
よくあるやつクマ〜〜〜
スポンサーリンク

参考書籍

マイケル
マイケル
画面構築するにあたり参考にした書籍はこちらです!

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

マイケル
マイケル
今回紹介するタブバーだけでなく
UI構築に必要な機能が幅広く盛り込まれているので、
一冊持っていて損はないと思います!
エレキベア
エレキベア
クマも所有しているクマ〜〜〜

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

マイケル
マイケル
それでは早速作っていきましょう!

TabBarオブジェクトの作成

マイケル
マイケル
まずはタブバー全体のオブジェクトを作りましょう!


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

ScreenShot 2021 04 28 17 03 59


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

ScreenShot 2021 04 28 17 01 07
マイケル
マイケル
これで子要素を自動で整列してくれるようになります!
エレキベア
エレキベア
便利クマ〜〜〜

Toggleオブジェクトの作成

マイケル
マイケル
そして次はタブの実装!
こちらはToggleコンポーネント を使用します!


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

ScreenShot 2021 04 28 17 17 36
HomeBackButton
↑Background(チェックOFF時の画像)
HomeCheckButton
↑Checkmark(チェックON時の画像)
01 toggle change
↑オンオフ切り替え時に画像が変わるようになる
エレキベア
エレキベア
オンオフで自動で画像が切り替わるクマね
マイケル
マイケル
あとは同様に必要なタブの数だけ作成しましょう!


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

ScreenShot 2021 04 28 17 30 27


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

ScreenShot 2021 04 28 17 26 49
02 toggle change all
↑Toggleの切り替えができるようになる
エレキベア
エレキベア
だいぶそれっぽくなってきたクマ〜〜〜
マイケル
マイケル
TabContentの背景は今回は不要のため、
これ以降は非表示にしておきます!

画面切替の実装

マイケル
マイケル
次はタブでの画面切替の作成です!
空のGameObjectの下に、タブの数だけ画面を作成して実装しましょう!


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

ScreenShot 2021 04 28 17 41 00


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

ScreenShot 2021 04 28 17 43 32
マイケル
マイケル
これでToggle切替時に画面が変わるようになります!
03 screen change
↑Toggle切り替えで画面が切り替わるようになる
※TabBarイメージは不要のためオフに変更
エレキベア
エレキベア
いい感じクマ〜〜

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

マイケル
マイケル
切り替えるだけならこれだけでいいですが、
少し味気ないので切替アニメーションを付けていきます!
04 screen change animetion
↑作成するアニメーション
エレキベア
エレキベア
なかなか難しそうクマね
マイケル
マイケル
一つ一つやっていけば大丈夫!
まずは各画面のオブジェクトを子要素も含めて操作するため、
「Canvas Group」コンポーネントをアタッチします!


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

ScreenShot 2021 04 28 17 59 48

Animation Controllerの作成

マイケル
マイケル
そして次はAnimationControllerを作成と設定を行いましょう!


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

ScreenShot 2021 04 28 17 54 49


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

ScreenShot 2021 04 28 17 55 49


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

ScreenShot 2021 04 28 17 54 59


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

ScreenShot 2021 04 28 17 55 15


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

ScreenShot 2021 04 28 18 03 38

Animationの作成

マイケル
マイケル
あとは各画面のAnimationを設定していくのみ!
動かしながら調整していきましょう!
マイケル
マイケル
また、今回は遷移する際の下地となるよう、作成した画面オブジェクトの他に
黒い背景のオブジェクト(Black)も追加しています!


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

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

[上記以外の画面オブジェクト]
Active:false
Position:画面枠外(右)

ScreenShot 2021 04 28 17 58 03


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

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

[上記以外の画面オブジェクト]
Active:false
Position:画面枠外(左)→画面枠外(右)

ScreenShot 2021 04 28 17 57 49
マイケル
マイケル
これで画面切替のアニメーション設定は完了です!
04 screen change animetion
↑画面切替アニメーションの完成
エレキベア
エレキベア
おしゃれクマ〜〜〜

おわりに

マイケル
マイケル
というわけで今回はタブバーと画面切替アニメーションの実装でした!
どうだったかな?
エレキベア
エレキベア
地道にやっていけばなんとかなったクマ〜〜〜
マイケル
マイケル
ソーシャルゲームを作る際にはほぼ必須となるタブバー!
作り方をしっかりと覚えておきましょう!
マイケル
マイケル
それでは今日はこの辺で!
アデュー!!
エレキベア
エレキベア
クマ〜〜〜〜

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

Unity
スポンサーリンク
この記事をシェアしよう!
フォローお待ちしています!
都会のエレキベア

コメント