折角NGUI買ったのですが使えてません。全然分かりません。
分からないなりにボタンぐらいはおけるようになったのでまとめておきます。
練習用に作ったサンプル
- 画面にCubeを表示
- 右矢印ボタンでCubeを右回転
- 左矢印ボタンでCubeを左回転
動いたけど分からないところだらけです。
正しいやり方は定かじゃないですが動いたのでヨシ！
※Unity4.2リリースされましたがまだダウンロードしてません。
この記事書いてるときはUnity4.1.5f1＋NGUI2.6.3です。
では行ってみましょー。
つくりかた
１．プロジェクトの作成
いつもどーり。
 |
| testNGUIButtonってプロジェクトを作成 |
２．Cubeの作成、カメラの調整
・Hierarchy->Create->Cube
・座標(0,0,0)、角度(0,0,0)、スケール(1,1,1)
・Hierarchy->Create->Direction light
・座標とかそのまま
・HierarchyにあるMain Cameraを調整
・座標(0,0,-2)、角度(0,0,0)、スケール(1,1,1)
 |
| Cube表示完了 |
３．NGUIのインポート
・Window->Asset Store->購入済み一覧->NGUI->Import
フォントとか作るのめんどいのでサンプル込みで全部Importします。
 |
| 全部入りでインポート |
 |
| Projectビューに追加された |
ここにあるFantasy AtlasとFantasy Fontを使います。
４．NGUIのUIを作る
・NGUI->Open the UI Wizard
 |
| UI Wizardを開く |
LayerとCameraはデフォルトのままでCreate Your UIを押す
 |
| UIの作成 |
HierarchyにUIRoot、Camera、Anchor、Panelが追加されます。
ここのPanelにNGUIで作成する要素を追加していくみたいです。
MainCameraとは別にNGUI用のCameraが追加されますが、
ここらへんほんとさっぱり分かりません。
とりあえずカメラが重なってるとうまく表示できなかったのでUIRootをずらしました。
・UIRootの座標を(0,3,0)に移動(メインカメラと離す)
 |
| NGUIのUIを追加。メインカメラと重ならないように移動。 |
この辺り説明してる資料とかブログとかあれば誰か教えてください…
５．NGUI Buttonを作る
・NGUI->Open the Widget Wizard
 |
| Widget Wizardを開く |
・FontをNGUIのサンプルからドラッグ
・TemplateはButtonを選択
・Back GroundはFlat Outlineを選択
・Add toが"Panel"になっていることを確認してAdd toボタンを押す
 |
| PanelにNGUIボタンを追加 |
実行すると分かりますがマウスオーバーやクリック時のエフェクトまであります。
あら簡単！
 |
| ボタンが追加された |
・ButtonのBackgroundを選択して、
・Scaleを(50,50)に変更
 |
| ボタンの背景サイズ変更 |
・Scaleを(50,50)に変更
・テキストを">>"に変更
 |
| ボタンのテキスト変更 |
・座標を(30,-50,0)に移動
・NGUI->Attach a Colliderを押す
→緑の枠(Collider)のサイズが自動調整される
・ボタンの名前を"RightButton"に変更
 |
| ボタンの調整 |
 |
| 名前を分かりやすく変更 |
 |
| ２つのボタンができた |
６．Cube用スクリプトを用意
・Project->Create->C# Script・名前をCubeScriptに変更
・内容を下記のように変更
using UnityEngine;
using System.Collections;
public class CubeScript : MonoBehaviour
{
/// <summary>右ボタン押してるか</summary>
private bool isRightButtonPressed;
/// <summary>左ボタン押してるか</summary>
private bool isLeftButtonPressed;
void Update()
{
if (this.isRightButtonPressed)
{
//右回転
this.transform.Rotate(0, 100 * Time.deltaTime, 0);
}
else if (this.isLeftButtonPressed)
{
//左回転
this.transform.Rotate(0, -100 * Time.deltaTime, 0);
}
}
/// <summary>右ボタン押された</summary>
void RightButtonPressed() { this.isRightButtonPressed = true; }
/// <summary>左ボタン離れた</summary>
void RightButtonReleased() { this.isRightButtonPressed = false; }
/// <summary>左ボタン押された</summary>
void LeftButtonPressed() { this.isLeftButtonPressed = true; }
/// <summary>左ボタン離れた</summary>
void LeftButtonReleased() { this.isLeftButtonPressed = false; }
}
 |
| CubeScript.cs |
・CubeにこのScriptを適用
 |
| 忘れないうちに適用 |
７．ボタンからスクリプトを呼び出す設定
NGUIのボタンに戻ります。RightButtonを選択した状態でInspectorビューを見ると
UI Button XXXってスクリプトがいくつか見つかります。
これらがマウスオーバーやクリック時のエフェクトを設定してるんですね。
 |
| いろんなスクリプト |
・RightButtonを選択した状態で
・Add Component->NGUI->Interaction->Button Message
・追加されたButton Messageのプロパティを下記のように変更
・TargetにCubeをドラッグ＆ドロップ
・FunctionNameにRightButtonPressed(CubeScript内の関数名)
・TriggerをOnPress
Triggerは6種類から選べます。
・OnClick(クリックされた)
押して、離した瞬間に発生するようです。
スマホでも同じ。
・OnMouseOver(マウスが乗った)
マウスが乗るだけでクリックしなくても発生します。
スマホでは発生しません。
・OnMouseOut(マウスが外れた)
マウスが乗って外れるタイミングで発生します。
スマホでは発生しません。
・OnPress(押された)
マウスで押された瞬間発生します。
スマホの場合、タッチされた瞬間発生します。
・OnRelease(離された)
マウスで押され、離された瞬間発生します。
スマホの場合、タッチが外れた瞬間に発生します。
・OnDoubleClick(ダブルクリックされた)
マウスでダブルクリックされた時に発生します。
スマホの場合もうまくダブルタップを検出できるようです。
ざっとみてOnPress、OnReleaseが使えそうだったので選びました。
全部で４つのUI Button Messageを追加します。
- RightButton.OnPress
- RightButton.OnRelease
- LeftButton.OnPress
- LeftButton.OnRelease
 |
| こんな感じ |
動作的にはTarget.SendMessage(FunctionName)してるだけでしょうねー。
IncludeChildlenのチェックを入れると
Target.BroadcastMessage(FunctionName)されるんだと思います。
IncludeChildlenのチェックを入れると
Target.BroadcastMessage(FunctionName)されるんだと思います。
完成
 |
| 回転中 |
気になる点
ただのボタンとして使うならこれで十分ですが十字キーみたいな使い方を考えると問題がでてきます。
いちいち指を離さないと次のボタンが押せない
作らなくてもありました。
bool UICamera.stickyPress = falseとするだけで解決です！
