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という機能に関係します。

後半へ続く

2012年6月22日金曜日

Starlingに慣れるためのオススメの方法

Starlingに慣れるためのオススメの方法は、サンプルアプリを好きにいじることです。なんとなくコードを編集してみたり、画像の差し替えたりしながら、疑問がでてきたらネットで調べるとか人に聞くとかする。それで充分理解が深まったらいよいよ自分のアプリに挑戦という流れがいいんじゃないでしょうか。

Web上でも試せるStarlingの公式デモアプリがあります。このアプリのソースはStarlingフレームワークをダウンロードするとサンプルとして付いてきます。最初にいじり倒すにはこれ以上のものはないでしょう。

このサンプルはFlash Builderのプロジェクトとしてインポートすることができるので、慣れてる方なら、ダウンロードしたzipファイルから簡単にプロジェクトとしてインポートして実行することができるでしょう。その場合、demoというプロジェクトがそれなんですが、starlingというライブラリプロジェクトを参照してるので、最低demoとstarlingの2つのプロジェクトをインポートする必要があります。

Flash Builder以外の開発環境なら/samples/demo/srcと/starling/srcをActionScriptのソースパスに追加して、/samples/demo/src/Startup.asをドキュメントクラス(デフォルトのアプリケーション)に指定するといいと思います。

Stage3Dの機能を使うのでFlash Playerは11以降です。

ブラウザ上で実行するためにはSWFを埋め込むときwmode="direct"を指定する必要があるなど面倒なので、スタンドアローンのFlash Player(今はプロジェクタと呼ばれてるのかな)で実行するのがオススメです。最新のプロジェクタはこちらからダウンロードできます。

もっと簡単に

設定なしで、より簡単に公式デモアプリを実行できるようにしたものをアップしたのでよかったら使ってください。(モバイル用も用意したかったんですけど、FlashDevelopの方がややこしかったのでまた今度)
  • Starling 1.1 demo for FlashDevelop 4.zip
    ⇒ダウンロードしたzipファイルを適当なとこに解凍して、Starling 1.1 demo.as3projを開いてください。
  • Starling 1.1 demo for Flash Builder 4.6.zip
    ⇒Flash Builderのメニューから[ファイル]>[Flash Builder プロジェクトを読み込み...]でダウンロードしたzipファイルを参照し新規のプロジェクトとして読み込んでください。
    ※単独のプロジェクトとして実行できるように、ライブラリプロジェクト参照の代わりにStarlingのソースをプロジェクト内に含めました。
どちらもスタンドアローンのFlash Player(プロジェクタ)で実行する設定になってるので、もし古いバージョンのプロジェクタが起動してしまう場合は、SWFのファイルの関連付けを確認してみてください。

ちなみに僕の環境(Windows 7)では関連付けがうまく変更できなくてどうしても古いバージョンのプロジェクタが起動してしまう問題がありましたが、古いバージョンのプロジェクタをシステムから削除することでうまくいきました。

2012年6月20日水曜日

Starling関連ツール情報まとめ

IDE(統合開発環境)

スプライトシート作成ツール

※ツールではありませんが、実行時にネイティブのMovieClipから動的にスプライトシート(TextureAtlas)を生成できるDynamic Texture Atlas GeneratorというStarlingのエクステンションもあります。

ビットマップフォント作成ツール


パーティクルエディター

※パーティクルの機能はStarlingフレームワーク本体には含まれておらず、ParticleSystemというStarlingのエクステンションとして提供されています。

2012年6月18日月曜日

Starling日本語情報まとめ


要チェック情報源

やってみた系

その他



ここまでのStarlingと

去年、とあるFlashのワークショップが数週間に渡って開催され、僕はお手伝いする形でそれに関わっていました。Adobe MAX 2011が開催されたのがちょうどその期間中で、ネットを通して仕入れた最新情報をそのワークショップでシェアする機会がありました。

僕にとってもっともインパクトがあったのはStage3Dのパフォーマンスの高さと可能性です。だから興奮気味にその辺りの情報やサンプルを紹介した記憶があります。

Starlingを知ったのもこのタイミングです。例えばAdobe MAX 2011のこのセッション「Developing 2D Games on Top of Stage 3D (Molehill) in Flash Player」。動画の11分過ぎからStarlingの話になります。以下は動画中で紹介されてるStarlingを使ったゲームへのリンクです。

その後でStarlingのサンプルをモバイルAIRアプリ化してiPhoneに入れて試してましたが、ダメでした。後からわかったことですが、当時のStage3Dはモバイル未対応だったんです。

Stage3Dがモバイルに対応したのは2012年3月にリリースされたAIR 3.2からです。Starlingを使ったアプリがやっとiPhoneでも動かせるようになったわけです。

その頃、以前2冊のFlash本に関わらせてもらった経緯もあって、新しい本向けにStarlingのサンプルアプリ制作と記事執筆のお話を頂いてました。



それで3月中旬からcocos2Dで作られたiPhone用2DゲームをStarlingに移植する作業が始まりました。すでにリリースされてたStarling 1.0を使って、(内部的な階層構造やロジックも)できるだけcocos2D版と忠実になるようにしました。Starlingは使い慣れたActionScriptのフレームワークなので、理解もコードを書くのも楽でしたが、Objective-Cは馴染みがなかったのでcocos2D版のコードを読み解くのが一苦労でした。

一応完成したが4月頭。その時点ではcocos2D版のフレームレートは60fpsに対して、Starling版は30fpsがやっとという感じでした。差を縮めたかったので、色々とパフォーマンスチューニングを始めたわけです。それで手を尽くして37fpsぐらいに改善したんですが、60fpsには程遠い状態でした。ちなみにフレームレートはiPhone 4で確認したものです。

ところが、5月にStarling 1.1がリリースされて状況が変わりました。試してみるとほぼ60fpsでるようになったんです!

そして、6月。先日のAIR 3.3のリリース。実はAIR SDK 3.2のエミュレーターにはバグがあって、Stage3Dを使ったモバイルアプリ開発をするとき不便でしたが、3.3で解消され、いい頃合いになったんじゃないでしょうか。Starlingでモバイルアプリ開発を始めるには。