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

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应用的加速

我们需要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/

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/

粒子系统•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);

粒子编辑工具

http://particledesigner.71squared.com/

Particle Designer

粒子编辑工具

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

Show Time!!

Q & Ajunhuang@adobe.comwww.fans8.comweibo.com/fans8

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

Technology

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

Expo Simon Starling à la Kunsthalle Mulhouse

Ley de Starling y Flujo Humano 2006-1

Revista científica digital INSPILIP Código ISSN 2588 …...Si existen alteraciones hemodinámicas, habrá desequilibrio de las leyes de Starling. Ley de Starling.- Determina el equilibrio

Starling - O antes o do meio e o depois

Analisis Starling

Noivas Online Graciella Starling - AltaChapelaria

La legge di Frank Starling

Pesquisa sobre Starling Film

Filipe Starling Bambirra MULHER E FUTEBOL: UMA ANÁLISE DO ...

Circolo polmonare, effetto waterfall, legge di starling, sistema linfatico

人生如戏 戏如人生

游戏美术技术门户 DOGAME游戏兵工厂 游戏人才频道介绍 ( dogame ). job.dogame 找游戏人才就来 游戏人才频道

CEDEC2012 Starling 開発

Felipe starling apresentação sustentar 23.08.2011 v2

PATOBIOCHEMIE V GASTROENTEROLOGII PATOBIOCHEMIE V ...ukb.lf1.cuni.cz/ppt/bioge_19vscht_pato.pdf · Ernest Henry Starling 1866 - 1927 Ernest Henry Starling 1866 1866 -- 1927 sir William

vivo 快游戏帐号接入文档 · vivo 接入文档 第4 页 ② ：点击创建快游戏，并填写快游戏名称，快游戏包名，快游戏图标后点击立即创建。

Dra. Gilca Starling Diniz Dra. Gilca Starling Diniz.

A TERCEIRA LÁGRIMA · Starling estava aguardando os outros desde meio‑dia. Sabia que ... pegar a terceira lágrima antes da próxima lua cheia. — Starling, ... ergueu‑o do

Kuliah-M16 戏剧

Molibdênio e Níquel - Larissa Starling

人生如戏戏如人生

游戏美术技术门户 DOGAME游戏兵工厂游戏人才频道介绍 ( dogame ). job.dogame 找游戏人才就来游戏人才频道

vivo 快游戏帐号接入文档 · vivo 接入文档第4 页 ② ：点击创建快游戏，并填写快游戏名称，快游戏包名，快游戏图标后点击立即创建。