プログラミング生放送勉強会 第60回＠名古屋の発表資料 https://atnd.org/events/108992

1. 2019/10/26(土)
プログラミング生放送勉強会 第60回@名古屋
You&I
Unityアセットの FairyGUI を使って、
一見格好良さそうなGUIを
作ろうとしてハマる話

2. ジコ、ショウカイ。
• H/N： You&I(読み：ユーアンドアイ)
• SNS： @you_and_i
• 出身： 生まれも育ちも名古屋市
• 年齢： アラフォー
• 本職： 商学部出身の職業プログラマ
• 言語： C++, C#他
• 所属： プログラミング生放送勉強会 名古屋支部長
名古屋アジャイル勉強会
わんくま同盟 名古屋勉強会 ディレクター
Unity FairyGUI Asset使ってみた 2

3. 暮井慧ファンクラブの会員番号２番です
Unity FairyGUI Asset使ってみた 3

4. プログラミング生放送 勉強会について
回数 参加 回数 参加 回数 参加 回数 参加
第1回@渋谷 不参加 第18回@大阪 参加 第35回@DMM 参加 第52回@松山 参加
第2回@新宿 不参加 第19回@品川 参加 第36回@DMM 参加 第53回@GMO大阪 参加
第3回@大阪 不参加 第20回@品川 不参加 第37回@福岡 参加 第54回@熊本 参加
第4回＠名古屋 参加 第21回@福岡 参加 第38回@名古屋 参加 第55回@福岡 参加
第5回@新宿 不参加 第22回@松山 参加 第39回@DMM 不参加 第56回@大阪 不参加
第6回@大阪 参加 第23回@大阪 参加 第40回@金沢 参加 第57回@名古屋 参加
第7回@新宿 参加 第24回@名古屋 参加 第41回@松山 参加 第58回@IIJ 不参加
第8回＠名古屋 参加 第25回@品川 不参加 第42回@大阪 参加 第59回@松山 不参加
第9回@大阪 参加 第26回@大阪 不参加 第43回@DMM 参加? 第60回@名古屋 参加
第10回@品川 参加 第27回@品川 参加 第44回@熊本 参加
第11回@大阪 不参加 第28回@仙台 参加 第45回@名古屋 参加
第12回@品川 参加 第29回@松山 参加 第46回@DMM 参加
第13回@愛媛 参加 第30回@名古屋 参加 第47回@松山 参加
第14回@品川 不参加 第31回@大阪 参加 第48回@DMM 参加
第15回@大阪 参加 第32回@GMO 参加 第49回@大阪 参加
第16回＠名古屋 参加 第33回@DMM 不参加 第50回@名古屋 参加
第17回@品川 参加 第34回@松山 参加 第51回@IIJ 参加?
名古屋支部長のこれまでの勉強会参加状況→29回中20回
Unity FairyGUI Asset使ってみた 4

5. AGENDA
1. 主旨説明＆まとめ
2. Unity及びuGUIとは
3. FairyGUI概要
4. FairyGUIを使ってみる
Unity FairyGUI Asset使ってみた 5

6. 1. 主旨説明＆まとめ
Unity FairyGUI Asset使ってみた 6

7. 1. 主旨説明＆まとめ
•FairyGUIアセットとは、Unity上で様々なGUIコ
ンポーネントを利用可能とする拡張コンポーネ
ントです。
•http://en.fairygui.com/
•https://assetstore.unity.com/packages/tools/
gui/fairygui-49479
Unity FairyGUI Asset使ってみた 7

8. Unity FairyGUI Asset使ってみた 8

9. 1. 主旨説明＆まとめ
•FairyGUIの長所
1. アプリ固有のGUIコンポーネントを作り易い。
2. Unityを実行しなくてもWYSIWYG(What You
See Is What You Get)が出来て、GUIコンポー
ネント配置とイベント処理が分離できる。
3. uGUIにはないList/Gridコントロールが使える。
4. Unityの3D機能を使った視覚効果を利用した
GUIコンポーネントも作成可能。
Unity FairyGUI Asset使ってみた 9

