[Unity3D][NGUI]ボタンの作り方最小構成

環境

  • Unity3D : 4.5.1f3
  • NGUI : 3.7.4

やること

  • ボタン用のGameObjectを作る … A
  • AにButtonとUILabelかUISpriteをアタッチする
  • AにBoxColliderをアタッチする
  • ボタンを押した時用のスクリプトを書く … B
  • BをAにアタッチする。
  • AにアタッチしたButtonのイベント
  • 実はBはAにアタッチしなくても良い。
Ad

ボタン用のGameObjectを作る

まず Shift + Command + N でGameObjectをシーンに追加します。
Hierarchy ペイン上で右クリックからnewで追加することもできますし、ペイン上部の Create ボタンで追加することもできます。

以降、このGameObjectをAとします。

GameObjectにButtonとUILabelかUISpriteをアタッチする

続いて、AにNGUIのコンポーネントをアタッチします。
NGUIにはタッチやクリックイベントを取得してくれる便利なコンポーネントがあります。

HierarchyからAを選択するとInspectorペインにAの詳細が描画されます。
この最下部にある AddComponent ボタンをクリックします。

すると、現在の ProjectAssets 下にあるコンポーネントが表示されます。
フィルタリング用のTextAreaも表示されているのでそこに Button と入力すると候補が出てきます。

SelectButtonComponent

これでボタンクリック時のイベントを取得することができるようになりました。

つづいてボタンが画面に表示されている必要があるので、目に見えるようにするためのコンポーネントを用意します。

ただし、ここではイベントを取得することができてもクリック・タッチイベント自体は発生しません。
イベントの起こし方は後述します。まずは表示物を用意します。

今回は2種類の方法を紹介します。

NGUI Unity2D Sprite

スプライトを画面に表示させることでボタンの位置を定義します。

前回同様、A に AddComponent します。
フィルタリング用のTextAreaには Sprite と入れます。
候補から NGUI Unity2D Sprite コンポーネントを選択します。

スプライトは適当にインポートしておきます。

スプライトについて

インポートしたSpriteはそのままではSpriteとして使えません。

インポートしたスプライトを Project 中から選択して Inpsector から Texture Type の種類を Sprite(2D/uGUI) にして Apply ボタンを押します。

SelectSpriteType

これでSpriteとして使えるよう成りました。

再びAを選択し、Inspectorから NGUI Unity2D Sprite コンポーネントの項目を選択します。

2DSpriteの項目に先ほどInportしたSprite画像をD&Dします。

SetSprite

画面に多少引き延ばされた感じで表示されました。
表示のゆがみは同コンポーネントの下部にある Snap ボタンで原寸表示をすることができます。

SnapButton

UILabel

文字を画面上に表示することでボタンの位置を定義するためのコンポーネントです。

フォントを選択し、文字を入力するだけで画面に表示させることができます。
むちゃくちゃ簡単ですし、GUITextのように変な座標系になるわけでもないので調整がしやすいです。

GameObjectにBoxColliderをアタッチする

イベントを発生させるには、あたり判定 をしてクリック・タッチを検出する必要があります。
そのためには GameObject A にBoxColliderをアタッチする必要があります。

AのAddComponentからBoxColliderを選択します。

一応BoxColliderをアタッチできましたが超小さくてクリックできません。
あたり判定の領域を指定します。

BoxColliderの調整

BoxColliderInspector

コライダーの領域はSceneからは緑色の矩形で表示されています。

画面に表示したSpriteやLabelの領域に会わせて調整をします。
Spriteを表示しているのであればUI2DSpriteコンポーネントのWidgetからSizeを見れば必要なコライダーのサイズが分かります。

BoxColliderSize

BoxColliderコンポーネントとButtonコンポーネントは自動で連携してくれます。

これでタッチイベントを発生させることができました。

ボタンを押した時用のスクリプトを書く

ボタンタッチ時のイベント用にスクリプトを用意します。
Project中に新たにScriptを作成を用意し以下のコードを貼り付けてください。

using UnityEngine;

public class Hoge : MonoBehaviour {

    public void OnTouchEvent(){
        Debug.Log("押した!");
    }

}

ファイル名とクラス名は完全に一致してないとComponentとしてアタッチできない点に留意してください。
この場合は Hoge.cs になっている必要があります。

イベントを得たときに実行するスクリプトを用意することができました。

スクリプトをGameObjectにアタッチする。

前述のスクリプトをAにアタッチします。
やりかたは既にご存知ですよね。

次はイベントの発生元からこのスクリプトをつなぎます。

AにアタッチしたButtonのイベント

AにアタッチしたButtonイベントは Hierarchy 上のAを、Aの Inspector 上のButtonの Notify までD&Dします。

D&Dしたらコンポーネントを選択し、publicな関数を選択したら完了です。

SetClickEvent

Unityの再生ボタンを押してボタンをクリックしたらConsoleペイン上に’押した!’と表示されます。

Unity4入門   最新開発環境による簡単3Dゲーム製作

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です