読者です 読者をやめる 読者になる 読者になる

NGUIでのボタンの作り方〜イベント取得

こんにちは。
朧村正が発売日に届きませんでした。まだ届きません。。
通販の時は注意事項を最後まで読みましょう。発売日に届かないヨ。

ということで、今回はボタンの作り方から、イベント取得まで!
素材の準備は一個前のNGUIで使用するAtlasの作り方を見てね。

ベースを用意

メニューのNGUIからOpen the UI Wizardを選択して、
UI Toolパネルを開きます。
何も変更しないで、CreateYourUIをクリックすると、
HierarchyにUI Root(2D)とかゲームオブジェクトの構成が作られます。 

f:id:kame0_0:20130330182823p:plain

ImageButton

まずは、ImageButtonから。
ImageButtonはIdle、Hover、Pressの3枚の画像を設定できます。

メニューのNGUIからOpen the Widget Wizardを選択して、
Widget Toolパネルを開きます。

Atlasは「Atlas▼」(図:青矢印)を押して、
NGUIで使用するAtlasの作り方で作ったAtlasを選択します。
(選択肢にない場合はProjectからAtlasのPrefabをドロップ。図:赤矢印)

f:id:kame0_0:20130330184148p:plain

 

上の図のように、TemplateをImage Buttonにして、
Nomalなどそれぞれの画像を設定してAddToをクリックすれば、
Sceneにボタンが配置されます!
(ボタン横のPanelと入っているところは配置する場所です。今はそのまま。)

Button

ImageButtonと何が違うかというと、作ってみるとわかるのですが、
ImageButtonの時よりInspecterを見ると色々なCompornentがついています。
上から、
UIButton:操作時に色をつけるアニメーション
UIButton Scale:操作時に拡大縮小アニメーション
UIButton Offset:操作時に移動アニメーション

例えばクリック時に、色を少し暗くして、下方向に移動、縮小
で押してへこんだ感じが出ますね。

f:id:kame0_0:20130330190710p:plain

ちなみにこのUIButton ScaleなどのCompornentは
先ほど作ったImageButtonにも追加できます。
Hoverで画像が変化して、拡大するボタンが簡単に作れます。

1つ目の方法は、Inspecterの下の方にあるAdd Compornentから、
UIを抜いたCompornent名で検索すると(UIButton ScaleならButton Scale)出てくるので追加する方法。

2つ目は、メニューのCompornent→NGUI→Intractionの中にButtonから始まるConmornentが色々入っているので適当に試してみると面白いと思います。

イベントを取得

まず作ったボタンにメニューから
Compornent→NGUI→Intraction→ButtonMessageで、
UIButtonMessageのConmornentを追加します。

f:id:kame0_0:20130330193537p:plain

 

Targetに命令先のオブジェクトをドロップしたり、選択したりで設定。
FunctionNameに呼び出すメゾット名を設定。
Triggerで呼び出す条件を選択(クリックとかオーバーとか)。

C#

void ClickNya() {
//内容
}

js

function ClickNya(){
//内容
}

う。コード例いらないレベルね。
まあ、簡単に呼び出せる!素晴らしい。