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游戏

Recommended

Recommended

More Related Content

What's hot

What's hot (6)

Viewers also liked

Viewers also liked (8)

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

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

Recently uploaded

Recently uploaded (20)

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