誕生日プレゼントにStage3D(Starling)を使ってスマホアプリを作ってみた
6月に誕生日をむかえる弊社スタッフ2人の誕生日プレゼントにスマホ用のゲームを作りました。
経緯
5月の僕の誕生日に、スタッフがプチコンmkIIを使って、DSで動作する「よちよち仮面の挑戦状」というゲームを作ってくれました。
僕が好きな8bitっぽいレトロな雰囲気が漂うアクションゲームで、主人公キャラは弊社キャラクターのふにゃもらけ。そして、内輪ネタがふんだんに盛り込まれている敵キャラの数々。
忙しい合間をぬって作ってくれたこともあり、33年間 生きてきて今までもらった誕生日プレゼントの中でも、一番うれしいプレゼントでした。
その「よちよち仮面の挑戦状」の開発において中核を担ったプログラマの誕生日が6月。何をプレゼントするか悩んだ結果、ゲームのお返しはゲームしかないと思い、「よちよち仮面の挑戦状」をスマホアプリに移植することにしました。
アプリのダウンロード
Android版は以下からダウンロードできます。たぶん設定で提供元不明アプリを許可してないとインストールできないです。
http://bit.ly/MeyWWL
操作方法は、画面の左半分を押していると左へ移動、右半分を押していると右へ移動。
上へフリックでジャンプ、下へフリックで下降します。
開発期間
5日間（Starlingの勉強時間込みで）
1日はがっつり、あとの4日は2〜3時間程度。
開発環境
Windows7 FlashBuilder4.6 AIR3.2 Starling1.1
Starlingの感想
・パフォーマンスがよい。複数の端末で60fpsでの動作を確認
・従来の表示リストと同じ感覚で使えるので学習コストが低い
・アニメーションをすべてコードで書かなきゃいけないのが手間かも。今までだったら、ちょっとした演出のアニメなどにはswfを作ってそれを表示させるだけですんだけど、すべてコードにするのはめんどい。かといって、アニメをビットマップにすると容量がかさむ。
・Windowsだと開発が大変そう。パーティクルエディターもビットマップフォントの書き出しツールも本格的なものがMacにしかない。ANEのこととか、Androidのドライバを何回もインストールすることとか考えたら、Macに移行すべきかも。
Starlingを勉強するにあたって、見たサイト
http://f-site.org/articles/2012/01/25170958.html
わかりやすく、Starlingの概要をつかめるので最初に見ておくべき
http://www.himco.jp/articles/pdf/IntroducingStarling.pdf
Introducing Starlingの日本語訳
http://doc.starling-framework.org/core/
APIリファレンス。かなりあっさりしている印象
http://wiki.starling-framework.org/
http://forum.starling-framework.org/
まだあまり見てないけど、公式のwikiとforum。
各端末の画面サイズに合わせて、ゲーム画面を拡大縮小させる方法
かなり需要がありそうなのですが、情報があまり見当たらず苦戦しました。
starling.core.Starling.viewPort starling.display.Stage.stageWidth starling.display.Stage.stageHeight
あたりをいじれば、うまくいきそうだけど、期待する結果が得られず。
時間がなかったので、ルートのSpriteのx,y,scaleX,scaleYを画面解像度に応じて調節するという力技で対応することに。
↓の記事とかが参考になりそうなので、今後読む。
http://wiki.starling-framework.org/manual/multi-resolution_development
http://forum.starling-framework.org/topic/app-resolutions
http://forum.starling-framework.org/topic/retina-display-support
http://forum.starling-framework.org/topic/contentscalefactor-mods
デバイスコンテキストのロスト対策
実機で動作確認をしながら開発をしていると、ときどき"Fatal error:The application lost the device context!!"と表示されてアプリが起動できないことがありました。
Starlingオブジェクトの生成前に以下のように設定しておくとメモリ消費量は多くなるけど、上記エラーが発生しなくなりました。
Starling.handleLostContext = true;
http://forum.starling-framework.org/topic/new-feature-handling-a-lost-device-context
Bitmap font generatorの設定
・デフォルトでは、ファイル出力がTextとtgaになっているので、"Export Options"からXMLとpngに変更する。
・White with alpha"や"Black with alpha"を設定してもpngが透過にならなかったので、Fireworksで開いて、透過に直して使用した。
パーティクルシステム
パーティクルは標準では使えず、拡張機能として用意されている。
swcにパッケージングされていないので、ソースコードを直接プロジェクトに配置する。
http://wiki.starling-framework.org/extensions/particlesystem
フルスクリーンにするとエミュレーター上での表示が乱れる
アプリケーション記述ファイルに
<fullScreen>true</fullScreen>
のようにフルスクリーン設定をすると、実機では問題ないが、
エミュレーター上での原点の表示位置がずれる。
Starlingの不具合ではなく、AIRの不具合っぽい。
http://forum.starling-framework.org/topic/stage3d-positioning-issue-with-air-32-starling-nd2d#post-3021
実機での開発時にときどき発生するエラー
実機でアプリ起動時にときどき発生するエラーにいくつか遭遇。
リリースビルドでは今のところ発生していない。
・デバイスコンテキストのロストと同じような表示で、"The application is not correctly embedded(wrong wmode value)"と表示される。もちろんrenderModeはdirectなのだけど…
・テクスチャの作成に失敗する
Error: Error #3684: Texture creation failed. Internal error. at flash.display3D::Context3D/createTexture() at starling.textures::Texture$/fromBitmapData()[/Users/redge/Development/starling/starling/src/starling/textures/Texture.as:130] at starling.textures::Texture$/fromBitmap()[/Users/redge/Development/starling/starling/src/starling/textures/Texture.as:111]
