CEDEC2012 Starling 開発

Flashを使った
PC、Android、iOS 向けに
GPU アクセラレーション対応の
2Dゲーム開発
Andy Hall
Adobe Japan

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

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?

• ツールサイレント
自動アップデート
• リーチユーザ数：
4億人 (!!!)

400M
Wii PS3 Xbox 360
95.56M 63.9M 67.2M

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

採用状況

9 of 10 top Angry Birds Friends Ruby Blast
Facebook games (Rovio) (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

Vector
3D
Video

Display List


Stage3D

Flash コンテンツ
(ActionScript)

シェーダー
Stage3D (AGAL)
パイプライン

OpenGL or DirectX

GPU


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

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


Starlingの場合

import starling.display.Sprite;

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

（コレヲサズケヨウ！）


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

• Starling (2D)

• Away3D

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

N2D2
Genome2D


Starling

Flash Player
Display List API
(AS3) Sparrow
フレームワーク
(ObjC)

Starling
(AS3)


Starling + Stage3D

Flash コンテンツ
(ActionScript)

Starling

Stage3D (AGAL)

OpenGL or DirectX

GPU


Starlingが送ること
• Starling gives you:
• 生産性
• 親しみのある習得の早いAPI
• 拡張性
• 活発的なコミュニティー
• Starling doesn’t give you:
• GPUは何ぞよ、と気にしなくて良いほど
の安全性
• GPUには優しく！


コードを見せろってば！


Starling core API
starling.events.EventDispatcher

starling.display.*
DisplayObject

DisplayObjectContainer Quad

Image
Button Stage
Sprite TextField
MovieClip


• Just vertices with a color but no texture
• Color interpolated on the GPU
Quad
• 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 is textured quad (extends Quad)
• Textures should be uploaded and pooled,
Image
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;


• The lightest container available
(just like with standard Flash display list)
Sprite
• 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();

Sprite, with a timeline
MovieClip
•
• 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.


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

andhall@adobe.com
@fenomas


CEDEC2012 Starling 開発

More Related Content

What's hot

Viewers also liked

Similar to CEDEC2012 Starling 開発

Recently uploaded

CEDEC2012 Starling 開発