関西Unity勉強会

11,751 views

Published on

関西Unity勉強会

  1. 1. Now Loading. Please Wait ... Twitter @yokmama 第一回関西Unity勉強会 UnityのGUIの作り方 2012/5/26 ECC ECCコンピュータ専門学校3号館 2階 ハッシュタグ #kansaiunity Re:Kayo-System Co.,Ltd.Wednesday, May 23, 2012
  2. 2. 自己紹介 氏名   :寺園聖文(てらぞの まさふみ) 肩書   :株式会社Re:Kayo-System 代表取締役社長 活動拠点 :神戸近郊∼日本→海外行きたい 著書   :「10日でおぼえるAndroidアプリ開発入門教室」著(翔泳社)       「HTML5によるAndroidアプリ開発入門」監修(日経BP) アプリ  :「JUST PLAYER」「Skip Memo」「ふりがなオートマチック」等 好きなもの:アニメ、決して萌えじゃない、見てるけど、あくまで研究の一環 嫌いなもの:とくになし 最近のテーマ:電子工作、運動すること、英語 Re:Kayo-System Co.,Ltd.Wednesday, May 23, 2012
  3. 3. ゲーム歴(上京) • 中学校の頃PC-88をもっている友人の家に入り 浸ってベーマガのコードを写経して遊んでいた。 • ファミリーベーシックを買ってゲームを作って投 稿していた。 • 大学に行くほど頭よくなかったので地元の高専 付属の大学に進学。 • UNIXのOSを作っている会社にはいる Re:Kayo-System Co.,Ltd.Wednesday, May 23, 2012
  4. 4. ゲーム歴(転落) • 普通のSEになるけどなんか違うとおもって、 家庭用ゲームを作っている会社にはいる。 • DIABLOに出会ってネットワークゲームにハ マる。 • 友人に誘われてチャットサービスを作る会社 にはいる。 • フリーになる。(1999年頃) Re:Kayo-System Co.,Ltd.Wednesday, May 23, 2012
  5. 5. 好きなゲーム Diablo 2∼4人でPTを組ん で冒険するRPG Re:Kayo-System Co.,Ltd.Wednesday, May 23, 2012
  6. 6. 好きなゲーム WarCraft3 2vs2で戦うRTS Re:Kayo-System Co.,Ltd.Wednesday, May 23, 2012
  7. 7. 好きなゲーム CounterStrike 8人程度でチームを 組んで戦うFPS Re:Kayo-System Co.,Ltd.Wednesday, May 23, 2012
  8. 8. 好きなゲーム FinalFantasy 1人用RPG Re:Kayo-System Co.,Ltd.Wednesday, May 23, 2012
  9. 9. 項目 • UnityのGUIシステム • 各Widgetの解説 • Widgetのスタイルを変更 • Widgetの配置を制御 • 次回予告 Re:Kayo-System Co.,Ltd.Wednesday, May 23, 2012
  10. 10. ゲームを作るにあたり、 GUIは最も気を使う部分で ある Re:Kayo-System Co.,Ltd.Wednesday, May 23, 2012
  11. 11. • シンプル • 統一されたデザイン • ストレスのないレスポンス • 直感的な操作性 • バグのないシステム Re:Kayo-System Co.,Ltd.Wednesday, May 23, 2012
  12. 12. しかし我々に与えられたツールは とても貧弱である Re:Kayo-System Co.,Ltd.Wednesday, May 23, 2012
  13. 13. このような高度なツールを我々Unityerは使 うことができない! Re:Kayo-System Co.,Ltd.Wednesday, May 23, 2012
  14. 14. 我々はそれらを受け入れた上 で、素晴らしいゲームを作らな くてはならないのだ Re:Kayo-System Co.,Ltd.Wednesday, May 23, 2012
  15. 15. UnityのGUIシステム Re:Kayo-System Co.,Ltd.Wednesday, May 23, 2012
  16. 16. UnityのGUIは毎フ レーム描画されている Re:Kayo-System Co.,Ltd.Wednesday, May 23, 2012
  17. 17. ウィンドウアプリの流れ イベントループ ディスプレイ イベント処理 描画処理 描画システム Re:Kayo-System Co.,Ltd.Wednesday, May 23, 2012
  18. 18. ゲームの大まかな流れ タイマー(60FPS) 処理ルーチン 描画ルーチン ディスプレイ Re:Kayo-System Co.,Ltd.Wednesday, May 23, 2012
  19. 19. Unityの主なイベント Awake GameObjectがシーン上に配置された時に、一度だけ呼ばれる。 Start GameObjectが動作する(Update)前に、一度だけ呼ばれる。 GameObjectが非アクティブの時は呼ばれない。 Update コンポーネントの処理を実装する関数。1フレームに一回呼ばれ る。 OnGUI GUIに関する処理を実装する関数 Re:Kayo-System Co.,Ltd.Wednesday, May 23, 2012
  20. 20. OnGUI処理 OnGUIは描画処理の1つで、GUIの描 画を実装します。下の例はButton //Button if(GUI.Button(new Rect(100, 110, 200, 30), "This is Button")){ Debug.Log("Click Button!"); } Re:Kayo-System Co.,Ltd.Wednesday, May 23, 2012
  21. 21. UnityのGUIの実装の特徴 宣言 //Button if(GUI.Button(new Rect(100, 110, 200, 30), "This is Button")){ Debug.Log("Click Button!"); } 処理 宣言と処理が同じ場所に書かれている。 こういうのをイミディエイトモードモデ ルというらしいです。 Re:Kayo-System Co.,Ltd.Wednesday, May 23, 2012
  22. 22. 1フレーム OnGUIは1フレームで2回 OnPreRender 以上呼ばれる場合がある OnGUI① OnGUI is called for rendering and handling OnGUI② GUI events. OnGUIはレンダリングとイベントハンドリングで呼ばれる。 これはすなわち1フレームの間に数回呼ばれる可能性があるとこを OnPostRender 意味している。 Re:Kayo-System Co.,Ltd.Wednesday, May 23, 2012
  23. 23. GUIのScriptは任意の GameObjectに設定する ことで動作する 左図では、カメラオブジェク トにGUISample1のScriptを 設定している。 Re:Kayo-System Co.,Ltd.Wednesday, May 23, 2012
  24. 24. GUIを実装するための Scriptを生成 ②C# Scriptを選択 ①Createをクリック ③生成したら名前をつけてください。 Re:Kayo-System Co.,Ltd.Wednesday, May 23, 2012
  25. 25. Scriptを開く Scriptをダブルクリック Re:Kayo-System Co.,Ltd.Wednesday, May 23, 2012
  26. 26. Scriptの編集 こいつがMonoEditor Scriptの編集からデバッグまで出来る Re:Kayo-System Co.,Ltd.Wednesday, May 23, 2012
  27. 27. GUIの実装 using UnityEngine; using System.Collections; [ExecuteInEditMode()] public class MyGUI : MonoBehaviour { // Use this for initialization void Start () { } 赤枠の2行を追加する // Update is called once per frame void Update () { } void OnGUI(){ //Button if(GUI.Button(new Rect(100, 110, 200, 30), "This is Button")){ Debug.Log("Click Button! "); } } } ※編集したら保存してください。 Re:Kayo-System Co.,Ltd.Wednesday, May 23, 2012
  28. 28. GUIのScriptを設定 作ったScriptをMainCamera にDrag&Dropする Re:Kayo-System Co.,Ltd.Wednesday, May 23, 2012
  29. 29. Scriptの説明 using UnityEngine; [ExecuteInEditMode()] using System.Collections; これをつけておくと、アプリを実行しなくても [ExecuteInEditMode()] public class MyGUI : MonoBehaviour { ゲーム画面にGUIのレンダリングイメージが表示 // Use this for initialization されます。 void Start () { } // Update is called once per frame void Update () { } void OnGUI(){ //Button OnGUI if(GUI.Button(new Rect(100, 110, 200, 30), "This is Button")){ Debug.Log("Click Button! "); GUIの実装はこのメソッドの中に書きます。 } } 新規ファイル時にはないので追加してください。 } Re:Kayo-System Co.,Ltd.Wednesday, May 23, 2012
  30. 30. 各Widgetの解説 Re:Kayo-System Co.,Ltd.Wednesday, May 23, 2012
  31. 31. Button •クリックされると、GUI.Button の戻り値がTrueになります。 •クリックはボタンを離した時に 発生します。 if(GUI.Button(new Rect(100, 110, 200, 30), "This is Button")){ clickCount++; Debug.Log("Click Button! "+clickCount); } ※メモ Rect(左上X, 左上Y, 幅、高さ) Re:Kayo-System Co.,Ltd.Wednesday, May 23, 2012
  32. 32. RepeatButton •クリックされると、 GUI.RepeatButtonの戻り値が Trueになります。 •クリック中は常にTrueになりま す。 if(GUI.RepeatButton(new Rect(100, 150, 200, 30), "This is Repeat Button")){ clickCount++; Debug.Log("Click Button! "+clickCount); } Re:Kayo-System Co.,Ltd.Wednesday, May 23, 2012
  33. 33. Label •任意の場所に文字や画像を配置 できます。 //Label Text GUI.Label (new Rect(140, 70, 200, 30), "This is Label"); //Label Texture GUI.Label (new Rect(100, 70, 30, 30), icon); ※メモ ここではじめて画像がでてきましたが、画 像はButtonや他のWidgetにも設定できます。 Re:Kayo-System Co.,Ltd.Wednesday, May 23, 2012
  34. 34. HorizontalSliderと VerticalSlider •スライダーの戻り値は現在の値 です。 •変更は設定した値と比較するこ とで検出します。 //HorizontalSlider float hv = GUI.HorizontalSlider(new Rect(100, 200, 200, 30), horizontalSliderValue, 0.0f, 100.0f); if(hv != horizontalSliderValue){ horizontalSliderValue = hv; Debug.Log("horizontal slider! "+horizontalSliderValue); } 初期値を設定する必要がある。 //VerticalSlider float vv = GUI.VerticalSlider(new Rect(100, 230, 30, 100), verticalSliderValue, 0.0f, 100.0f); <略> Re:Kayo-System Co.,Ltd.Wednesday, May 23, 2012
  35. 35. TextFieldとTextArea •Textの戻り値は現在の文字列で す。 •変更は設定した文字列と比較す ることで検出します。 //TextField string tf = GUI.TextField(new Rect(100, 350, 200, 30), textFieldValue, 10); if(tf != textFieldValue){ textFieldValue = tf; Debug.Log("textfield! "+textFieldValue); } //TextArea string ta = GUI.TextArea(new Rect(100, 390, 200, 60), textAreaValue); if(ta != textAreaValue){ textAreaValue = ta; Debug.Log("textArea! "+textAreaValue); } Re:Kayo-System Co.,Ltd.Wednesday, May 23, 2012
  36. 36. Toggle •Toggleの戻り値は現在のチェッ ク状態です。 •変更は設定した状態と比較する ことで検出します。 bool b = GUI.Toggle(new Rect(100, 460, 200, 30), toggleState, "This is Toggle"); if(b != toggleState){ toggleState = b; Debug.Log("toggle! "+toggleState); } Re:Kayo-System Co.,Ltd.Wednesday, May 23, 2012
  37. 37. Toolbar •Toolbarの戻り値は現在の選択番 号です。 •変更は設定した番号と比較する ことで検出します。 private int toolbarValue=0; private string[] toolbarStrings = {"Toolbar1", "Toolbar2", "Toolbar3"} ; void OnGUI(){ int tb = GUI.Toolbar (new Rect (400, 70, 250, 30), toolbarValue, toolbarStrings); if(tb != toolbarValue){ toolbarValue = tb; Debug.Log("toolbar! "+toolbarValue); } } Re:Kayo-System Co.,Ltd.Wednesday, May 23, 2012
  38. 38. SelectionGrid • 基本的にToolBarと同じですが、折り返しの番号 を設定することで2列以上の選択ができます。 • SelectionGridの戻り値は現在の選択番号です。 • 変更は設定した番号と比較することで検出しま す。 private int selectionGridValue=0; private string[] selStrings = {"Grid 1", "Grid 2", "Grid 3", "Grid 4"} ; void OnGUI(){ int sg = GUI.SelectionGrid(new Rect(400, 110, 100, 60), selectionGridValue, selStrings, 2); if(sg != selectionGridValue){ toolbarValue = tb; Debug.Log("selectionGrid! "+selectionGridValue); } 2で折り返す。 } Re:Kayo-System Co.,Ltd.Wednesday, May 23, 2012
  39. 39. Widgetのスタイルを変更 Re:Kayo-System Co.,Ltd.Wednesday, May 23, 2012
  40. 40. ボタンの外観を変更 GUIStyleを外観を変更したButtonに適用する public class StyleSample1 : MonoBehaviour { public GUIStyle btnStyle; GUIStyleをPublicで宣言 void OnGUI(){ if(GUI.Button(new Rect(10, 10, 150, 40), "Hello World", btnStyle)){ Debug.Log("Button Click1!"); } } } 宣言したStyleをButtonに適用 Re:Kayo-System Co.,Ltd.Wednesday, May 23, 2012
  41. 41. Focused画像 Normal画像 HoverとActive画像 ScriptにPublicで宣言した StyleにはUnityからアクセスし Normal,Hover,Active,Focuse dにボタンの画像をD&Dで設定 する。 Re:Kayo-System Co.,Ltd.Wednesday, May 23, 2012
  42. 42. スタイルの設定 public class StyleSample1 : MonoBehaviour { public GUIStyle btnStyle; Skinに設定すると全体に void OnGUI(){ GUI.skin.button = btnStyle; 反映される。 if(GUI.Button(new Rect(10, 10, 150, 40), "Hello World")){ Debug.Log("Button Click1!"); } if(GUI.Button(new Rect(10, 60, 150, 40), "Hello World")){ Debug.Log("Button Click3!"); } } メモ:GUIに関する操作はOnGUIで行うこと。 } Re:Kayo-System Co.,Ltd.Wednesday, May 23, 2012
  43. 43. スキンの生成 ProjectViewでCreateか ら独自のSkinを生成でき ます。 生成されたスキンは標準スタイル の他にカスタムのスタイルをもつ ことができます。 Re:Kayo-System Co.,Ltd.Wednesday, May 23, 2012
  44. 44. カスタムスタイルの定義 カスタムスタイルを定義 する数だけ数字を設定 作成したSkinをScriptに このカスタムスタイルの 設定 名前、後で使うときに必 要になります。 Re:Kayo-System Co.,Ltd.Wednesday, May 23, 2012
  45. 45. スキンの設定 Publicで宣言したSkinはデフォルトではNullです。 Unity側で生成したSkinを設定し、それをGUI.skinに 設定してください。(前ページを参照) public class StyleSample1 : MonoBehaviour { public GUISkin mySkin; void OnGUI(){ GUI.skin = mySkin; if(GUI.Button(new Rect(10, 10, 150, 40), "Hello World", "MyButton")){ Debug.Log("Button Click1!"); } if(GUI.Button(new Rect(10, 60, 150, 40), "Hello World")){ Debug.Log("Button Click2!"); } } カスタムスタイルを適用する場合 } はスタイル名をいれてください。 Re:Kayo-System Co.,Ltd.Wednesday, May 23, 2012
  46. 46. 日本語表示 別ファイルに定義 public static readonly string HELLO = "こんにちは"; GUIの実装 if(GUI.Button(new Rect(10, 10, 200, 40), "Hello World")){ Debug.Log("Button Click1!"); } if(GUI.Button(new Rect(10, 60, 200, 40), conststrings.HELLO)){ Debug.Log("Button Click3!"); } ※メモ UnityはUTF-16でないと文字化けするた め、別途UTF-16で編集したファイルに日本語を定 義し、その定数を使うとよい。 Re:Kayo-System Co.,Ltd.Wednesday, May 23, 2012
  47. 47. Widgetの配置 Re:Kayo-System Co.,Ltd.Wednesday, May 23, 2012
  48. 48. Window • Windowは任意の場所に新しい描画領域を もつWindowを表示します。 • GUI.DragWindowをつかうとWindowにド ラッグ可能な領域を設定できます。 public Rect windowRect = new Rect(20, 20, 120, 50); private bool visibleWindow = false; void OnGUI(){ if(GUI.Button(new Rect(400, 200, 200, 60), "Popup Windows!")){ visibleWindow = !visibleWindow; } if(visibleWindow){ windowRect = GUI.Window(0, windowRect, DoMyWindow, "My Window"); } } void DoMyWindow(int windowID) { 大きい値を設定しても if (GUI.Button(new Rect(10, 20, 100, 20), "Hello World")){ print("Got a click"); Windowのサイズに合わ } せられる GUI.DragWindow(new Rect(0, 0, 10000, 20)); } Re:Kayo-System Co.,Ltd.Wednesday, May 23, 2012
  49. 49. DragWindow void DoMyWindow(int windowID) { if (GUI.Button(new Rect(10, 20, 100, 20), "Hello World")){ print("Got a click"); } GUI.DragWindow(new Rect(0, 0, 10000, 20)); } 20 マウスでドラッグで移 動できる。 Re:Kayo-System Co.,Ltd.Wednesday, May 23, 2012
  50. 50. Group BeginGroupからEndGroupの間に 宣言されたWidgetはGroupで定義 された領域を起点に配置されます。 Groupの領域をRectで指定 GUI.BeginGroup(new Rect(300, 10, 200, 100)); GUI.Box(new Rect(0, 0, 200, 100), "Here is Group Area"); GUI.Label(new Rect(10, 20, 100, 30), "Hello My Group"); GUI.EndGroup(); Groupの位置を起点に配置できる。 Re:Kayo-System Co.,Ltd.Wednesday, May 23, 2012
  51. 51. Screen 200 200 Group XY(200, 200) 50 50 Button XY(50, 50) Re:Kayo-System Co.,Ltd.Wednesday, May 23, 2012
  52. 52. GUILayout GUILayoutは矩形指定、あるいは 縦、横の配置を設定することができ る。 void OnGUI(){ GUILayout.BeginArea(new Rect(300, 230, 200, 100)); 矩形範囲を指定。 GUILayout.Label("Label1"); GUILayout.Label("Label2"); BeginAreaから GUILayout.Button("Button 1"); GUILayout.Button("Button 2", GUILayout.Width(70)); EndArea内の GUILayout.EndArea(); Widgetを矩形内に } 配置する。 Re:Kayo-System Co.,Ltd.Wednesday, May 23, 2012
  53. 53. GUILayoutの特徴 GUILayoutで使うWidgetはGUI.Buttonなどで はなく GUILayout.Buttonのように専用のもの を使う必要があります。そのかわり、Rectを指 定して位置を設定する必要はありません。 通常 GUI.Button(new Rect(100, 110, 200, 30), "This is Button") GUILayout GUILayout.Button("Button 1"); Re:Kayo-System Co.,Ltd.Wednesday, May 23, 2012
  54. 54. 入れ子で宣言できる void OnGUI(){ GUILayout.BeginArea(new Rect(40, 40, 200, 300), "box"); GUILayout.Button("Button1"); GUILayout.Button("Button2"); GUILayout.Button("Button3"); GUILayout.Button("Button4"); 縦に配置 GUILayout.BeginVertical(); GUILayout.Button("Button5"); GUILayout.Label("Label6"); GUILayout.Button("Button7"); GUILayout.EndVertical(); GUILayout.BeginHorizontal(); 横に配置 GUILayout.Button("Button8"); GUILayout.Label("Label9"); GUILayout.Button("Button10"); GUILayout.EndHorizontal(); 新たな矩形領域を配置 GUILayout.BeginArea(new Rect(40, 40, 100, 100), "box"); GUILayout.Button("Button11"); GUILayout.Button("Button12"); GUILayout.EndArea(); GUILayout.EndArea(); } Re:Kayo-System Co.,Ltd.Wednesday, May 23, 2012
  55. 55. 次回予告 Re:Kayo-System Co.,Ltd.Wednesday, May 23, 2012
  56. 56. NGUIの使い方 Re:Kayo-System Co.,Ltd.Wednesday, May 23, 2012
  57. 57. ex2Dの使い方 Re:Kayo-System Co.,Ltd.Wednesday, May 23, 2012
  58. 58. 次回の予定 時期: 7月頃 場所: 未定(随時募集中) 内容: 未定 勉強会なら、アセットの解説等を含めたハ ンズオン、ハッカソンもやってみたいです ね。 Re:Kayo-System Co.,Ltd.Wednesday, May 23, 2012
  59. 59. ご清聴ありがとうご ざいました Re:Kayo-System Co.,Ltd.Wednesday, May 23, 2012

×