デザイナーのためのUnity uGUI

#はじめに
この記事の目的は、デザイナーがUnity上でUIのレスポンシブ対応、UIアニメーション、画面遷移を作り上げることです。
コードを一切書かずに、デザイナーが意図している挙動をUnity上で実現し、エンジニアに渡すことがゴールです。

ここまでデザイナーがやれば、エンジニアが死ぬほど助かると思います。
そして、ここまでできるデザイナーは重宝されるでしょう。

※必須の設定

Canvasを作ることから始めます
####Canvas Scaler

• 「UI Scale Mode」を「Scale with Screen Size」にする
• Reference Resolution」のX, Yのサイズをレスポンシブの最大値に設定

（2020.4 現在で、一番横幅が大きいXperia 1644に設定している）

####Rect Transformの理解
このへんを参考にしてください
【Unity uGUI】RectTransformの基本的な使い方を理解する
【Unity uGUI】Rect Transformコンポーネントを徹底解説

最初は戸惑うと思いますが、たくさん触っているとだんだん体で慣れてきます。

##UIの追加
####Image

• Source Imageに適した画像を貼り付ける
• Set Native Sizeで作った解像度で設置される

####Button

• Imageは同様に貼り付け、サイズを変更
• 子にあるTextは使わなければ消す
• Button Componentでアクション時の動作を設定
  • よく使うのはTransitionの「Sprite Swap」
  • Pressed Sprite等に押された挙動の画像を貼る

※ボタンによる画面遷移は後述

####その他

• Slider
• Scroll Bar
• Scroll View

などは必要な時に、調べましょう。
公式のチュートリアルが参考になります。

公式
(https://learn.unity.com/tutorial/ui-components)

Scroll Viewのわかりやすい記事
[Unity uGUI] スクロールビューの基本と軽量なスクロールリストビューの作り方 - Qiita

##ヒエラルキー構造

私が使っている構造。
UIアニメーションを使い回しすることを前提に、こう組んでいます。
Animator Componentをつけているオブジェクトのオンオフせずに、中身をオンオフするためにContentsを挟んでいます。
（Animator Componentが動いている状態でオンオフするのは意図しない挙動をする可能性があるらしい。）

例

• Canvas
  • ModalThisGameFree（空オブジェクト。命名はわかりやすいようにする）
    • ModalContents（空オブジェクト。アニメーションを使い回せるように、名前を統一する）
      • Bg
      • Button
      • などなど中身

ModalThisGameFree

• Canvas Group Component
• Animator Component

Contents

• 特にComponentをつけない
• Animationで、このオブジェクトの is Active を変更することでオンオフを切り替える

##UI アニメーション
####基本的にアニメーションが関連するComponent

• Rect Transform
  • Position
  • Rotation
  • Scale
• Canvas Group
  • Alphaでそのオブジェクト配下の透明度を一括で変えることができる

###アニメーションの作り方

1. 動かしたいオブジェクトにAnimator Componentを追加
   

2. Animation Controllerを作成、Animator Componentの Controllerに貼り付ける
   まだ何もない状態
   

3. Animation ウィンドウのCreateから Animation（.anim）を作成、アニメーションを作る
   

使いまわせるアニメーションにするには、
「Animator Componentがついているオブジェクト」か「名前が同じである子オブジェクト」の操作のみにする。
（そのためのヒエラルキー構造。）

こうしないと、別オブジェクトに同アニメーションをつけた場合に、Missing状態になる。
（Unityアニメーションは子の名前から参照しているため）

※色々構造とかややこしくしているのは、アニメーションの使い回しを前提としているためです。
もしアニメーションがほとんど異なるものを使うなら、気にしなくていいところ。

##画面遷移

UIアニメーションともう少しのことを理解すれば、デザイナーでもUnity Editor上で画面遷移を作ることができます。

「ModalThisGameFreeのOKボタンを押すと、Tutorialの画面に進む」という例で説明します。

1. ModalThisGameFreeが閉じるアニメーションを作る
   
   例のように、この画面を閉じるのなら、ModalContentsの Is Activeをオフにする

2. Animatorウィンドウで、閉じる遷移を作る
   Any StateからFadeoutにTransitionをつなげる

3. ParametersでTriggerを作る（FadeoutClose）
   

4. TransitionのConditionに先ほどのTrigger(FadeoutClose)を設定
   

5. OK ButtonのButton Componentの On Click設定をする
   対象のアニメーションさせるオブジェクトをドラッグドロップで持ってくる
   
   Functionを「Set Trigger(string)」にする
   
   stringの部分にTriggerの名前(FadeoutClose)をいれる
   

6. ここまでで、「OK Buttonを押すと、ModalThisGameFreeが閉じるアニメーションが再生され、中身も非アクティブになる」と言う状態が完成されます。

7. あとはTutorialに同様の操作をします

• Modal TutorialにAnimator Componentをつける
• アニメーションの作成
• Triggerを作成、Conditionに設定
• ButtonのOn Clickで Triggerをセット

これで、「ModalThisGameFreeのOKボタンを押すと、Tutorialの画面に進む」という、一つの画面遷移が完成です！
ここまで見ると、長く大変そうに感じますが、繰り返しの作業はシンプルなので、慣れるときっとすぐです。

##最後に
ここまでシーンを作ってエンジニアに渡せば、エンジニアの負担がめちゃくちゃ下がると言ってました。
こだわりを持って配置やアニメーションをさせたいデザイナーや、エンジニアが少ないチームのデザイナーはぜひ参考にしてください！