7月5日に開催された勉強会の資料になります。

1. Unity uGUI
2019/07/05
宮城アプリ開発勉強会 #4
株式会社ハイド 仙台支社 中野拓海

2. 自己紹介
名前：中野拓海
出身：広島県
所属：株式会社ハイド 仙台支社
役職：プログラマー
使用言語：UnityでC#をよく使います

3. Unityの特徴
 マルチプラットフォームに対応している
 素材やプラグインなどを購入できるアセットストアが
充実している
 手動でUIを操作できるGUIコンポーネントが提供される
今回はGUI周りについて解説

4. ・uGUI
・uGUIの機能紹介
・Anchor
・UIのアニメーション
・アセットバンドル
・アセットバンドルとは
・アセットバンドルの仕組み
目次

5. uGUI

6.  uGUIとは
Unity4.6から搭載されたUIシステム。
ImageやText、Sliderなどの多くのUIが用意されており、
シーンへの配置や、操作、プロパティの設定を行うことが可能。

7. uGUIの使い方
1.Canvas
2.Image
3.その他

8. Canvas

9. Canvas
Canvasは全てのUI要素を配置していくための領域です。
配置していくUIは全てこのCanvasの子要素として
配置することになります。

10.  Canvas Scaler
画面サイズや縦横比はユーザーの環境や設定で左右される
ため、UIの位置や大きさを実行環境の画面に合わせて拡大縮
小する必要があります。
そしてその処理を実行するのが CanvasScaler コンポーネン
トになります。

11.  UI Scale Mode設定できる三つのモード
Constant Pixel Size : UI要素の位置とサイズは
画面上のピクセルに指定されます。
Scale With Screen Size : 設定した解像度によって
UIの位置やサイズが指定されます。
Constant Phisical Size : UI 要素の位置とサイズは
ミリメートル、ポイント、パイカなどの
物理単位で指定されます。

12. Image

13. Image
UI上に画像を表示する機能です。
表示する画像はImageコンポーネントの Source Image で設定。
Imageコンポーネントでは色や表示方法などの設定も可能です。

14.  Imageコンポーネントの操作
Imageコンポーネントはスクリプトから動的に変更することも
可能です。
表示する画像を切り替えたり、色の変更、α値を変更してフェー
ドインフェードアウトの演出など。
色の変更 透明度の変更

15. その他のUI部品の紹介

16. Text
Raw Image
Button
Toggle
Slider
Scrollbar
Dropdown
Panel
Input Field
Scroll View

17. Anchorによる位置の固定

18. Anchorを設定することにより、親のCanvasのどの位置に
UIを固定するか決めることが出来ます。
 Anchorとは

19. 解像度
1920×1080
解像度
2160×1080
 Anchorを設定していない場合

20. 解像度
1920×1080
解像度
2160×1080
 Anchorを設定した場合

21. UIのアニメーション

22. UIにもアニメーションを作成することが出来ます。
作成する方法としては
『Animator』
『DOTween』
『タイムライン』
などが挙げられます。
 アニメーション

23. Animationウィンドウからは、オブジェクトごとの位置や角度、
コンポーネントのプロパティー等といった要素を動かすアニ
メーションを内部から作成することが出来ます。
そしてAnimatorControllerから作成したアニメーションの再
生のタイミングや、アニメーションの遷移を制御することが
可能です。
 Animator

24. DOTweenはアセットストアで無料でダウンロードできるア
セットになります。
動きはスクリプトから制御を行います。
動き方の種類は豊富で、移動や大きさの変更、シェイクさせ
たりジャンプさせたりといった動きも可能です。
DOTweenではイージング（動きの加減速）をUnityで簡単に実
装できます。
 DOTween

25. Unity2017から追加された機能。
時系列にアニメーションやカメラを配置させて、配置した順
に実行するエディタウィンドウになります。
アニメーションが設定されていないオブジェクトに対しタイ
ムライン上でアニメーションを付けることも可能です。
 タイムライン

26. Animatorを使った
アニメーションの紹介

28. アセットバンドル

29. アプリの一部のデータをアプリ本体とは別にし、アプリのダ
ウンロード後に外からデータを落とすことができる。
どれだけアップデートを重ねて、データが増えてもアセット
バンドルにしてしまえば、増えてるアセットバンドルのみで
アプリ本体の容量は変わらない。
 アセットバンドルとは
サーバー
アセットバンドル
ダウンロード

30. アセットバンドルは複数のアセットを一つのファイルとして書き出したものに
なります。
そうして書き出したファイルは、Webサーバーからダウンロードして使用する
ことが可能です。
UnityEditor
アセット
アセット
アセット
ビルド先
AssetBundle
メタ情報
変換された
アセット
Webサーバー
AssetBundle
メタ情報
変換された
アセット
アプリ
AssetBundle
メタ情報
変換された
アセット
ビルド ダウン
ロード
アップ
ロード
 アセットバンドルの仕組み