関西Unity勉強会

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

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

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

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

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

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

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

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

嫌いなもの：とくになし

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



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

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

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

• UNIXのOSを作っている会社にはいる


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

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

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

• フリーになる。（1999年頃）


好きなゲーム

Diablo
2∼４人でPTを組ん
で冒険するRPG



好きなゲーム

WarCraft3
2vs2で戦うRTS



好きなゲーム

CounterStrike
8人程度でチームを
組んで戦う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

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



UnityのGUIの実装の特徴
宣言
//Button
Debug.Log("Click Button!");
}

処理

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


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

OnGUI①

OnGUI is called for rendering and handling
OnGUI② GUI events.
OnGUIはレンダリングとイベントハンドリングで呼ばれる。
これはすなわち１フレームの間に数回呼ばれる可能性があるとこを

OnPostRender 意味している。



GUIのScriptは任意の
GameObjectに設定する
ことで動作する

左図では、カメラオブジェク
トにGUISample1のScriptを
設定している。


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

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

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


Scriptを開く

Scriptをダブルクリック



Scriptの編集

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


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
Debug.Log("Click Button! ");
}
}
}

※編集したら保存してください。


GUIのScriptを設定
作ったScriptをMainCamera
にDrag&Dropする



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
Debug.Log("Click Button! "); GUIの実装はこのメソッドの中に書きます。
}
} 新規ファイル時にはないので追加してください。
}



各Widgetの解説



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

•クリックはボタンを離した時に
発生します。
clickCount++;
Debug.Log("Click Button! "+clickCount);
}

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



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

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

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



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にも設定できます。


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);
＜略＞



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



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



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



SelectionGrid
• 基本的に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);
} ２で折り返す。
}



Widgetのスタイルを変更



ボタンの外観を変更

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に適用


Focused画像
Normal画像
HoverとActive画像

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



スタイルの設定

public GUIStyle btnStyle;
Skinに設定すると全体に
void OnGUI(){
GUI.skin.button = btnStyle; 反映される。

if(GUI.Button(new Rect(10, 10, 150, 40), "Hello World")){
}

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



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

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


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

作成したSkinをScriptに
このカスタムスタイルの
設定
名前、後で使うときに必
要になります。



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

void OnGUI(){
GUI.skin = mySkin;
if(GUI.Button(new Rect(10, 10, 150, 40), "Hello World", "MyButton")){
}

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


日本語表示
別ファイルに定義

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

GUIの実装

}

if(GUI.Button(new Rect(10, 60, 200, 40), conststrings.HELLO)){
}

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


Widgetの配置



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


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

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



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の位置を起点に配置できる。


Screen
200
200
Group XY(200, 200)
50
50 Button
XY(50, 50)



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

void OnGUI(){
GUILayout.BeginArea(new Rect(300, 230, 200, 100)); 矩形範囲を指定。

GUILayout.Label("Label1");
BeginAreaから
GUILayout.Button("Button 1");
GUILayout.Button("Button 2", GUILayout.Width(70));
EndArea内の

GUILayout.EndArea(); Widgetを矩形内に
}
配置する。


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

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

GUILayout
GUILayout.Button("Button 1");


入れ子で宣言できる
void OnGUI(){

GUILayout.BeginArea(new Rect(40, 40, 200, 300), "box");
GUILayout.Button("Button1");
縦に配置

GUILayout.BeginVertical();
GUILayout.EndVertical();

GUILayout.BeginHorizontal(); 横に配置
GUILayout.EndHorizontal();

新たな矩形領域を配置 GUILayout.BeginArea(new Rect(40, 40, 100, 100), "box");
GUILayout.EndArea();

GUILayout.EndArea();
}



次回予告



NGUIの使い方



ex2Dの使い方



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

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



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



関西Unity勉強会

More Related Content

What's hot

Viewers also liked

Similar to 関西Unity勉強会

More from Masafumi Terazono

関西Unity勉強会