関西unity勉強会

Re:Kayo-System Co.,Ltd.

Twitter @yokmamaNow Loading. Please Wait ...

第一回関西Unity勉強会UnityのGUIの作り方2012/5/26 ECC ECCコンピュータ専門学校3号館 2階ハッシュタグ　#kansaiunity

Wednesday, May 23, 2012

http://twitter.com/search?q=%23kansaiunity

http://twitter.com/search?q=%23kansaiunity


自己紹介氏名　　　：寺園聖文（てらぞの　まさふみ）

肩書　　　：株式会社Re:Kayo-System　代表取締役社長

活動拠点　：神戸近郊～日本→海外行きたい

著書　　　：「１０日でおぼえるAndroidアプリ開発入門教室」著（翔泳社）

　　　　　　「HTML5によるAndroidアプリ開発入門」監修（日経BP）

アプリ　　：「JUST PLAYER」「Skip Memo」「ふりがなオートマチック」等

好きなもの：アニメ、決して萌えじゃない、見てるけど、あくまで研究の一環

嫌いなもの：とくになし

最近のテーマ：電子工作、運動すること、英語



ゲーム歴（上京）• 中学校の頃PC-88をもっている友人の家に入り浸ってベーマガのコードを写経して遊んでいた。

• ファミリーベーシックを買ってゲームを作って投稿していた。

• 大学に行くほど頭よくなかったので地元の高専付属の大学に進学。

• UNIXのOSを作っている会社にはいるWednesday, May 23, 2012


ゲーム歴（転落）• 普通のSEになるけどなんか違うとおもって、家庭用ゲームを作っている会社にはいる。

• DIABLOに出会ってネットワークゲームにハマる。

•友人に誘われてチャットサービスを作る会社にはいる。

•フリーになる。（1999年頃）Wednesday, May 23, 2012


好きなゲーム

Diablo2～４人でPTを組んで冒険するRPG



好きなゲーム

WarCraft32vs2で戦うRTS



好きなゲーム

CounterStrike8人程度でチームを組んで戦うFPS



好きなゲーム

FinalFantasy１人用RPG



項目• UnityのGUIシステム•各Widgetの解説•Widgetのスタイルを変更•Widgetの配置を制御•次回予告



ゲームを作るにあたり、GUIは最も気を使う部分で

ある



•シンプル•統一されたデザイン•ストレスのないレスポンス•直感的な操作性•バグのないシステム



しかし我々に与えられたツールはとても貧弱である



このような高度なツールを我々Unityerは使うことができない！



我々はそれらを受け入れた上で、素晴らしいゲームを作らな

くてはならないのだ



UnityのGUIシステム



UnityのGUIは毎フレーム描画されている



ウィンドウアプリの流れ

イベント処理

描画処理

ディスプレイイベントループ

描画システム



処理ルーチン

描画ルーチンディスプレイ

タイマー（６０FPS)

ゲームの大まかな流れ



Unityの主なイベントAwake　GameObjectがシーン上に配置された時に、一度だけ呼ばれる。

Start　GameObjectが動作する(Update)前に、一度だけ呼ばれる。GameObjectが非アクティブの時は呼ばれない。

Update　コンポーネントの処理を実装する関数。1フレームに一回呼ばれる。

OnGUI　GUIに関する処理を実装する関数



OnGUI処理OnGUIは描画処理の１つで、GUIの描画を実装します。下の例はButton

//Buttonif(GUI.Button(new Rect(100, 110, 200, 30), "This is Button")){ Debug.Log("Click Button!");}



UnityのGUIの実装の特徴//Buttonif(GUI.Button(new Rect(100, 110, 200, 30), "This is Button")){ Debug.Log("Click Button!");}

宣言と処理が同じ場所に書かれている。こういうのをイミディエイトモードモデ

ルというらしいです。

宣言

処理



１フレーム

OnGUI①

OnPreRender

OnPostRender

OnGUI②

OnGUIは１フレームで２回以上呼ばれる場合がある

