[NGUI] 独自のSpriteでボタンを作る
独自に作成したAtlasより、プッシュボタンを実装します。
Spriteの配置
シーンツリーでUI Rootを選択した状態で、メインメニューの「NGUI」-「Create」-「Sprite」を選択します。
InspectorでボタンのAtlas/Spriteを選択し、シーンビューで配置やサイズを調整。
Labelの作成
シーンビュー上でSpriteを選択した状態で右クリックしてポップアップメニューを出します。
「Create」-「Label」-「Child」を選択すると、Spriteの下にLabelが追加されます。
ここで、表示するテキストや色を変更。
LabelのInspectorを見ると、Bitmap Fontになってますね。この場合は、日本語を指定できません。
ここをDynamicに変えましょう。
- UILabelのBitmapをDynamicに切り替え。
- Fontを押す。Selecl a fontウィンドウが出る。
- Arialが指定されているのを確認して右端のSelectボタンを押す
で、Dynamicフォントを指定できるようになりました。
日本語入力はテキストボックスではできないようなので、他のエディットツールでテキストを入れてコピー＆ペーストします。
これで、Dynamicフォントの動作を確認できました。
Box Colliderの割り当て
シーンツリーでSpriteを選択しなおして、シーンビュー上で右クリック。
メニューの「NGUI」-「Attach」-「Box Collider」を選択します。
NGUIでのボタンプッシュ時の当たり判定は物理エンジンの挙動を使用しているようです。
これを行わないとボタンのプッシュ状態を感知できませんので、この指定は必ず必要です。
Button Scriptの割り当て
Spriteを選択した状態で、シーンビュー上で右クリック。
メニューの「NGUI」-「Attach」-「Button Script」を選択します。
これで実行すると、マウスオーバーでボタンの色が変わる、マウスプッシュでも反応するのが確認できます。
ボタンプッシュでのイベント処理は「NGUIでボタンを配置」を参照。
マウスオーバーで少しボタンを大きくする
効果として、ボタンの上をマウスオーバーしたときに少しボタンを大きくして、プッシュを把握しやすいようにします。
Spriteを選択したときのInspectorの一番下の「Add Component」をクリックし、
「NGUI」-「Interaction」-「Button Scale」を選択します。
これで「UI Button Scale」というのがInspectorに追加されます。
ここで、マウスオーバー時の拡大率、マウスプッシュ時の拡大率を指定できます。
デフォルトのままでも問題なさそうです。
最終更新時間：2014年01月30日 15時08分51秒