Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

関西Unity勉強会

12,078 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

×