CEDEC2012 Starling 開発

© 2012 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.

Flashを使った PC、Android、iOS 向けに

GPU アクセラレーション対応の 2Dゲーム開発

Andy Hall Adobe Japan


Andy Hall Game Evangelist

Adobe Japan

アンディホールゲームエバンジェリストアドビシステムズ株式会社 @fenomas


Agenda

1. Flash、ゲームの背景的な話 2. Stage3D、AGALについて 3. Starlingについて 4. 開発に飛び込もう


Flash and Games


Why Flash?

• パフォーマンス • ツール • リーチ


Why Flash?


サイレント自動アップデート

ユーザ数： 4億人 (!!!)


Why Flash?


Wii 95.56M

PS3 63.9M

Xbox 360 67.2M

400M

sales numbers as of April-June 2012. Source: Wikipedia

サイレント自動アップデート

ユーザ数： 4億人 (!!!)


採用状況

9 of 10 top Facebook games

Angry Birds Friends (Rovio)

Ruby Blast (Zynga)


About Flash

• Flash is: • 柔軟で応用が利く • クロスプラットフォーム • モバイルに最適（Android、iOS 他）

• Flash isn’t:

• 「ドラッグ・ドロップでゲーム！」 • 完全ネイティブパフォーマンス


Why the GPU?

Tablets, mobiles, retina displays. Pushing pixels through software isn’t an option.


Stage3D

Display List

3D Video

Vector


Stage3D

GPU

OpenGL or DirectX

Stage3D (AGAL)

Flash コンテンツ (ActionScript)

シェーダーパイプライン


AGALとは

m44 op, va0, vc0 dp4 op.x, va0, vc0 dp4 op.y, va0, vc1 dp4 op.z, va0, vc2 dp4 op.w, va0, vc3 m44 op, va0, vc0 mov v0, va1

（ヒトリデハキケンジャ！）


import starling.display.Sprite; var hero:Sprite = new Sprite(); hero.x = 200; hero.y = 200; addChild(hero);

（コレヲサズケヨウ！）

Starlingの場合


Stage3D ライブラリー • オフィシャルライブラリー（free, open source）：

• Starling (2D)

• Away3D

• ニーズによって他にも様々…

N2D2 Genome2D


Starling

Flash Player Display List API

(AS3)

Starling (AS3)

Sparrow フレームワーク (ObjC)


Starling + Stage3D

GPU

OpenGL or DirectX

Stage3D (AGAL)

Flash コンテンツ (ActionScript)

Starling


Starlingが送ること

• Starling gives you: • 生産性 • 親しみのある習得の早いAPI • 拡張性 • 活発的なコミュニティー

• Starling doesn’t give you: • GPUは何ぞよ、と気にしなくて良いほど

の安全性 • GPUには優しく！


コードを見せろってば！


starling.display.*

Starling core API

starling.events.EventDispatcher

DisplayObject

DisplayObjectContainer Quad

Image

MovieClip

Button

Sprite

Stage

TextField


starling.display.*

Starling core API

starling.events.EventDispatcher

DisplayObject

DisplayObjectContainer Quad

Image

MovieClip

Button

Sprite

Stage

TextField


Quad • Just vertices with a color but no texture • Color interpolated on the GPU • Simple primitive

Example :

q = new Quad(200, 200); q.setVertexColor(0, 0x000000); q.setVertexColor(1, 0xAA0000); q.setVertexColor(2, 0x00FF00); q.setVertexColor(3, 0x0000FF); addChild (q);

Solid color : q.color = 0x00FF00;


Image • Image is textured quad (extends Quad) • Textures should be uploaded and pooled,

rather than created when needed • State tracking (setTexture – expensive) • Compressed textures Example : // create a texture, then an image var myBitmap:Bitmap = new MyBitmapClass(); var texture:Texture = Texture.fromBitmap(myBitmap); var image:Image = new Image ( texture ); addChild ( image ); Tint : image.color = 0xFF0000;


Sprite • The lightest container available (just like with standard Flash display list)

• Can be flattened, to display a complex tree quickly

• However, all children’s textures need to be in the same texture (or atlas) to see really great performance

Example : // freeze the children container.flatten(); // assign changes to a child

container.child.scaleX = .5; // refresh

container.flatten(); // or unflatten();


MovieClip • Sprite, with a timeline • A different texture on each frame • Is not a container. • Does not support scripts on frames. • Completely controllable (custom fps,

addFrame, etc).

Example : // retrieve frames from a Flash MC

var frames:Vector.<Texture> = sTextureAtlas.getTextures("running_");

// creates a MovieClip playing at 40fps

mMovie = new MovieClip(frames, 40);


TextureAtlas

• Packaged sets of sprite sheets • To optimize, make sure GPU calls each use one Atlas

Example : // get all textures with a common prefix

myTextureAtlas.getTextures(“fly_”);


ではコードを書いてみよう。


拡張の例

Particle Editor http://onebyonedesign.com/flash/particleeditor/


Starlingの最適化

• Flatten containers if their contents won’t change: container.flatten();

• Prevent unnecessary touch event handling: container.touchable = false;

• Use object pools: s = pool.getSprite(); pool.returnSprite(s);


今後のトピック

Adobe Texture Format （ATF） • A compressed texture format created specially

for Stage3D • The player understand ATF

natively, which brings performance benefits

Tools and libraries are coming.


[email protected] @fenomas

ご清聴ありがとうございました。


Technology

CEDEC2012 Starling 開発