View
455
Download
3
Category
Preview:
Citation preview
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とは ３：ライブラリ、ショートカットの紹介 ４：サンプルプロジェクの解説
まとめ
Recommended