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

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

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

Peter Huang

Adobe Platform Evangelist

weibo.com/fans8

1Thursday, December 1, 2011


安装率

一致性

易用API

编程语言

工作流

为什么游戏开发者青睐Flash



游戏性能的需求



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

BitmapData.copyPixels

Flash Player AIR



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

AIR

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

<renderMode>gpu</renderMode>



我们需要GPU硬件加速！

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

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

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



新的渲染方式：Stage3D

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

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

Flash Player 11 AIR 3



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



Low-Level Stage3D APIsvar 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, vc0\n" + // 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网页版




作者最初采用Flash Blitting方式创建此游戏并通过AIR发布在

iOS App Store/Android Market/BlackBerry平台上

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

http://bit.ly/pbKvz3






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






基于Starling框架开发的一个开源小游戏

http://www.whacksite.com/





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



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 { private var mStarling:Starling; public function Startup() {! ! !! ! ! 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(); } }}

正式发布项目时•根据项目设置合适的Anti-aliasing质量

•关闭代码中error checking

•请将代码按正式版(Release Build)发布

Starling简单起步及编译小提示



Starling中的显示对象

•Quad•Image•Sprite•MovieClip•Button•Textfield•....



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 texturevar sausageBitmap:Bitmap = new Sausage();

// create the texturevar texture:Texture = Texture.fromBitmap(sausageBitmap);

// create the Imagevar image:Image = new Image ( texture );

// display itaddChild ( image );

Tint :

image.color = 0xFF0000;

starling.display.Image



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 buffervar bmd:BitmapData = new BitmapData(radius * 2, radius * 2, true, color);

// draw the shape on the bitmapbuffer.draw(s);

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

// create an Image out of the texturevar 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 imagevar buttonSkin:Bitmap = new ButtonTexture();! ! !// create a Texture object to feed the Button objectvar texture:Texture = Texture.fromBitmap(buttonSkin);! ! !// create a button using this skin as up statevar myButton:Button = new Button(texture, "Play");

// display itaddChild (myButton);

starling.display.Button



Sprite对象

•Sprite属于容器 (扩展自 starling.display.DisplayObject)

•跟原生的Display List中Sprite一致，Starliing中的Sprite也

是最轻量级的容器

starling.display.Sprite



Flat Sprite

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

Example :

// freeze the childrencontainer.flatten();

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

// refreshcontainer.unflatten()



Flat Sprite

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

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

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



Flat Sprite

运用Flatten方法后渲染机制

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

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



MovieClip对象

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

Example :

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

// creates a MovieClip playing at 40fpsmMovie = 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/


http://www.texturepacker.com

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 framesvar frames:Vector.<Texture> = sTextureAtlas.getTextures("running_");

// creates a MovieClip playing at 40fpsmMovie = 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:flash.text.TextField = new flash.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/


http://glyphdesigner.71squared.com

http://glyphdesigner.71squared.com




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

Example :// load the particle emitter configvar psConfig:XML = XML(new StarConfig());// upload the particlevar psTexture:Texture = Texture.fromBitmap(new StarParticle());// assemble themmParticleSystem = new ParticleDesignerPS(psConfig, psTexture);

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

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


https://github.com/PrimaryFeather/Starling-Extension-Particle-System

https://github.com/PrimaryFeather/Starling-Extension-Particle-System


粒子编辑工具

http://particledesigner.71squared.com/

Particle Designer


http://particledesigner.71squared.com

http://particledesigner.71squared.com


粒子编辑工具

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

Particle Editor





其他资源

•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框架

•ND2Dhttps://github.com/nulldesign/nd2d•M2Dhttps://github.com/egreenfield/M2D•REMXhttps://github.com/sleep2death/sl2d-framework•SL2Dhttps://github.com/sleep2death/sl2d-framework


https://github.com/nulldesign/nd2d

https://github.com/nulldesign/nd2d

https://github.com/sleep2death/sl2d-framework

https://github.com/sleep2death/sl2d-framework

Show Time!!


Q & [email protected]/fans8


mailto:[email protected]

mailto:[email protected]

http://www.fans8.com

http://www.fans8.com



Technology

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