41
46

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 5 years have passed since last update.

Unity 2Advent Calendar 2015

Day 14

UGUIでアニメーションを使ってNoCodingで画面遷移を作る

Posted at

 
#初めに
Unityの標準UIシステム、UGUIは実はとても高機能で、データ更新の必要ない内容の決まっている表示に関してはほぼこれだけ(スクリプトを書く必要なしに)使うことができます。

#タブ画面
タブ画面は単純に画面を切り替えるだけならとてもシンプルに作ることができます。
###必要コンポーネント
Toggle
ToggleGroup
###手順
Tabで表示したい画面GameObjectと、Toggleコンポーネントと、イメージコンポーネントを持ったGameObjectをタブの数だけそれぞれ用意します。
img

ToggleコンポーネントのOnValueChangedイベントに、対応する画面GameObjectのSetActive(DynamicBool)を紐付けます。
img

最初に表示したいタブ以外のGameObjectをDisableにして、タブボタンのToggleのisOnをTrueにします。

img
完成です。
あとは各GameObjectの中身を作っていってください。

#画面遷移
Unityのインスペクターから行うイベントのバインドは基本的にはComponentのPublicな引数が一つ以下のメソッドならなんでも呼ぶことができます。
これを応用すると、AnimatorのSetTriggerをUIのボタンと紐づけることができます。(SetIntやSetFloatは引数が二つ必要なので呼ぶことができません。)
つまり、Triggerのみで画面遷移するUIアニメーションを作ると、スクリプトなしに画面遷移を行うことが可能になります。
###必要コンポーネント
Button(等のクリックイベントが取れるコンポーネント)
Animator
###手順
二つのPanelとそれぞれに遷移するためのボタンを用意します。
img

切り替えのアニメーションを作成し、AnimationControllerでTrigger当の設定を行います。
アニメーションの作成はUnityAdventCalendar2015 2 5日目「uGUIのAnchorsでレスポンシブアニメーション」を参考にしてみてください。
img

ボタンからそれぞれの画面に遷移するトリガーを呼び出します。
img

完成です。
img

ちなみにProjectViewを見てみると
img
見事にScriptファイルがありません。

その他、いろいろな機能を組み合わせれば面白いUIを作成できると思いますので、是非ともいろいろやってみてください。

明日はookumaneko_XDさんの「何か書きます」です。

41
46
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
41
46

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?