OnGUI is called for rendering and handling GUI events.

OnGUIはレンダリングとイベントハンドリングで呼ばれる。これはすなわち１フレームの間に数回呼ばれる可能性があるとこを

意味している。



GUIのScriptは任意のGameObjectに設定する

ことで動作する

左図では、カメラオブジェクトにGUISample1のScriptを

設定している。



①Createをクリック②C# Scriptを選択

GUIを実装するためのScriptを生成

③生成したら名前をつけてください。



Scriptを開く

Scriptをダブルクリック



Scriptの編集

こいつがMonoEditorScriptの編集からデバッグまで出来る



GUIの実装using UnityEngine;using System.Collections;

[ExecuteInEditMode()]public class MyGUI : MonoBehaviour {

// Use this for initialization void Start () { } // 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! "); } }}

赤枠の２行を追加する

※編集したら保存してください。Wednesday, May 23, 2012


GUIのScriptを設定作ったScriptをMainCamera

にDrag&Dropする



using UnityEngine;using System.Collections;

[ExecuteInEditMode()]public class MyGUI : MonoBehaviour {

// Use this for initialization void Start () { } // 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! "); } }}

[ExecuteInEditMode()]これをつけておくと、アプリを実行しなくてもゲーム画面にGUIのレンダリングイメージが表示

されます。

OnGUIGUIの実装はこのメソッドの中に書きます。

新規ファイル時にはないので追加してください。

Scriptの説明



各Widgetの解説



Button

if(GUI.Button(new Rect(100, 110, 200, 30), "This is Button")){ clickCount++; Debug.Log("Click Button! "+clickCount);}

•クリックされると、GUI.Buttonの戻り値がTrueになります。

•クリックはボタンを離した時に発生します。

※メモ　Rect（左上X,　左上Y,　幅、高さ）



RepeatButton

if(GUI.RepeatButton(new Rect(100, 150, 200, 30), "This is Repeat Button")){ clickCount++; Debug.Log("Click Button! "+clickCount);}

•クリックされると、GUI.RepeatButtonの戻り値がTrueになります。

•クリック中は常にTrueになります。



Label

//Label TextGUI.Label (new Rect(140, 70, 200, 30), "This is Label"); //Label TextureGUI.Label (new Rect(100, 70, 30, 30), icon);

•任意の場所に文字や画像を配置できます。

※メモ　ここではじめて画像がでてきましたが、画像はButtonや他のWidgetにも設定できます。



HorizontalSliderとVerticalSlider

//HorizontalSliderfloat hv = GUI.HorizontalSlider(new Rect(100, 200, 200, 30), horizontalSliderValue, 0.0f, 100.0f);if(hv != horizontalSliderValue){ horizontalSliderValue = hv; Debug.Log("horizontal slider! "+horizontalSliderValue);} //VerticalSliderfloat vv = GUI.VerticalSlider(new Rect(100, 230, 30, 100), verticalSliderValue, 0.0f, 100.0f);＜略＞

•スライダーの戻り値は現在の値です。

•変更は設定した値と比較することで検出します。

初期値を設定する必要がある。



TextFieldとTextArea

//TextFieldstring tf = GUI.TextField(new Rect(100, 350, 200, 30), textFieldValue, 10);if(tf != textFieldValue){ textFieldValue = tf; Debug.Log("textfield! "+textFieldValue);} //TextAreastring ta = GUI.TextArea(new Rect(100, 390, 200, 60), textAreaValue);if(ta != textAreaValue){ textAreaValue = ta; Debug.Log("textArea! "+textAreaValue);}

•Textの戻り値は現在の文字列です。

•変更は設定した文字列と比較することで検出します。



Toggle

bool b = GUI.Toggle(new Rect(100, 460, 200, 30), toggleState, "This is Toggle");if(b != toggleState){ toggleState = b; Debug.Log("toggle! "+toggleState);}

•Toggleの戻り値は現在のチェック状態です。

•変更は設定した状態と比較することで検出します。



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); }}

