2013年1月26日土曜日

Feathers 1.0の4つのテーマを確認できるサンプル

Starling用のUIコンポーネントライブラリ「Feathers 1.0」もStarling 1.3とほぼ同時にリリースされました。

さて、wonderflでFeathers 1.0と4つのテーマも使えるようになったので、公式のサンプルComponentsExplorerをwonderflに移植して、テーマをそれぞれ適用したものを作ってみました。

元のサンプルではiPhoneのRetinaディスプレイモデルのdpi(326)に合わせた解像度設定になってましたが、wonderflのstageサイズ(465 x 465)ではちょっと狭いので、Feathersのdpi(feathers.system.DeviceCapabilities::dpi)の設定を163にしてます(実アプリではデバイスの値が自動的にセットされるので基本的には設定不要)。

Feathersのソースを眺めてるとFlashやFlexのUIコンポーネントで培われたものがステキに活かされるように感じて、なんかスキです。

MetalWorksMobileTheme

Feathers 1.0 ComponentsExplorer - MetalWorksMobileTheme - wonderfl build flash online


AzureMobileTheme

Feathers 1.0 ComponentsExplorer - AzureMobileTheme - wonderfl build flash online


MinimalMobileTheme

Feathers 1.0 ComponentsExplorer - MinimalMobileTheme - wonderfl build flash online


AeonDesktopTheme

Feathers 1.0 ComponentsExplorer - AeonDesktopTheme - wonderfl build flash online

Starling 1.3 on wonderfl

Starling 1.3が2013年1月14日にリリースされました。新機能については野中さんが日本語で紹介してくれてます

さて、Starling 1.3がwonderflでも使えるようになったので、以前Starling 1.2の頃に投稿したものをちょっと修正してStarling 1.3の新機能Filterを使ってみた。

このサンプルはもともとStarlingの公式デモアプリのRender Textureシーンをほぼコピーして作ったものなんですが、移植にあたってちょっと工夫したところはStarlingフレームワークに含まれるBitmap Font「mini」から"*"のTexture(1文字の画像)を取り出してブラシ(brush)に使うTextureとして代用したってところ。

あと、wonderflのプレビュー用キャプチャ機能でStarling(Stage3D)の描画が映らなかったので、タイミングを見計らってStarlingの描画をビットマップ化して表示リスト(ネイティブ)のstageに追加することで、キャプチャ機能に対応しました。

Starling RenderTextureScene with Filter - wonderfl build flash online

2012年9月3日月曜日

「Flashプログラミングスキルを活かすモバイルアプリ開発」

共著で執筆した本「Flashプログラミングスキルを活かすモバイルアプリ開発 」がまもなく発売です。

Android、iOS、Unity、JavaScript(enchant.js)、Flash Stage3D(Starling、Alternativa3D)などが登場します。

僕はStarlingに関するページ、計20ページ程度を担当しました。Starlingを使ってiPhoneゲームアプリを作る(正確には移植)というお題のもと、実際にアプリを開発し、それをネタにStarlingを使うとこんな感じですよって解説してます。

Flash、ActionScriptの経験があり、モバイルアプリ開発もやっていこうとする方に特にオススメです。

本の詳しい内容はこちらをどうぞ。

2012年7月3日火曜日

QuadBatchで早くなるか試してみた

QuadBatchを使うとBenchmarkシーンの結果が本当によくなるか試してみました。


結果:

Nexus One: 380 (370) -> 350 (350) // なぜか若干低下?
iPhone 4: 530 (220) -> 760 (400) // 43% アップ
プロジェクタ: 4410 (1160) -> 7110 (1740) // 61% アップ

※すべてリリースビルドでテストしました。
※カッコ内の数字は開発ビルドでの結果です(iOS用のパッケージ化方法は標準)。
※プロジェクタはデバッグ版でWindows 7環境です。
※FPSの設定は、デバイスのNexus OneとiPhone 4は30fps。プロジェクタは60fps。

