2013年7月26日金曜日

【Unity,NGUI2.x】NGUIでボタン作成

久々Unityネタです。 ちょっとだけ時間に余裕が出来てきました。

折角NGUI買ったのですが使えてません。全然分かりません。
分からないなりにボタンぐらいはおけるようになったのでまとめておきます。

練習用に作ったサンプル



  • 画面にCubeを表示
  • 右矢印ボタンでCubeを右回転
  • 左矢印ボタンでCubeを左回転
動いたけど分からないところだらけです。
正しいやり方は定かじゃないですが動いたのでヨシ!

※Unity4.2リリースされましたがまだダウンロードしてません。
 この記事書いてるときはUnity4.1.5f1+NGUI2.6.3です。


では行ってみましょー。

つくりかた

1.プロジェクトの作成

いつもどーり。
testNGUIButtonってプロジェクトを作成

2.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表示完了

3.NGUIのインポート

・Window->Asset Store->購入済み一覧->NGUI->Import
フォントとか作るのめんどいのでサンプル込みで全部Importします。
全部入りでインポート
Projectビューに追加された
ここにあるFantasy AtlasとFantasy Fontを使います。

4.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を追加。メインカメラと重ならないように移動。
この辺り説明してる資料とかブログとかあれば誰か教えてください…

5.NGUI Buttonを作る

・NGUI->Open the Widget Wizard
Widget Wizardを開く
・AtlasをNGUIのサンプルからドラッグ
・FontをNGUIのサンプルからドラッグ
・TemplateはButtonを選択
・Back GroundはFlat Outlineを選択
・Add toが"Panel"になっていることを確認してAdd toボタンを押す
PanelにNGUIボタンを追加
これだけで画面にボタンが表示されます。
実行すると分かりますがマウスオーバーやクリック時のエフェクトまであります。
あら簡単!
ボタンが追加された
サイズとテキストを修正します。
・ButtonのBackgroundを選択して、
 ・Scaleを(50,50)に変更
ボタンの背景サイズ変更
・ButtonのLabelを選択して、
 ・Scaleを(50,50)に変更
 ・テキストを">>"に変更
ボタンのテキスト変更
・Buttonを選択して、
 ・座標を(30,-50,0)に移動
 ・NGUI->Attach a Colliderを押す
  →緑の枠(Collider)のサイズが自動調整される
 ・ボタンの名前を"RightButton"に変更
ボタンの調整
名前を分かりやすく変更
全く同じ手順でLeftButtonも作っておきます。
2つのボタンができた

6.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が回転するはず。

・CubeにこのScriptを適用
忘れないうちに適用

7.ボタンからスクリプトを呼び出す設定

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が使えそうだったので選びました。

全部で4つのUI Button Messageを追加します。

  1. RightButton.OnPress
  2. RightButton.OnRelease
  3. LeftButton.OnPress
  4. LeftButton.OnRelease
こんな感じ
動作的にはTarget.SendMessage(FunctionName)してるだけでしょうねー。
IncludeChildlenのチェックを入れると
Target.BroadcastMessage(FunctionName)されるんだと思います。

完成

回転中
これでボタンを押すと回転するようになりました。パチパチ。

気になる点

ただのボタンとして使うならこれで十分ですが
十字キーみたいな使い方を考えると問題がでてきます。

いちいち指を離さないと次のボタンが押せない

OnMouseEnter,OnMouseOutがスマホで使えればいいんですが使えないんです。
ゲームで使いたいのでOnTouchEnter,OnTouchOutみたいなのを実装してみたいと思います。
作らなくてもありました。
bool UICamera.stickyPress = false
とするだけで解決です!

スポンサーリンク

Related Posts Plugin for WordPress, Blogger...