Starling (Stage3D) 用の UI コンポーネント Feathers

既にご存知の方も多いと思いますが、今回は Feathers という Starling フレームワーク上で利用が可能な 2D の UI コンポーネントの話です。

Feathers は、もともと Foxhole という名前のオープンソースのプロジェクトとして公開されていたものです。

それが、少し前に Feathers と名前を変えて、Staring の wiki にも専用ページが追加されました。つまり、Staring や Away3D と同様に、アドビが後方支援するフレームワーク群の 1 つになった、ということのようです。

Feathers で提供されるのは、基本的な UI コンポーネントが一通りと、それらのコンポーネントをレイアウトする機能です。下のページでは、それぞれ、Feathers のコンポーネントとレイアウト機能の一覧を実際に確認することができます。

Feathers の概要

Feathers は Flash Pro の UI コンポーネントと良く似たアーキテクチャでつくられています。そのため Flash 開発者であれば、とっかかり易そうな印象です。

それから、Feathers は、デバイス上での使用に対して最適化されているそうです。最適化の対象となっているのは、パフォーマンス、マルチタッチ操作、スクロール時の振る舞い、異なる解像度への対応の容易さ、が挙げられています。

Feathers が提供するコンポーネントには、ボタン、トグルスイッチ、チェックボックス、ラジオボタン、テキストフィールド、スライダー、プログレスバー、コールアウト、リスト、タブ等があります。

コンポーネントには、スキンを設定して見た目を変えることが可能です。テーマを指定して、アプリケーション全体のコンポーネントの見た目をまとめて変えることも可能です。

画面間のナビゲーション機能も提供されます。ナビゲーション開始のトリガーはイベントだけでなく、as3-signals も使用できます。画面の切り替え時にトランジション効果を指定することも可能です。

Feathers の使い方

最後に、簡単な Feathers の使い方の紹介です。Starling の基本的な使い方は省略してます。

まず、ボタンのインスタンスの作り方です。Starling の Sprite 内に以下の様なコードを記述します。

import feathers.controls.Button;
 
this.button = new Button();
this.addChild( button );

ここに、デフォルトのスキンを設定します。このままだと表示されなかったり、エラーになったりしてしまうようです。

import feathers.text.BitmapFontTextFormat;
 
// テクスチャアトラスを生成
this.atlas = new TextureAtlas(Texture.fromBitmap(...));
// テクスチャアトラスからスキン用のImageを生成
this.button.defaultSkin = new Image(this.atlas.getTexture("up-skin"));

デフォルトのスキンは、特定のスキンが指定されていない状態で表示されます。上の例では、up の状態のスキンをデフォルトのスキンに指定しています。

必要に応じて、押されたとき、選択されたとき、使用不可のとき、などそれぞれ状態で表示したいスキンが指定できます。押された状態で表示されるスキンは downSkin に設定します。

this.button.downSkin = new Image(this.atlas.getTexture("down-skin"));

ボタンのラベルのフォーマットも指定します。スキンと同様に状態に応じてフォーマットを指定できます。

デフォルトのテキストフォーマットを指定して済ませることもできます。以下はその例です。

// テクスチャアトラスからビットマップフォントを生成
this.font = new BitmapFont(this.atlas.getTexture(...));
// デフォルトのテキストフォーマットを指定
this.button.defaultLabelProperties.textFormat = 
  new BitmapFontTextFormat(this.font, 30, 0x000000);
 
// ラベルにテキストを指定
this.button.label = "クリック";

ボタンがクリックされたら処理を呼び出す場合、Event.TRIGGERED イベントに対して、イベントハンドラを指定します。

例えば、

// イベントハンドラを指定
this.button.addEventListener(Event.TRIGGERED, onTriggered);
 
// イベントハンドラの定義
protected function onTriggered(event:Event):void
{
  ...
}

のようなイメージです。

 

トラックバック(0)

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

コメントする

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