全体的には確かにパフォーマンスがよくなりましたが、Nexus Oneで若干低下しました。今回のベンチマークテストでは画像がずっと回転しているので、毎フレームでquadBatch.reset()してすべてのオブジェクトをquadBatch.addImage()し直す必要があったなど、ActionScriptで処理することが逆に増えたということが、裏目に出たのかもしれません。

ところで、パフォーマンスチェックは「リリースビルドでやるべし!」ですね。通常の開発ビルドだとまったく本来のパフォーマンスがでないようですね。Flash Builderの実行構成ウィンドウでは、iOS用のパッケージ化方法「標準」はリリースビルドと同等のパフォーマンスだという説明がありますが、これは正しくないみたいですね。

ただ、これもNexus Oneは例外的で開発ビルドとリリースビルドの差がほとんどありませんね...

ちなみに、Webに公開するアプリを前提にしたパフォーマンスチェックするなら、"デバッグ版じゃない"Flash Playerでテストするべきなんですが、このベンチマークテストでは、パフォーマンスが良すぎて結果が出るまで時間がかかり過ぎますし、今回のQuadBatch版では、仕様上の限界に達するのかエラーになって止まってしまいます。どうもContex3Dで「ArgumentError: Error #3670: Buffer too big.」というエラーが出てるようです。この投稿によると、ひとつのQuadBatchに追加できるImage(Quad)の限界は8192個のようです。

最後に、今回試したBenchmarkScene2.asのソースです。

2012年7月2日月曜日

Starling公式デモアプリの補足情報

Ctrl/Cmd & Shiftキーとマウスの組み合わせでマルチタッチ操作をシミュレーションできることは前にも触れましたが、これはStarlingのフレームワークの機能です。StarlingクラスのプロパティsimulateMultitouchをtrueに設定するとその機能が有効になります。

それ以外にも、このデモアプリではキー操作による(画面上では説明がないちょっとした隠し)機能が用意されています。

スペースキーを押すと

FPSとメモリ使用量を画面左上に表示します。もう一度押すと消えます。

負荷をできるだけ抑えるためでしょうが、Flashでよく使われるStatsと比べるとかなりこじんまりしています。ちなみにRetinaディスプレイのiPhoneだと顔を近づけないと読めないぐらいの小ささになります。

使われているフォントはminiというビットマップフォントで、>Starlingのフレームワークに唯一付属しているものです。何か画面上にデバッグ情報を表示するような場合にもこのフォント使えば負荷を抑えられていいかもしれせん。

xキーを押すと

Starlingが使用しているContext3Dを開放します。これによりStarling.handleLostContextの設定によるアプリの挙動を確認できます。このデモアプリではhandleLostContext=trueになっているので、フレームワークによりContext3Dがすぐに再生成され画面上では変化が分かりません。描画の更新が一時的に遅延するぐらいです。

見た目で分かりやすりのは、Render Textureシーンでです。xキーを押すと書いていた絵が消えます。

RenderTextureクラスの注意書きにもcontextが消失したら復元できないとあります。RenderTexteはGPUのメモリ上でダイレクトに描画処理を行うため、Context3Dがなくなると復元するための情報が残っていないということなんでしょう。恐らくActionScriptで別に情報を保持しておいて、Context3Dが再生成されたときのイベント(context3DCreate)をキッカケに再度RenderTexteに描画し直せば、復元できるかもしれません。

ちなみにスペースキーとxキーのハンドリングはGameクラスのここで行なっています。

ATF(Adobe Textutre Format)について

StarlingのデモアプリにはATFが使わているのに、ATFを生成するツールがまだ一般に公開されていないという状況が続いてましたが、エンコーダー/デコーダー機能を持つ、AS3で書かれたオープンソースのライブラリATF-Encoderが公開されました。

また、ByteArray.orgのThibaultさんの投稿によると、まもなくAdobe LabsにATFのツールが公開されるとのことです。ATFを使うとレンダリングが早くなったり、メモリー必要量が減ったりするようです。GPUをより効率的に使えるみたいですね。

