Download - 【Unity】uGUIを使った アプリ制作について
![Page 1: 【Unity】uGUIを使った アプリ制作について](https://reader033.vdocuments.pub/reader033/viewer/2022050812/58ed87e21a28aba1388b457d/html5/thumbnails/1.jpg)
uGUIを使ったアプリ制作について
ファイルはこちらactorscomputer.com/test/hatchuptest.zip
![Page 2: 【Unity】uGUIを使った アプリ制作について](https://reader033.vdocuments.pub/reader033/viewer/2022050812/58ed87e21a28aba1388b457d/html5/thumbnails/2.jpg)
ActorsComputerEntertainment 2
自己紹介
![Page 3: 【Unity】uGUIを使った アプリ制作について](https://reader033.vdocuments.pub/reader033/viewer/2022050812/58ed87e21a28aba1388b457d/html5/thumbnails/3.jpg)
ActorsComputerEntertainment 3
坂本倫朗(Actors Computer Entertainment)
Unity、Adobe AIRのゲーム制作(フリー12年目)デジタルハリウッド非常勤講師(12年目)趣味はソーシャルダンス、ピアノhttp://site316.comhttps://www.facebook.com/michiro.sakamotosakamotomichiro
![Page 4: 【Unity】uGUIを使った アプリ制作について](https://reader033.vdocuments.pub/reader033/viewer/2022050812/58ed87e21a28aba1388b457d/html5/thumbnails/4.jpg)
ActorsComputerEntertainment 4
いままで講師として教えた経験をもとに、Amazonから電子書籍を出しています。
『自分を変えずに結果を出す21時間理論』
卒業制作、課題提出のペースランナーに
![Page 5: 【Unity】uGUIを使った アプリ制作について](https://reader033.vdocuments.pub/reader033/viewer/2022050812/58ed87e21a28aba1388b457d/html5/thumbnails/5.jpg)
ActorsComputerEntertainment 5
本題です
![Page 6: 【Unity】uGUIを使った アプリ制作について](https://reader033.vdocuments.pub/reader033/viewer/2022050812/58ed87e21a28aba1388b457d/html5/thumbnails/6.jpg)
ActorsComputerEntertainment 6
uGUIを使ったアプリ制作について
![Page 7: 【Unity】uGUIを使った アプリ制作について](https://reader033.vdocuments.pub/reader033/viewer/2022050812/58ed87e21a28aba1388b457d/html5/thumbnails/7.jpg)
ActorsComputerEntertainment 7
ほぼ、出来上がっているものを使って説明します。
![Page 8: 【Unity】uGUIを使った アプリ制作について](https://reader033.vdocuments.pub/reader033/viewer/2022050812/58ed87e21a28aba1388b457d/html5/thumbnails/8.jpg)
ActorsComputerEntertainment 8
1:プロジェクトの設定
![Page 9: 【Unity】uGUIを使った アプリ制作について](https://reader033.vdocuments.pub/reader033/viewer/2022050812/58ed87e21a28aba1388b457d/html5/thumbnails/9.jpg)
ActorsComputerEntertainment 9
File>BuildSettingsから、Androidに切り替える。
1:プロジェクトの設定
![Page 10: 【Unity】uGUIを使った アプリ制作について](https://reader033.vdocuments.pub/reader033/viewer/2022050812/58ed87e21a28aba1388b457d/html5/thumbnails/10.jpg)
ActorsComputerEntertainment 10
Game Viewの比率を変更して、9:16にする。
1:プロジェクトの設定
![Page 11: 【Unity】uGUIを使った アプリ制作について](https://reader033.vdocuments.pub/reader033/viewer/2022050812/58ed87e21a28aba1388b457d/html5/thumbnails/11.jpg)
ActorsComputerEntertainment 11
photoshopから画像アセットを生成すると便利に取り込めます
1:プロジェクトの設定
![Page 12: 【Unity】uGUIを使った アプリ制作について](https://reader033.vdocuments.pub/reader033/viewer/2022050812/58ed87e21a28aba1388b457d/html5/thumbnails/12.jpg)
ActorsComputerEntertainment 12
card-assetsフォルダに取り込まれたところ
1:プロジェクトの設定
![Page 13: 【Unity】uGUIを使った アプリ制作について](https://reader033.vdocuments.pub/reader033/viewer/2022050812/58ed87e21a28aba1388b457d/html5/thumbnails/13.jpg)
ActorsComputerEntertainment 13
2Dで画像ファイルを使用するために、ファイルはSpriteに変更しておきます。
1:プロジェクトの設定
![Page 14: 【Unity】uGUIを使った アプリ制作について](https://reader033.vdocuments.pub/reader033/viewer/2022050812/58ed87e21a28aba1388b457d/html5/thumbnails/14.jpg)
ActorsComputerEntertainment 14
2:uGUIとは
![Page 15: 【Unity】uGUIを使った アプリ制作について](https://reader033.vdocuments.pub/reader033/viewer/2022050812/58ed87e21a28aba1388b457d/html5/thumbnails/15.jpg)
ActorsComputerEntertainment 15
uGUIは、Unity上でGUIの構築を助けてくれる機能です。
2:uGUIとは
![Page 16: 【Unity】uGUIを使った アプリ制作について](https://reader033.vdocuments.pub/reader033/viewer/2022050812/58ed87e21a28aba1388b457d/html5/thumbnails/16.jpg)
ActorsComputerEntertainment 16
uGUIを使わず、プログラムを書いても
GUIは作れます。
2:uGUIとは
![Page 17: 【Unity】uGUIを使った アプリ制作について](https://reader033.vdocuments.pub/reader033/viewer/2022050812/58ed87e21a28aba1388b457d/html5/thumbnails/17.jpg)
ActorsComputerEntertainment 17
ですがuGUIを使うとUI素材の配置が簡単です。
2:uGUIとは
![Page 18: 【Unity】uGUIを使った アプリ制作について](https://reader033.vdocuments.pub/reader033/viewer/2022050812/58ed87e21a28aba1388b457d/html5/thumbnails/18.jpg)
ActorsComputerEntertainment 18
GameObject>UI>Imageを配置してみます。
2:uGUIとは
![Page 19: 【Unity】uGUIを使った アプリ制作について](https://reader033.vdocuments.pub/reader033/viewer/2022050812/58ed87e21a28aba1388b457d/html5/thumbnails/19.jpg)
ActorsComputerEntertainment 19
ヒエラルキーにUIが登場しました。
2:uGUIとは
![Page 20: 【Unity】uGUIを使った アプリ制作について](https://reader033.vdocuments.pub/reader033/viewer/2022050812/58ed87e21a28aba1388b457d/html5/thumbnails/20.jpg)
ActorsComputerEntertainment 20
ヒエラルキーに
Canvas ImageEventSystemというものが追加されてます。
2:uGUIとは
![Page 21: 【Unity】uGUIを使った アプリ制作について](https://reader033.vdocuments.pub/reader033/viewer/2022050812/58ed87e21a28aba1388b457d/html5/thumbnails/21.jpg)
ActorsComputerEntertainment 21
uGUIのパーツはヒエラルキー上の、Canvasというオブジェクトにまとめられます。
2:uGUIとは
![Page 22: 【Unity】uGUIを使った アプリ制作について](https://reader033.vdocuments.pub/reader033/viewer/2022050812/58ed87e21a28aba1388b457d/html5/thumbnails/22.jpg)
ActorsComputerEntertainment 22
EventSystemは、「uGUI上の①入力、②タッチ、③変化などを監視する役」です。
2:uGUIとは
![Page 23: 【Unity】uGUIを使った アプリ制作について](https://reader033.vdocuments.pub/reader033/viewer/2022050812/58ed87e21a28aba1388b457d/html5/thumbnails/23.jpg)
ActorsComputerEntertainment 23
EventSystemにUIのパーツを入れてはいけません。
2:uGUIとは
![Page 24: 【Unity】uGUIを使った アプリ制作について](https://reader033.vdocuments.pub/reader033/viewer/2022050812/58ed87e21a28aba1388b457d/html5/thumbnails/24.jpg)
ActorsComputerEntertainment 24
次に、Canvasの画面の領域が、デザインデータ(PSD)のサイズと一致するように、Canvasを調整します。
2:uGUIとは
![Page 25: 【Unity】uGUIを使った アプリ制作について](https://reader033.vdocuments.pub/reader033/viewer/2022050812/58ed87e21a28aba1388b457d/html5/thumbnails/25.jpg)
ActorsComputerEntertainment 25
UI Scale Mode →Scale Width Screen Size
2:uGUIとは
![Page 26: 【Unity】uGUIを使った アプリ制作について](https://reader033.vdocuments.pub/reader033/viewer/2022050812/58ed87e21a28aba1388b457d/html5/thumbnails/26.jpg)
ActorsComputerEntertainment 26
Reference Resolution X720 Y1280にします。
2:uGUIとは
![Page 27: 【Unity】uGUIを使った アプリ制作について](https://reader033.vdocuments.pub/reader033/viewer/2022050812/58ed87e21a28aba1388b457d/html5/thumbnails/27.jpg)
ActorsComputerEntertainment 27
UI>Buttonを追加します。それから、ボタンを押された時のアクションを追加してみます。
2:uGUIとは
![Page 28: 【Unity】uGUIを使った アプリ制作について](https://reader033.vdocuments.pub/reader033/viewer/2022050812/58ed87e21a28aba1388b457d/html5/thumbnails/28.jpg)
ActorsComputerEntertainment 28
ボタンからスクリプトを呼び出します。OnClickの「+」ボタンを押します。
2:uGUIとは
![Page 29: 【Unity】uGUIを使った アプリ制作について](https://reader033.vdocuments.pub/reader033/viewer/2022050812/58ed87e21a28aba1388b457d/html5/thumbnails/29.jpg)
ActorsComputerEntertainment 29
続けて、プログラムを配置したオブジェクトを選択し、プログラムのメソッドを選択します。
2:uGUIとは
![Page 30: 【Unity】uGUIを使った アプリ制作について](https://reader033.vdocuments.pub/reader033/viewer/2022050812/58ed87e21a28aba1388b457d/html5/thumbnails/30.jpg)
ActorsComputerEntertainment 30
3:ライブラリ、ショートカットの紹介
![Page 31: 【Unity】uGUIを使った アプリ制作について](https://reader033.vdocuments.pub/reader033/viewer/2022050812/58ed87e21a28aba1388b457d/html5/thumbnails/31.jpg)
ActorsComputerEntertainment 31
ヒエラルキーの表示の切り替え
ショートカットキーAlt+Shift+a
でON/OFFを切り替えられる
3:ライブラリ、ショートカットの紹介
![Page 32: 【Unity】uGUIを使った アプリ制作について](https://reader033.vdocuments.pub/reader033/viewer/2022050812/58ed87e21a28aba1388b457d/html5/thumbnails/32.jpg)
ActorsComputerEntertainment 32
ヒエラルキーのアクティブ切り替えをチェックボックスで切り替えられると便利です。
3:ライブラリ、ショートカットの紹介
![Page 33: 【Unity】uGUIを使った アプリ制作について](https://reader033.vdocuments.pub/reader033/viewer/2022050812/58ed87e21a28aba1388b457d/html5/thumbnails/33.jpg)
ActorsComputerEntertainment 33
ヒエラルキーのアクティブ切り替えをチェックボックスで切り替えられると便利です。
3:ライブラリ、ショートカットの紹介
![Page 34: 【Unity】uGUIを使った アプリ制作について](https://reader033.vdocuments.pub/reader033/viewer/2022050812/58ed87e21a28aba1388b457d/html5/thumbnails/34.jpg)
ActorsComputerEntertainment 34
アクティブ切り替え表示の参考コガネブログ
【Unity】Hierarchyにゲームオブジェクトがアクティブかどうかを変更するトグルを表示するエディタ拡張
http://baba-s.hatenablog.com/entry/2015/04/28/121747
3:ライブラリ、ショートカットの紹介
![Page 35: 【Unity】uGUIを使った アプリ制作について](https://reader033.vdocuments.pub/reader033/viewer/2022050812/58ed87e21a28aba1388b457d/html5/thumbnails/35.jpg)
ActorsComputerEntertainment 35
アニメーションの追加
簡単なアニメーション(移動、拡大縮小、フェードインフェードアウト)は、
プログラムで書いたほうが手早く作れます。
3:ライブラリ、ショートカットの紹介
![Page 36: 【Unity】uGUIを使った アプリ制作について](https://reader033.vdocuments.pub/reader033/viewer/2022050812/58ed87e21a28aba1388b457d/html5/thumbnails/36.jpg)
ActorsComputerEntertainment 36
3:ライブラリ、ショートカットの紹介
DOTwevenhttp://dotween.demigiant.com/
![Page 37: 【Unity】uGUIを使った アプリ制作について](https://reader033.vdocuments.pub/reader033/viewer/2022050812/58ed87e21a28aba1388b457d/html5/thumbnails/37.jpg)
ActorsComputerEntertainment 37
DOTweenの使い方Tools>DOTWeenUnityPanelを表示し、Setup DOTweenボタンを押す
3:ライブラリ、ショートカットの紹介
![Page 38: 【Unity】uGUIを使った アプリ制作について](https://reader033.vdocuments.pub/reader033/viewer/2022050812/58ed87e21a28aba1388b457d/html5/thumbnails/38.jpg)
ActorsComputerEntertainment 38
4:サンプルプロジェクトの解説
![Page 39: 【Unity】uGUIを使った アプリ制作について](https://reader033.vdocuments.pub/reader033/viewer/2022050812/58ed87e21a28aba1388b457d/html5/thumbnails/39.jpg)
ActorsComputerEntertainment 39
画面のスライドについて※プロジェクトファイルをご参照ください
4:サンプルプロジェクトの解説
![Page 40: 【Unity】uGUIを使った アプリ制作について](https://reader033.vdocuments.pub/reader033/viewer/2022050812/58ed87e21a28aba1388b457d/html5/thumbnails/40.jpg)
ActorsComputerEntertainment 40
ドラッグアンドドロップについて※プロジェクトファイルをご参照ください
4:サンプルプロジェクトの解説
![Page 41: 【Unity】uGUIを使った アプリ制作について](https://reader033.vdocuments.pub/reader033/viewer/2022050812/58ed87e21a28aba1388b457d/html5/thumbnails/41.jpg)
ActorsComputerEntertainment 41
1:プロジェクトの設定 2:uGUIとは 3:ライブラリ、ショートカットの紹介 4:サンプルプロジェクの解説
まとめ