Starling基于stage3 d开发gpu加速的2d游戏

Starling:基于Stage3D开发GPU加速的2D游戏
Peter Huang

Adobe Platform Evangelist

weibo.com/fans8

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

Thursday, December 1, 2011 1

为什么游戏开发者青睐Flash

安装率

一致性

易用API

编程语言

工作流



游戏性能的需求



目前提升性能的方案：Pixel Blitting

BitmapData.copyPixels

Flash Player AIR



目前提升性能的方案：GPU加速矢量

仅适用于矢量图形在移动AIR应用的加速

AIR

<renderMode>gpu</renderMode>



我们需要GPU硬件加速！

•未来,运用CPU像素复制的方式并不是最高
效的选择

•屏幕尺寸越来越大，分辨率越来越高，更
会增加CPU压力

•运用GPU进行图像渲染才是终极解决之道



新的渲染方式：Stage3D

Flash Player 11 AIR 3

最新版本的Adobe® Flash® Platform runtimes提供了Stage3D API,

这是一套底层的GPU加速API，可以高效的运行在浏览器、桌面、移动设备、电视设备上.



2D对象如何通过GPU呈现？



Low-Level Stage3D APIs
var vertices:Vector.<Number> = Vector.<Number>([
-0.5,-0.5,0, 0, 0, // x, y, z, u, v
-0.5, 0.5, 0, 0, 1,
0.5, 0.5, 0, 1, 1,
0.5, -0.5, 0, 1, 0]);

var vertexbuffer:VertexBuffer3D = context3D.createVertexBuffer(4, 5);

vertexbuffer.uploadFromVector(vertices, 0, 4);

var indexbuffer:IndexBuffer3D = context3D.createIndexBuffer(6);

indexbuffer.uploadFromVector (Vector.<uint>([0, 1, 2, 2, 3, 0]), 0, 6);

var bitmap:Bitmap = new TextureBitmap();
var texture:Texture = context3D.createTexture(bitmap.bitmapData.width,
bitmap.bitmapData.height, Context3DTextureFormat.BGRA, false);
texture.uploadFromBitmapData(bitmap.bitmapData);

var vertexShaderAssembler : AGALMiniAssembler = new AGALMiniAssembler();

vertexShaderAssembler.assemble( Context3DProgramType.VERTEX,
"m44 op, va0, vc0n" + // pos to clipspace
"mov v0, va1" // copy uv
);

var fragmentShaderAssembler : AGALMiniAssembler= new AGALMiniAssembler();

fragmentShaderAssembler.assemble( Context3DProgramType.FRAGMENT,
"tex ft1, v0, fs0 <2d,linear, nomip>;n" +
"mov oc, ft1"
);



上述方法对初学者来说不易



Starling

starling-framework.org

开源框架



Starling

•纯ActionScript 3库
•模仿传统的Flash Displaylist架构(Sprite,MovieClip..)
•所有内容由GPU直接渲染
•渲染性能具有质的飞跃
•新增Bitmap字体显示、Sprite Sheet、粒子效果等特性



Starling让开发者更快上手

// 创建材质对象

var texture:Texture = Texture.fromBitmap ( new embeddedBitmap() );

//创建图像对象

var image:Image = new Image(texture);

// 设置坐标属性

quad.pivotX = 50;

quad.pivotY = 50;

quad.x = 300;

quad.y = 150;

quad.rotation = Math.PI/4;

// 显示

addChild(quad);



Starling经典案例

Rovio公司在Adobe MAX 2011 Keynote上展示了
基于Straling创建的Angry Birds网页版




http://bit.ly/pbKvz3
作者最初采用Flash Blitting方式创建此游戏并通过AIR发布在

iOS App Store/Android Market/BlackBerry平台上

现在用Starling框架后实现60fps满帧运行




http://www.waste-creative.com/games/invaders/




http://www.whacksite.com/
基于Starling框架开发的一个开源小游戏



Starling核心API

Thin layer (80kb), on top of Stage3D



Starling核心显示API

starling.display