Toolbar•Toolbarの戻り値は現在の選択番号です。

•変更は設定した番号と比較することで検出します。



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); }}

•基本的にToolBarと同じですが、折り返しの番号を設定することで２列以上の選択ができます。

• SelectionGridの戻り値は現在の選択番号です。

•変更は設定した番号と比較することで検出します。

２で折り返す。



Widgetのスタイルを変更



ボタンの外観を変更

public class StyleSample1 : MonoBehaviour { public GUIStyle btnStyle; void OnGUI(){ if(GUI.Button(new Rect(10, 10, 150, 40), "Hello World", btnStyle)){ Debug.Log("Button Click1!"); } }}

GUIStyleを外観を変更したButtonに適用する

GUIStyleをPublicで宣言

宣言したStyleをButtonに適用



ScriptにPublicで宣言したStyleにはUnityからアクセスしNormal,Hover,Active,Focusedにボタンの画像をD&Dで設定する。

Focused画像Normal画像HoverとActive画像



スタイルの設定

public class StyleSample1 : MonoBehaviour { public GUIStyle btnStyle; 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!"); } }}

Skinに設定すると全体に反映される。

メモ：GUIに関する操作はOnGUIで行うこと。



スキンの生成ProjectViewでCreateから独自のSkinを生成できます。

生成されたスキンは標準スタイルの他にカスタムのスタイルをもつことができます。



カスタムスタイルの定義カスタムスタイルを定義する数だけ数字を設定

このカスタムスタイルの名前、後で使うときに必要になります。

作成したSkinをScriptに設定



スキンの設定

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!"); } }}

Publicで宣言したSkinはデフォルトではNullです。Unity側で生成したSkinを設定し、それをGUI.skinに設定してください。（前ページを参照）

カスタムスタイルを適用する場合はスタイル名をいれてください。



日本語表示

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!");}

public static readonly string HELLO = "こんにちは";

別ファイルに定義

GUIの実装

※メモ　UnityはUTF-16でないと文字化けするため、別途UTF-16で編集したファイルに日本語を定義し、その定数を使うとよい。



Widgetの配置



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"); } GUI.DragWindow(new Rect(0, 0, 10000, 20));}

•Windowは任意の場所に新しい描画領域をもつWindowを表示します。

• GUI.DragWindowをつかうとWindowにドラッグ可能な領域を設定できます。

大きい値を設定してもWindowのサイズに合わ

せられる



マウスでドラッグで移動できる。

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

DragWindow



Group

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();

BeginGroupからEndGroupの間に宣言されたWidgetはGroupで定義された領域を起点に配置されます。

Groupの領域をRectで指定

Groupの位置を起点に配置できる。



Group XY(200, 200)

200200

ButtonXY(50, 50)

5050

Screen



GUILayout

void OnGUI(){ GUILayout.BeginArea(new Rect(300, 230, 200, 100)); GUILayout.Label("Label1"); GUILayout.Label("Label2"); GUILayout.Button("Button 1"); GUILayout.Button("Button 2", GUILayout.Width(70)); GUILayout.EndArea();}

GUILayoutは矩形指定、あるいは縦、横の配置を設定することができる。

矩形範囲を指定。BeginAreaからEndArea内のWidgetを矩形内に配置する。



GUILayoutの特徴GUILayoutで使うWidgetはGUI.Buttonなどではなく GUILayout.Buttonのように専用のものを使う必要があります。そのかわり、Rectを指定して位置を設定する必要はありません。

GUILayout.Button("Button 1");

GUI.Button(new Rect(100, 110, 200, 30), "This is Button")通常

GUILayout



入れ子で宣言できる 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(); }

縦に配置

横に配置

新たな矩形領域を配置



次回予告



NGUIの使い方



ex2Dの使い方



次回の予定時期：　７月頃場所：　未定（随時募集中）内容：　未定

勉強会なら、アセットの解説等を含めたハンズオン、ハッカソンもやってみたいですね。



ご清聴ありがとうございました


関西unity勉強会

Documents