Starling Framework を使ってみた(その2)


大分間が空きましたが、この記事は「Starling Framework を使ってみた(その1)」の続きです。
今回は、パーティクルの簡単な使い方と、マルチ解像度に対応する方法などをご紹介します。

パーティクルを使ってみる

Starlingでパーティクル表現するには別途エクステンションを利用する必要があります。「ParticleSystem
上記リンクで紹介されているように、パーティクルの各種パラメータ設定を行うサービスやアプリがあるので、
まずはそれらを使ってパラメータ設定ファイル(pex)とテクスチャ画像を取得します。

私が今回使ったのはコチラ「Particle Editor
ブラウザ上でいろんなパラメータをいじくりながら、リアルタイムに確認できるので、使いやすかったです。

//各種素材を埋め込む
[Embed(source=”fire.pex”, mimeType=”application/octet-stream”)]
private static const FireConfig:Class;
[Embed(source = “fire_particle.png”)]
private static const FireParticle:Class;
_

//埋め込んだ素材をインスタンス化して、 PDParticleSystemオブジェクトを生成
var psConfig:XML = XML(new FireConfig());
var psTexture:Texture = Texture.fromBitmap(new FireParticle());
var ps:PDParticleSystem = new PDParticleSystem(psConfig, psTexture);
_
//stageとjugglerに追加
addChild(ps);
Starling.juggler.add(ps);
_
//パーティクル再生
ps.start()

Saveの「Export particle」でzipファイルがDLでき、
その中に各種パラメータが入っているpexファイルとテクスチャ用のpngファイルが入ってます。

魚のサンプルコンテンツではプレイヤーキャラクタの移動に応じて、パーティクルも追随するようにしていて、
パーティクルのemitterX/emitterYの値をプレイヤーの位置に合わせて変更することで実現しています。
ちなみに前回の記事「Starling Framework を使ってみた(その1)」でご紹介したAssetManagerは、pexファイルはサポートしていないので利用できないようです。

マルチディスプレイに対応するには

Starlingで開発する上でマルチディスプレイに対応する手法として、公式wikiの「Multi-Resolution Development」でいろんなパターンが紹介されています。

Starlingのコンテンツを作るにあたっては、まずStarlingインスタンスを生成します。

var viewPort:Rectangle = new Rectangle(0, 0, screenWidth, screenHeight)
starling = new Starling(sprite, stage, viewPort);

viewPortはStarlingコンテンツのレンダリング領域を定義します。

starling.stage.stageWidth = 320;
starling.stage.stageHeight = 480;

さらに、stageSize(stageWidth / stageHeight) を変更しています。
上記のコードを実行した際、デバイス解像度が640x960で合った場合は、それぞれのサイズは以下のようになります。

  • viewPort:640×960
  • stageSize:320×480

stageSize(flash.display.Stage)はコンテンツの表示領域全体のサイズなので、コンテンツの最大幅としては320ですが、レンダリング時は幅640で描画する事になります。
320×480の画像を表示している場合は、デバイス解像度が320×480であれば等倍で描画されますが、
デバイス解像度が640x960の場合は2倍に引き伸ばされて表示されます。

上記の方法では画像を拡大表示してしまうので、それを防ぐには下記のようにstarling.contentScaleFactorの値をTexture.fromBitmapの第4引数に渡します。
starling.contentScaleFactorは、viewPortの幅とstageの幅の比率の値です。デバイス解像度が640x960であれば、starling.contentScaleFactorは2となります。

var texture:Texture= Texture.fromBitmap(new IMG480x320(), true, false, starling.contentScaleFactor);

TextureのサイズはBitmap(IMG480x320)/starling.contentScaleFactorとなり、以下のようなレンダリング結果となります。

また、starling.contentScaleFactorの値を使って、利用する画像を選択することもできます。

var scale:Number = mStarling.contentScaleFactor;
if(scale == 1)
{
texture = Texture.fromBitmap(new IMG480x320(), true, false, scale);
}
else if(scale== 2)
{
texture = Texture.fromBitmap(new IMG960x640(), true, false, scale);
}

この方法であれば、iPhone3GとiPhone4sで適切な画像素材を使ってキレイに描画する事ができます。viewPort/stageSizeの設定で変化するcontentScaleFactorの値と、それに応じた画像素材をどれだけ用意する事でマルチ解像度へ対応できるかと思います。

iPhone5やiPadへの対応など、その他の手法については公式wikiの「Multi-Resolution Development」をご参照ください。