Starling中的事件

Starling具有丰富的事件机制来管理各种行为
•Bubbling of events (propagation)
•Event.ADDED, Event.ADDED_TO_STAGE, Event.REMOVED,Event.REMOVED_FROM_STAGE
•Event.TRIGGERED, Event.MOVIE_COMPLETED
•Event.FLATTEN, Event.RESIZE
•Event.ENTER_FRAME
•ResizeEvent.REISIZE
•TouchEvent.TOUCH
•KeyboardEvent.KEY_UP, KeyboardEvent.KEY_DOWN
•事件基于EnterFrameEvent.ENTER_FRAME



Starling简单起步及编译小提示
package
{
import flash.display.Sprite;
import flash.display.StageAlign;
import flash.display.StageScaleMode;
import starling.core.Starling;

[SWF(width="1280", height="752", frameRate="60", 正式发布项目时
backgroundColor="#002143")]
public class Startup extends Sprite
{
•根据项目设置合适的Anti-aliasing质量
private var mStarling:Starling;
•关闭代码中error checking
public function Startup()
{! ! ! •请将代码按正式版(Release Build)发布
! ! ! stage.align = StageAlign.TOP_LEFT;
! ! ! stage.scaleMode = StageScaleMode.NO_SCALE;
! !
! // create our Starling instance
mStarling = new Starling(Game, stage);

! // set anti-aliasing (higher the better quality but slower performance)
! mStarling.antiAliasing = 1;

! // start it!
mStarling.start();
}
}
}



Starling中的显示对象

•Quad
•Image
•Sprite
•MovieClip
•Button
•Textﬁeld
•....



Quad对象

•最简单基础的显示元素
•无材质贴图，仅定点坐标及颜色参数构成
•Color interpolated on the GPU

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;
starling.display.Quad



Image对象
•Image对象扩展至Quad,即添加了材质的Quad
•对于Image对象，你需要为其赋予材质（Texture）
•提前创建/上载材质优于需要时临时创建
•状态跟踪 (setTexture – 相对消耗资源)
•采用压缩的材质
Example :

// create the texture
var sausageBitmap:Bitmap = new Sausage();

// create the texture
var texture:Texture = Texture.fromBitmap(sausageBitmap); starling.display.Image
// create the Image
var image:Image = new Image ( texture );

// display it
addChild ( image );

Tint :

image.color = 0xFF0000;



Image中材质处理
正确做法
//提前为Image对象创建好材质及位图数据