2012年6月26日火曜日

Starling公式デモアプリの各シーンについて 2/2

Starling公式デモアプリの各シーンについて簡単に説明します。前半に引き続きの後半の4つです。

Custom hit-testシーン(src/scenes/CustomHitTestScene.as


反応する領域を円形にカスタムしたボタンのデモです。

通常Starlingのボタンが反応する領域は使用されている画像を囲む矩形(長方形)です。なのでこのデモのように円形に近い画像だと角の透明部分でも反応してしまいます。そこでこのデモでは独自のhitTest()関数を定義して反応する領域と画像の形にあまりズレがないようにしています。

Movie Clipシーン(src/scenes/MovieScene.as


ムービークリップのデモです。

ActionScriptの[Embed]タグで埋め込んだスプライトシートを元にパラパラ漫画の要領でアニメーションを再生します。

ちなみにStarlingのMovieClipクラスの機能はネイティブのMovieClipクラスに比べると限定的です。(Spriteクラスではなく)Imageクラスを拡張していることから見ても、単に一連の画像を順番に表示させるのに使うクラスといった位置付けです。

Benchmarkシーン(src/scenes/BenchmarkScene.as


簡易的なベンチマークテストができるデモです。

「Start benchmark」ボタンを押すと画像がどんどん増殖します。描画負荷が高まり、フレームレートが低下すると終了し結果が表示されます。

ちなみに手持ちのPCでは8770個(60fps)、iPhone 4では230リリースビルド書き出しで530個(30fps)でした。(PCでは終了するまで1分以上かかりました。)

このデモのように同じ画像をたくさん表示するような場合は、QuadBatchクラスを使うとさらにパフォーマンスアップできるでしょう。

Render Textureシーン(src/scenes/RenderTextureScene.as


タッチ(ドラッグ)操作で絵が書けるデモです。

上のボタンでDraw(描く)モードとErase(消す)モードを切替られます。
ちょっと気づきにくいですが、実はマルチタッチで描け(消せ)ます。

このデモでの描画処理はRenderTextureクラスを利用してGPUのパワーを効率良く使っています。


各シーンの説明おしまい。

2012年6月25日月曜日

Starling公式デモアプリの各シーンについて 1/2

Starling公式デモアプリの各シーンについて簡単に説明します。まず前半の4つ。

Texturesシーン(src/scenes/TextureScene.as


画像を表示するデモです。

上の3羽の鳥の絵はActionScriptの[Embed]タグで埋め込んだPNG画像を表示させた例。

下のATFと書かれた絵は同様に埋め込んだATF(Adobe Textutre Format)形式の画像を表示させた例。

ATFはより効率のよい画像フォーマットらしいのですが、残念ながらATF作成用のツールはまだ一般に公開されていないとのこと。

Multitouchシーン(src/scenes/TouchScene.as


マルチタッチ操作で画像を移動/回転/拡縮できるデモです。

マルチタッチ操作できないデスクトップ上でも画面上部の説明にあるようにCtrl/Cmd & Shiftキーの組み合わせでマルチタッチをシミュレートできます。

TextFieldsシーン(src/scenes/TextScene.as


テキストを表示するデモです。

上の4つはActionScriptの[Embed]タグで埋め込んだTrueTypeフォントを使ったテキストの例で、色や文字の配置を変えたバリエーションです。

一番下のテキストはビットマップフォントを表示させた例です。

ビットマップフォントは描画パフォーマンスに優れます。

Animationsシーン(src/scenes/AnimationScene.as


Tweenアニメーションを試せるデモです。

「Start animation」ボタンを押すと、linear、easeOut、easeInOut、easeOutBack、easeOutBounce、easeOutElasticの順に様々なTweenを確認できます。

「Delayed call」ボタンを押すと、鳥の絵が1秒後に赤くなります。

どちらもアニメーションを管理するJugglerという機能に関係します。

後半へ続く