トップ 一覧 検索 ヘルプ RSS ログイン

unity_ngui_custom_buttonの変更点

  • 追加された行はこのように表示されます。
  • 削除された行はこのように表示されます。
!!!独自のSpriteでボタンを作る
!!![NGUI] 独自のSpriteでボタンを作る

[[独自に作成したAtlas|unity_ngui_atlas]]より、プッシュボタンを実装します。

!!Spriteの配置

シーンツリーでUI Rootを選択した状態で、メインメニューの「NGUI」-「Create」-「Sprite」を選択します。
InspectorでボタンのAtlas/Spriteを選択し、シーンビューで配置やサイズを調整。
{{ref_image unity_ngui_custom_button_01.png}}

!!Labelの作成

シーンビュー上でSpriteを選択した状態で右クリックしてポップアップメニューを出します。
「Create」-「Label」-「Child」を選択すると、Spriteの下にLabelが追加されます。
ここで、表示するテキストや色を変更。
{{ref_image unity_ngui_custom_button_02.png}}

LabelのInspectorを見ると、Bitmap Fontになってますね。この場合は、日本語を指定できません。
ここをDynamicに変えましょう。

*UILabelのBitmapをDynamicに切り替え。
*Fontを押す。Selecl a fontウィンドウが出る。
*Arialが指定されているのを確認して右端のSelectボタンを押す

{{ref_image unity_ngui_custom_button_03.png}}
で、Dynamicフォントを指定できるようになりました。
日本語入力はテキストボックスではできないようなので、他のエディットツールでテキストを入れてコピー&ペーストします。
これで、Dynamicフォントの動作を確認できました。

!!Box Colliderの割り当て

シーンツリーでSpriteを選択しなおして、シーンビュー上で右クリック。
メニューの「NGUI」-「Attach」-「Box Collider」を選択します。

NGUIでのボタンプッシュ時の当たり判定は物理エンジンの挙動を使用しているようです。
これを行わないとボタンのプッシュ状態を感知できませんので、この指定は必ず必要です。

!!Button Scriptの割り当て

Spriteを選択した状態で、シーンビュー上で右クリック。
メニューの「NGUI」-「Attach」-「Button Script」を選択します。

これで実行すると、マウスオーバーでボタンの色が変わる、マウスプッシュでも反応するのが確認できます。
{{ref_image unity_ngui_custom_button_04.png}}

ボタンプッシュでのイベント処理は「[[NGUIでボタンを配置|unity_ngui_first]]」を参照。

!!マウスオーバーで少しボタンを大きくする

効果として、ボタンの上をマウスオーバーしたときに少しボタンを大きくして、プッシュを把握しやすいようにします。

Spriteを選択したときのInspectorの一番下の「Add Component」をクリックし、
「NGUI」-「Interaction」-「Button Scale」を選択します。
これで「UI Button Scale」というのがInspectorに追加されます。
ここで、マウスオーバー時の拡大率、マウスプッシュ時の拡大率を指定できます。
デフォルトのままでも問題なさそうです。

----
{{lastmodified}}