starling-framework Feathersのデモサンプルを試す

starling-framework Feathersのデモサンプルを試す
2014年7月13日　k.taguchi

Starling Frameworkに対応したUIコンポーネント Feathersのサンプルを試してみようと思います。Feathersを利用することでGPUでレンダリングされながらもスクロールボタンなどを簡単に導入することができます。

前提環境
・AIR SDKは、バージョン14.0
・Starling Frameworkダウンロード済み
・開発ソフト FlashBuilder4.7

まずFeathersのサイトからコンポーネントをダウンロードします。

Starling Framework、Feathersは、とりあえずCドライブ直下に置きました。※慣れてきたら都合の良いところに配置してください。

Feathersのexamplesディレクトリを見ると、いろいろなサンプルが入っています。今回は、「ComponentsExplorer」を動かしてみます。

サンプルは、FlashBuilderのプロジェクトファイルにはなっていないため、プロジェクトとして読み込むことができません。そのためダミーとして１つプロジェクトを作り上書きしたいと思います。新規で「ActionScriptモバイル」を選択してプロジェクト名は「ComponentsExplorer」とします。

そしてビルドパスに、次のswcを読み込みます。
・feathers.swc

・MetalWorksMobileTheme.swc

・starling.swc

３つ入れ終えた状態、そして「終了」ボタンを押してワークスペースに切り替えます。

次に、サンプルのsource内のファイルをパッケージエクスプローラーのsrcディレクトリに上書きコピーします。

すると、このようになり、ComponentsExplorer-app.xmlとEmbeddedAssets.asがエラーになっています。このエラーを修正します。

まず、ComponentsExplorer-app.xmlを開き、AIR SDKのバージョン指定を修正します。

4.0を14.0に変更、これでエラーが消えました。

次にEmbeddedAssets.asを開くとEmbedの読み込みに失敗しています。

これは、サンプルのassetsディレクトリが読み込まれていないためです。assetsディレクトリを読み込むように設定します。

プロパティからActionScriptビルドパスの「ソースパス」タブからassetsを読み込みます。

そうすると無事エラーがすべて消えました。

これで準備が整いましたので、「実行」ボタンから動かしてみましょう。今回は、実行構成からAndroidを選び、AIRシミュレーター上で動かしてみます。

無事実行されました！

このようにして、GPUレンダリングでありながらもUIコンポーネントを利用できることが分かりました。スクロールや素早い動作のときでも60FPSを維持できるぐらいの動作が期待できそうです。

こちらの関連記事もどうぞ！