Starling の Button クラスの使い方

Starling には、ボタンを簡単に実装できるよう Button クラスが用意されています。

Button クラスは DisplayObjectContainer クラスのサブクラスです。なので、任意の表示オブジェクトを子に持つことができますが、基本的には、スキン画像とタイトルを表示するだけのクラスです。あと、ボタンのクリックを通知する機能があります。

下が、Button のコンストラクタです。最初の引数は、ボタンのスキンとなるテクスチャです。オプションとして、第 2 引数にタイトルを、第 3 引数に押されたときのテクスチャを指定できます。

Button(upState:Texture, text:String = "", downState:Texture = null)

Flash Professional で作成するボタンと違って、"オーバー" のスキンは指定できません。おそらく、これは、タッチデバイスでの利用を前提としているためだと思われます。

ボタンがクリックされると (もしくはタップされると) triggered というイベントが発生します。クリック時に実行したい処理は、triggered イベントのリスナ関数に記述します。

下はそのサンプルです。テクスチャの埋め込み関連の箇所は、毎度のことなので省略してます。

import starling.display.Button;
import starling.events.Event;
 
private var myButton:Button;
 
private function onAddedToStage(e:Event):void
{ var myBitmap:Bitmap = new MyBitmap(); var myTexture:Texture = Texture.fromBitmap(myBitmap); // テクスチャを指定してボタンのオブジェクトを生成 myButton = new Button(myTexture); // triggered イベントのリスナを追加 myButton.addEventListener(Event.TRIGGERED, onTriggered); } private function onTriggered(e:Event):void { // イベントを発行したオブジェクトを取得 trace(e.target); }

Staring のイベントは Flash Player のイベントのようにバブリング (表示リストの階層間で伝播、ただし子から親への方向のみサポート) するため、複数のボタンを使うときなどは、triggered イベントを親オブジェクトでまとめて処理することも可能です。

スキン用テクスチャの指定

Starling のボタンは、タッチされると (または、ボタン上でマウスが押された状態になると)、ボタンの表示サイズが少し小さくなります。指を離すと元の大きさに戻ります。これは、ボタンに標準のテクスチャ 1 つだけ指定されているときの動作です。

ボタンに、押された状態用のテクスチャも指定すると、テクスチャが小さくなる代わりに、テクスチャが入れ替わるようになります。

これら 2 つのテクスチャは、コンストラクタに指定することもできますが、後から属性に設定することも可能です。下が関連する属性の一覧です。

upState: ボタンがタッチされていない状態で表示されるテクスチャ
downState: ボタンがタッチされている状態で表示されるテクスチャ
scaleWhenDown: タッチされている状態のテクスチャの表示比率

upState と downState が、各状態で表示するテクスチャを設定する属性です。 (upState は、コンストラクタでの指定が必須) パフォーマンスの観点からは、どちらのテクスチャも、同じテクスチャアトラス内にあるのが望ましいと考えられます。

最後の scaleWhenDown は、0 から 1 の間の数値を指定します。この値は、downState = null の場合のみ有効になります。

上でも書きましたが、単純な飾りの追加が必要であれば、2 つのテクスチャ以外にも任意の表示オブジェクトを追加できます。もし、振る舞いも変更したい場合は、自作のボタンクラスを作ったほうが早いかもしれません。

テキストの表示

Starling のボタンには、テクスチャとして指定した画像の上にテキストを表示できます。

テキストは、コンストラクタで指定するか、インスタンス生成後、text 属性に設定します。textBounds 属性を使って、テキストの表示位置を指定することもできます。

text: ボタン上に表示されるテキスト
textBounds: テキストの表示領域をRectangleで指定

テキストの表示に使用するフォントの見た目を設定する属性もあります。ほぼ TextField のときと同じです。

fontName: テキスト表示に使用するフォント名
fontSize: テキスト表示に使用するフォントの大きさ
fontColor: フォントの色
fontBold: フォントを太字にするかを指定

埋め込みフォントやビットマップフォントも利用できます。

ボタンの無効化

ボタンを使用できない状態にするには enabled 属性の値を false にします。

enabled: ボタンが使用できるかどうかを指定
alphaWhenDisabled: ボタンが無効のときのアルファ値

デフォルトでは、ボタンを無効にすると、ボタンの表示が半透明になります。その際に使われるアルファ値は、alphaWhenDisabled に設定された値です。

 

トラックバック(0)

トラックバックURL: http://cuaoar.jp/mt4/mt-tb.cgi/261

コメントする

2014年1月

Sun Mon Tue Wed Thu Fri Sat
      1 2 3 4
5 6 7 8 9 10 11
12 13 14 15 16 17 18
19 20 21 22 23 24 25
26 27 28 29 30 31  
レンタルサーバー

月別 アーカイブ

Powered by Movable Type 4.261