10. 1. 主旨説明＆まとめ
• FairyGUI Features
1. WYSWYG, artist friendly.
2. Complex UI components can be designed in editor directly, no script required.
3. Provided time axis to design UI transitions.
4. Design for both web and mobile.
5. Support for building and using sequence frame animation simply as a image.
6. Support bitmap fonts by using BMFont or images.
7. Powerful list component. Support virtual list and loop list.
8. Support pixel hit test.
9. Easy to mix with other 3D elements, like models, particles and RenderTextures.
10. Built-in gesture support.
11. Support VR. Easy to bind UI to any shape, such as a Curved UI.
12. Flexible publish strategy, support packing atlas automatically, support multiple
atlas in one package.
13. Multi language UI support.
14. Provided scale strategy for different resolution.
15. Stable and efficient
Unity FairyGUI Asset使ってみた 10

11. 1. 主旨説明＆まとめ
•FairyGUIの短所
1. 各GUIコンポーネントを１から作り込む必要がある
ので、既成のコンポーネントを使って手早くアプリを
作りたい用途には向かない。
2. XAMLとかのデータバインディング的なものはない。
3. Unityとは別のツールの使い方を覚える必要がある。
4. FairyGUI特有のお約束を覚える必要がある。
5. 開発元は中国で、情報は中国語又は英語となる。
Unity FairyGUI Asset使ってみた 11

12. 1. 主旨説明＆まとめ
•このセッションでは、先程紹介した長所・短所
を中心に、FairyGUIアセットがどんなものかを
紹介していきます。
•Unityは2D/3Dアプリケーションの開発が可能
ですが、このセッションでは3Dアプリケーションを
前提とします。
Unity FairyGUI Asset使ってみた 12

13. 2. Unity及びuGUIとは
Unity FairyGUI Asset使ってみた 13

14. 2. Unity及びuGUIとは
•Unityとは
•クロスプラットフォームに対応するゲームエンジン
及び統合開発環境。条件を満たせば無料で利
用可能。
• https://unity.com
•アセットと呼ばれるプラグイン機能により、3Dモデ
ルや様々な機能が利用可能となる。
•Unityアセットストアで有料/無料のアセットが入
手可能。
• https://assetstore.unity.com
Unity FairyGUI Asset使ってみた 14

15. 2. Unity及びuGUIとは
•Unityのライセンス(2019年10月現在)
•Enterprise : お問い合わせ
•Pro : 15,000円/月
•Plus : 4,200円/月
•Personal : 無料(※)
※過去12ヶ月の収益又は資金が10万ドル未満(約一千万円)
※2020年1月1日からライセンス料金は値上げされます。
https://blogs.unity3d.com/2019/10/17/pricing-for-unity-pro-and-plus-
subscriptions-to-change-on-january-1-2020
Unity FairyGUI Asset使ってみた 15

16. 2. Unity及びuGUIとは
•Unityのライセンス
•2016年までは、(買切の)永久ライセンス方式。
•2017年以降は、サブスクリプション方式。
Unity FairyGUI Asset使ってみた 16

17. 2. Unity及びuGUIとは
•Unityの利用
•https://unity3d.com/jp/unity/system-
requirements
• 開発環境には、 64 bit版Windows又は、macOS
が必要
• 実行環境には、.NET Framework/Standardが必
要
→利用するアセットが依存しているランタイムに影響を受
ける
Unity FairyGUI Asset使ってみた 17

18. 2. Unity及びuGUIとは
•Unityの利用
•https://unity3d.com/jp/get-unity/download
• Unity Hub
• 複数バージョンのUnity Editor(統合開発環境)及びプロ
ジェクトの管理が可能。通常はこちらを利用する。
• Unity Editor
• 単一バージョンのUnity Editor。
Unity FairyGUI Asset使ってみた 18

