uGUIを使ったアプリ制作について

ファイルはこちらactorscomputer.com/test/hatchuptest.zip

ActorsComputerEntertainment 2

自己紹介

ActorsComputerEntertainment 3

坂本倫朗（Actors Computer Entertainment）

Unity、Adobe AIRのゲーム制作（フリー12年目）デジタルハリウッド非常勤講師（12年目）趣味はソーシャルダンス、ピアノhttp://site316.comhttps://www.facebook.com/michiro.sakamotosakamotomichiro

ActorsComputerEntertainment 4

いままで講師として教えた経験をもとに、Amazonから電子書籍を出しています。

『自分を変えずに結果を出す21時間理論』

卒業制作、課題提出のペースランナーに

ActorsComputerEntertainment 5

本題です

ActorsComputerEntertainment 6

uGUIを使ったアプリ制作について

ActorsComputerEntertainment 7

ほぼ、出来上がっているものを使って説明します。

ActorsComputerEntertainment 8

１：プロジェクトの設定

ActorsComputerEntertainment 9

File>BuildSettingsから、Androidに切り替える。

１：プロジェクトの設定

ActorsComputerEntertainment 10

Game Viewの比率を変更して、9:16にする。

１：プロジェクトの設定

ActorsComputerEntertainment 11

photoshopから画像アセットを生成すると便利に取り込めます

１：プロジェクトの設定

ActorsComputerEntertainment 12

card-assetsフォルダに取り込まれたところ

１：プロジェクトの設定

ActorsComputerEntertainment 13

２Dで画像ファイルを使用するために、ファイルはSpriteに変更しておきます。

１：プロジェクトの設定

ActorsComputerEntertainment 14

２：uGUIとは

ActorsComputerEntertainment 15

uGUIは、Unity上でGUIの構築を助けてくれる機能です。

２：uGUIとは

ActorsComputerEntertainment 16

uGUIを使わず、プログラムを書いても

GUIは作れます。

２：uGUIとは

ActorsComputerEntertainment 17

ですがuGUIを使うとUI素材の配置が簡単です。

２：uGUIとは

ActorsComputerEntertainment 18

GameObject＞UI＞Imageを配置してみます。

２：uGUIとは

ActorsComputerEntertainment 19

ヒエラルキーにUIが登場しました。

２：uGUIとは

ActorsComputerEntertainment 20

ヒエラルキーに

Canvas　ImageEventSystemというものが追加されてます。

２：uGUIとは

ActorsComputerEntertainment 21

uGUIのパーツはヒエラルキー上の、Canvasというオブジェクトにまとめられます。

２：uGUIとは

ActorsComputerEntertainment 22

EventSystemは、「uGUI上の①入力、②タッチ、③変化などを監視する役」です。

２：uGUIとは

ActorsComputerEntertainment 23

EventSystemにUIのパーツを入れてはいけません。

２：uGUIとは

ActorsComputerEntertainment 24

次に、Canvasの画面の領域が、デザインデータ（PSD）のサイズと一致するように、Canvasを調整します。

２：uGUIとは

ActorsComputerEntertainment 25

UI Scale Mode →Scale Width Screen Size

２：uGUIとは

ActorsComputerEntertainment 26

Reference Resolution X720 Y1280にします。

２：uGUIとは

ActorsComputerEntertainment 27

UI＞Buttonを追加します。それから、ボタンを押された時のアクションを追加してみます。

２：uGUIとは

ActorsComputerEntertainment 28

ボタンからスクリプトを呼び出します。OnClickの「＋」ボタンを押します。

２：uGUIとは

ActorsComputerEntertainment 29

続けて、プログラムを配置したオブジェクトを選択し、プログラムのメソッドを選択します。

２：uGUIとは

ActorsComputerEntertainment 30

３：ライブラリ、ショートカットの紹介

ActorsComputerEntertainment 31

ヒエラルキーの表示の切り替え

ショートカットキーAlt+Shift+a

でON/OFFを切り替えられる

３：ライブラリ、ショートカットの紹介

ActorsComputerEntertainment 32

ヒエラルキーのアクティブ切り替えをチェックボックスで切り替えられると便利です。

３：ライブラリ、ショートカットの紹介

ActorsComputerEntertainment 33

ヒエラルキーのアクティブ切り替えをチェックボックスで切り替えられると便利です。

３：ライブラリ、ショートカットの紹介

ActorsComputerEntertainment 34

アクティブ切り替え表示の参考コガネブログ

【Unity】Hierarchyにゲームオブジェクトがアクティブかどうかを変更するトグルを表示するエディタ拡張

http://baba-s.hatenablog.com/entry/2015/04/28/121747

３：ライブラリ、ショートカットの紹介

ActorsComputerEntertainment 35

アニメーションの追加

簡単なアニメーション（移動、拡大縮小、フェードインフェードアウト）は、

プログラムで書いたほうが手早く作れます。

３：ライブラリ、ショートカットの紹介

ActorsComputerEntertainment 36

３：ライブラリ、ショートカットの紹介

DOTwevenhttp://dotween.demigiant.com/

ActorsComputerEntertainment 37

DOTweenの使い方Tools＞DOTWeenUnityPanelを表示し、Setup DOTweenボタンを押す

３：ライブラリ、ショートカットの紹介

ActorsComputerEntertainment 38

４：サンプルプロジェクトの解説

ActorsComputerEntertainment 39

画面のスライドについて※プロジェクトファイルをご参照ください

４：サンプルプロジェクトの解説

ActorsComputerEntertainment 40

ドラッグアンドドロップについて※プロジェクトファイルをご参照ください

４：サンプルプロジェクトの解説

ActorsComputerEntertainment 41

　　　 １：プロジェクトの設定　　　２：uGUIとは　　　３：ライブラリ、ショートカットの紹介　　　４：サンプルプロジェクの解説

まとめ