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でモバイルアプリ開発を始めるには。