19. 2. Unity及びuGUIとは
•Unity HubでUnityをインストール/アンインス
トールすると、Unityシーン(*.scene)やUnity
パッケージ(*.unitypackage)関連付けが壊れ
るので、以下のレジストリキー配下に登録され
ている「Unity.exe」へのパスを確認しましょう。
•HKEY_CLASSES_ROOT¥Unity package file
•HKEY_CLASSES_ROOT¥Unity scene file
Unity FairyGUI Asset使ってみた 19

20. 2. Unity及びuGUIとは
•Unityの利用
•https://unity3d.com/jp/get-
unity/download/archive
• non-LTS(大体週一回更新される)
• 201x.1.y～201x.3.y
• LTS(2年間サポート)
• 201x.4.y
Unity FairyGUI Asset使ってみた 20

21. 2. Unity及びuGUIとは
•uGUI(Unity UI)
•Unity 4.6から追加されたGUI機能。
•主なGUIコンポーネント
• Canvas, Panel, Text, Button, Toggle, Slider,
Dropdown, Image, Scrollbar, Scroll View
Unity FairyGUI Asset使ってみた 21

22. 3. FairyGUI概要
Unity FairyGUI Asset使ってみた 22

23. 3. FairyGUI概要
•FairyGUIの機能(v3.4.1時点)
•Unity 5.2.1以降に対応
Unity FairyGUI Asset使ってみた 23

24. 3. FairyGUI概要
•FairyGUIの機能(v3.4.1時点)
•主なGUIコンポーネント
• Text, RichText, Graph, List/Grid, Loader, Image
•主なWindowコンポーネント
• Button, Label, ComboBox, ScrollBar, ProgressBar,
Slider, PopupMenu, MovieClip, Bitmap Font,
Window Frame
•その他
• Controller
Unity FairyGUI Asset使ってみた 24

25. 3. FairyGUI概要
•ところで このアセット同梱のサンプルを見てくれ
こいつをどう思う？
Unity FairyGUI Asset使ってみた 25

26. 4. FairyGUIを使ってみる
Unity FairyGUI Asset使ってみた 26

27. 4. FairyGUIを使ってみる
•すごく・・・FairyGUIのサンプル、格好良いで
す・・・。
•では使ってみよう！
まず最初にFairyGUI Editorをダウンロードする必
要があります。
http://en.fairygui.com/product/
Unity FairyGUI Asset使ってみた 27

28. 4. FairyGUIを使ってみる
•FairyGUIを使った開発の流れ
1. FairyGUI EditorでGUIを作成し、Exportで
GUIリソースのbyte配列(*.bytes)を作成
2. 作成したGUIリソースのbyte配列(*.bytes)を
Unityの「Resources」フォルダに配置
3. Unity Editor上でGUIリソースのbyte配列と
GUIコンポーネントの紐付けを行う
Unity FairyGUI Asset使ってみた 28

29. 4. FairyGUIを使ってみる
•Unity EditorでのFairyGUIコンポーネント配置
•「Stage Camera」という名前でカメラを配置
→GUI表示(視点)用のカメラ
•「UI Panel」の配置
•「UI Content Scaler」コンポーネントの追加
→基本的にGUI設計時のウィンドウサイズを基準に
画面座標は決まる。実行時のウィンドウサイズにス
ケールされるが、座標系はGUI設計時の位置のま
ま。
Unity FairyGUI Asset使ってみた 29

30. 4. FairyGUIを使ってみる
•はまりポイント
1. コンポーネントのExported設定
2. ComboBox, List/Grid
• １から各部品を作る必要がある。
3. Window Frame
• FairyGUI Editorのアイテム名には、決まった名前を
つけないといけない。
4. List/Gridのスクロールバー
• Unity Editorで表示されるのにPlayerでは表示され
ない
Unity FairyGUI Asset使ってみた 30