var texture:Texture = Texture.fromBitmap(sausageBitmap);
! ! !
for (var i:int = 0; i < NUM_SAUSAGES; i++)
{
! // create a Image object with our one texture
! var image:Image = new Image(texture);

不正确做法
for (var i:int = 0; i < NUM_SAUSAGES; i++)
{
// 每创建一个Image对象就在内存中新建一个材质及位图

! // for each sausage
! var image:Image = new Image(Texture.fromBitmap(new Sausage()));



动态材质
如何将动态绘制的图形（shapes）用作材质？
•使用传统图形绘制 (shape.graphics)
•绘制完成后，点阵化并上载至GPU
•提前绘制预存而非需要时临时处理
Example :

// create a BitmapData buffer
var bmd:BitmapData = new BitmapData(radius * 2, radius * 2,
true, color);

// draw the shape on the bitmap
buffer.draw(s);

// create a Texture out of the BitmapData
var texture:Texture = Texture.fromBitmapData(buffer);

// create an Image out of the texture
var image:Image = new Image(texture);

// show it!
addChild(image);



Starling中的碰撞检测
•边缘检测 (半径、rectangle...)
•材质中用到的BitmapData API (原有的 BitmapData.hitTest方法等)
•嵌入第三方碰撞/物理引擎(Box2D..)
•碰撞检测太消耗运算资源将影响渲染性能，尽可能的优化碰撞算法！

Example :
private function onFrame(event:Event):void
{
point1.x = sausageImage1.x;
point1.y = sausageImage1.y;
point2.x = sausageImage2.x;
point2.y = sausageImage2.y;

if ( sausageBitmapData1.hitTest(point2, 255, sausageBitmapData1, point1, 255))
{
trace("touched!");
}
}



按钮

•Starling中的按钮即是容器 (扩展自DisplayObjectContainer)
•你可以为按钮赋予各种图片材质
•具有一些特别的行为事件 (如auto scale等)

Example :

// create a Bitmap object out of the embedded image
var buttonSkin:Bitmap = new ButtonTexture();
! ! !
// create a Texture object to feed the Button object
var texture:Texture = Texture.fromBitmap(buttonSkin);
! ! !
// create a button using this skin as up state
var myButton:Button = new Button(texture, "Play");

// display it
addChild (myButton);
starling.display.Button



Sprite对象

•Sprite属于容器 (扩展自 starling.display.DisplayObject)
•跟原生的Display List中Sprite一致，Starliing中的Sprite也
是最轻量级的容器

starling.display.Sprite



Flat Sprite

•flatten方法可以提升渲染性能
•如同cacheAsBitmap一样简单好用
•在渲染一个树形显示队列的时候此方法相当有用
•子对象有变化的时候，需要重新调用此方法相应变化

Example :
// freeze the children
container.ﬂatten();

// assign changes to a child
child.scaleX = child.scaleY = .5;

// refresh
container.unﬂatten()



Flat Sprite

在没有运用Flatten方法时渲染机制

对每个显示对象对立进行数据运算

子对象越多消耗运算越多，从而影响性能



Flat Sprite

运用Flatten方法后渲染机制

获取所有子对象的几何数据于一个大的缓冲中

绘制整个显示数列时仅调用一次draw



MovieClip对象

•类似原生的时间轴MC
•每帧可具有不同的材质
•灵活可控的方法 (自定义运动帧频, addFrame, removeFrameAt, 等)
•不支持嵌套 (MovieClip 扩展自 Image)
•不支持在帧上使用Script脚本
Example :

// retrieve the frames the running boy frames
var frames:Vector.<Texture> = sTextureAtlas.getTextures("running_");

// creates a MovieClip playing at 40fps
mMovie = new MovieClip(frames, 40);

starling.display.MovieClip



Sprite Sheet

•Sprite Sheet让你将展现一个对象的各个材质组合在一张图片上(动画序列图, UI的皮肤等)
•图片尺寸请使用2的阶乘以获得更好性能和节省内存 (1, 2, 4, 8, 16, 32, 64, 128, 256, 512, ...)
•Stage3D 限制最大的材质图片为 2048 x 2048 像素
•如果其中素材超过了尺寸限制，请创建多个



Texture Atlases

•Texture Atlases(材质图集)比Sprite
Sheets更优化
•将游戏中用到的各种元素集合在一
个大的图片中
•减少数据、材质上载至GPU的频度
•图片尺寸尽可能为2的阶乘(1, 2, 4,
8, 16, 32, 64, 128, 256, 512, ...)
•在一张图片中尽可能集合多的元素



创建Sprite Sheet和Texture Atlases的工具
下一个版本的Flash Pro将集成此功能！
可以将一个或多个Graphic/MovieClip对象导出为Sprite Sheet




TexturePacker

http://www.texturepacker.com/




Dynamic Texture Atlas Generator

https://github.com/emibap/Dynamic-Texture-Atlas-Generator

•作为Starling扩展的开源AS3项目
•将原生的MovieClip动态转换为Texture Atlases
•点阵化MovieClip的每一帧，创建到位图材质中
•初始化游戏时会占用一些时间
•使用原生矢量MC,减少了SWF文件的尺寸(以动态生成时间为代价)



Juggler对象
•让Starling中的MovieClip对象动起来
•Starling对象默认具有Juggler
•你可以灵活的创建多个Juggler对象来控制游戏的不同部分
(主场景、背景、菜单等)

Example :

// retrieve the frames the running boy frames
var frames:Vector.<Texture> = sTextureAtlas.getTextures("running_");

// creates a MovieClip playing at 40fps
mMovie = new MovieClip(frames, 40);

// play it!
Starling.juggler.add ( mMovie );



暂停与继续

•在程序的任何地方都可以访问到核心的Starling对象以及主juggler
•Starling.current.start()/Starling.current.stop()为全局方法，将开始/停止全部
渲染及事件相应

•将游戏分作各个模块并创建各自的juggler(如点击暂停按钮时,暂停游戏主场景,
播放暂停面板相关动画等.)

Example :

private function onFrame(event:EnterFrameEvent):void
{
if ( paused )
alertBox.advanceTime ( event.passedTime );
else battle.advanceTime( event.passedTime );

dashboard.advanceTime ( event.passedTime );
}



控制资源及对象生命周期

•当不需要对象时请使用Dispose方法
•及时删除无用的listeners : removeEventListeners() or removeChild
(child, dispose) or removeFromParent(true)

•注意区分starling.displayObject.dispose/ texture.dispose
•对所有显示对象,调用dispose将自动删除其中的listeners，同时也删除
GPU中的缓存buffer

•对于Texture对象,将从GPU显存中清除此材质



与原生API结合

•GPU方式并非无所不能,我们需要在游戏中结合原生的元素
•如目前在文字输入时,我们依旧需要原生的text input
•Starling提供了 Starling.current.nativeOverlay方法让你随时访问原生对象

Example :

var textInput:ﬂash.text.TextField = new ﬂash.text.TextField();
textInput.type = TextFieldType.INPUT;
Starling.current.nativeOverlay.addChild(textInput);



Text对象

•Starling框架提供了更快的文本显示方式
•TextField 和 BitmapFont API
•TextField 采用原生TextField来渲染并作为材质上载到GPU
•BitmapFont 采用位图字形 (将文字以位图形式保存在spritesheet)



位图文字创建工具
GlyphDesigner
http://glyphdesigner.71squared.com/

Bitmap Font Generator
http://www.angelcode.com/products/bmfont/



粒子系统
•ParticleDesignerPS对象让你在Starling中快速的创建粒子系统
•粒子系统让你的游戏更绚
•相对传统粒子性能更加强大
•粒子系统相关代码作为扩展在Github上下载：
https://github.com/PrimaryFeather/Starling-Extension-Particle-System

Example :
// load the particle emitter config
var psConfig:XML = XML(new StarConfig());
// upload the particle
var psTexture:Texture = Texture.fromBitmap(new StarParticle());
// assemble them
mParticleSystem = new ParticleDesignerPS(psConfig, psTexture);

// emitter position
mParticleSystem.emitterX = 800;
mParticleSystem.emitterY = 240;

// start it
mParticleSystem.start();
// show it!
addChild(mParticleSystem);
// animate it
Starling.juggler.add(mParticleSystem);


粒子编辑工具

Particle Designer

http://particledesigner.71squared.com/



粒子编辑工具

Particle Editor

http://onebyonedesign.com/ﬂash/particleeditor/



其他资源

•Starling官方站点
http://www.starling-framework.org/

•Starling学习手册下载
http://www.bytearray.org/?p=3371

•论坛用户贡献的扩展包(如MrDoob Stats、Robotlegs等)
http://forum.starling-framework.org/topic/list-of-user-contributions

•Starling优化技巧
http://villekoskela.org



Stage3D相关其他2D框架

•ND2D
https://github.com/nulldesign/nd2d
•M2D
https://github.com/egreenﬁeld/M2D
•REMX
https://github.com/sleep2death/sl2d-framework
•SL2D
https://github.com/sleep2death/sl2d-framework



Show Time!!


Q&A
junhuang@adobe.com
www.fans8.com
weibo.com/fans8


Starling基于stage3 d开发gpu加速的2d游戏

More Related Content

What's hot (6)

Viewers also liked (8)

Similar to Starling基于stage3 d开发gpu加速的2d游戏 (20)

Recently uploaded (20)

Starling基于stage3 d开发gpu加速的2d游戏