0
Starling:基于Stage3D开发GPU加速的2D游戏       Peter Huang       Adobe Platform Evangelist       weibo.com/fans8   © 2011 Adobe Syst...
为什么游戏开发者青睐Flash                                                                               安装率                         ...
游戏性能的需求 © 2011 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.Thursday, December 1, 2011             ...
目前提升性能的方案:Pixel Blitting                                                                               BitmapData.copyPixe...
目前提升性能的方案:GPU加速矢量                                                                      仅适用于矢量图形在移动AIR应用的加速                ...
我们需要GPU硬件加速!                                                                               •未来,运用CPU像素复制的方式并不是最高          ...
新的渲染方式:Stage3D                                      Flash Player 11                          AIR 3                    最新版本...
2D对象如何通过GPU呈现? © 2011 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.Thursday, December 1, 2011      ...
Low-Level Stage3D APIs                                                                               var vertices:Vector.<...
上述方法对初学者来说不易 © 2011 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.Thursday, December 1, 2011        ...
Starling                                                                        starling-framework.org                    ...
Starling                                        •纯ActionScript 3库                                        •模仿传统的Flash Displ...
Starling让开发者更快上手                                                                               // 创建材质对象                  ...
Starling经典案例                                             Rovio公司在Adobe MAX 2011 Keynote上展示了                               ...
Starling经典案例                                                                               http://bit.ly/pbKvz3           ...
Starling经典案例                                        http://www.waste-creative.com/games/invaders/ © 2011 Adobe Systems Inc...
Starling经典案例                                                                  http://www.whacksite.com/                   ...
Starling核心API                                                                               Thin layer (80kb), on top of S...
Starling核心显示API                                                                               starling.display © 2011 Adob...
Starling中的事件           Starling具有丰富的事件机制来管理各种行为           •Bubbling of events (propagation)           •Event.ADDED, Event....
Starling简单起步及编译小提示           package           {             import flash.display.Sprite;             import flash.display.S...
Starling中的显示对象                                                                               •Quad                        ...
Quad对象                          •最简单基础的显示元素                          •无材质贴图,仅定点坐标及颜色参数构成                          •Color i...
Image对象                    •Image对象扩展至Quad,即添加了材质的Quad                    •对于Image对象,你需要为其赋予材质(Texture)                   ...
Image中材质处理                                                                               正确做法                    //提前为Imag...
动态材质                          如何将动态绘制的图形(shapes)用作材质?                          •使用传统图形绘制 (shape.graphics)                 ...
Starling中的碰撞检测               •边缘检测 (半径、rectangle...)               •材质中用到的BitmapData API (原有的 BitmapData.hitTest方法等)      ...
按钮                 •Starling中的按钮即是容器 (扩展自DisplayObjectContainer)                 •你可以为按钮赋予各种图片材质                 •具有一些特别的行...
Sprite对象                        •Sprite属于容器 (扩展自 starling.display.DisplayObject)                        •跟原生的Display List中...
Flat Sprite                   •flatten方法可以提升渲染性能                   •如同cacheAsBitmap一样简单好用                   •在渲染一个树形显示队列的时...
Flat Sprite                                                           在没有运用Flatten方法时渲染机制                                 ...
Flat Sprite                                                                         运用Flatten方法后渲染机制                      ...
MovieClip对象        •类似原生的时间轴MC        •每帧可具有不同的材质        •灵活可控的方法 (自定义运动帧频, addFrame, removeFrameAt, 等)        •不支持嵌套 (Mov...
Sprite Sheet            •Sprite Sheet让你将展现一个对象的各个材质组合在一张图片上(动画序列图, UI的皮肤等)            •图片尺寸请使用2的阶乘以获得更好性能和节省内存 (1, 2, 4, 8...
Texture Atlases         •Texture Atlases(材质图集)比Sprite              Sheets更优化         •将游戏中用到的各种元素集合在一              个大的图片中 ...
创建Sprite Sheet和Texture Atlases的工具                                                    下一个版本的Flash Pro将集成此功能!               ...
创建Sprite Sheet和Texture Atlases的工具                                                                               TexturePac...
创建Sprite Sheet和Texture Atlases的工具                                                        Dynamic Texture Atlas Generator  ...
Juggler对象             •让Starling中的MovieClip对象动起来             •Starling对象默认具有Juggler             •你可以灵活的创建多个Juggler对象来控制游戏的...
暂停与继续          •在程序的任何地方都可以访问到核心的Starling对象以及主juggler          •Starling.current.start()/Starling.current.stop()为全局方法,将开始/...
控制资源及对象生命周期                 •当不需要对象时请使用Dispose方法                 •及时删除无用的listeners : removeEventListeners() or removeChild...
与原生API结合           •GPU方式并非无所不能,我们需要在游戏中结合原生的元素           •如目前在文字输入时,我们依旧需要原生的text input           •Starling提供了 Starling.c...
Text对象                 •Starling框架提供了更快的文本显示方式                 •TextField 和 BitmapFont API                 •TextField 采用原生...
位图文字创建工具             GlyphDesigner             http://glyphdesigner.71squared.com/                                        ...
粒子系统              •ParticleDesignerPS对象让你在Starling中快速的创建粒子系统              •粒子系统让你的游戏更绚              •相对传统粒子性能更加强大         ...
粒子编辑工具                                                                               Particle Designer                    ...
粒子编辑工具                                                                               Particle Editor                      ...
其他资源               •Starling官方站点               http://www.starling-framework.org/               •Starling学习手册下载           ...
Stage3D相关其他2D框架                   •ND2D                   https://github.com/nulldesign/nd2d                   •M2D       ...
Show Time!!Thursday, December 1, 2011                 50
Q&A                       junhuang@adobe.com                             www.fans8.com                             weibo.c...
© 2011 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.Thursday, December 1, 2011                     ...
Upcoming SlideShare
Loading in...5
×

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

2,085

Published on

Published in: Technology, Business
0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
2,085
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
29
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide

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

  1. 1. 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
  2. 2. 为什么游戏开发者青睐Flash 安装率 一致性 易用API 编程语言 工作流 © 2011 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.Thursday, December 1, 2011 2
  3. 3. 游戏性能的需求 © 2011 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.Thursday, December 1, 2011 3
  4. 4. 目前提升性能的方案:Pixel Blitting BitmapData.copyPixels Flash Player AIR © 2011 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.Thursday, December 1, 2011 4
  5. 5. 目前提升性能的方案:GPU加速矢量 仅适用于矢量图形在移动AIR应用的加速 AIR <renderMode>gpu</renderMode> © 2011 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.Thursday, December 1, 2011 5
  6. 6. 我们需要GPU硬件加速! •未来,运用CPU像素复制的方式并不是最高 效的选择 •屏幕尺寸越来越大,分辨率越来越高,更 会增加CPU压力 •运用GPU进行图像渲染才是终极解决之道 © 2011 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.Thursday, December 1, 2011 6
  7. 7. 新的渲染方式:Stage3D Flash Player 11 AIR 3 最新版本的Adobe® Flash® Platform runtimes提供了Stage3D API, 这是一套底层的GPU加速API,可以高效的运行在浏览器、桌面、移动设备、电视设备上. © 2011 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.Thursday, December 1, 2011 7
  8. 8. 2D对象如何通过GPU呈现? © 2011 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.Thursday, December 1, 2011 8
  9. 9. 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" ); © 2011 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.Thursday, December 1, 2011 9
  10. 10. 上述方法对初学者来说不易 © 2011 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.Thursday, December 1, 2011 10
  11. 11. Starling starling-framework.org 开源框架 © 2011 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.Thursday, December 1, 2011 11
  12. 12. Starling •纯ActionScript 3库 •模仿传统的Flash Displaylist架构(Sprite,MovieClip..) •所有内容由GPU直接渲染 •渲染性能具有质的飞跃 •新增Bitmap字体显示、Sprite Sheet、粒子效果等特性 © 2011 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.Thursday, December 1, 2011 12
  13. 13. 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); © 2011 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.Thursday, December 1, 2011 13
  14. 14. Starling经典案例 Rovio公司在Adobe MAX 2011 Keynote上展示了 基于Straling创建的Angry Birds网页版 © 2011 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.Thursday, December 1, 2011 14
  15. 15. Starling经典案例 http://bit.ly/pbKvz3 作者最初采用Flash Blitting方式创建此游戏并通过AIR发布在 iOS App Store/Android Market/BlackBerry平台上 现在用Starling框架后实现60fps满帧运行 © 2011 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.Thursday, December 1, 2011 15
  16. 16. Starling经典案例 http://www.waste-creative.com/games/invaders/ © 2011 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.Thursday, December 1, 2011 16
  17. 17. Starling经典案例 http://www.whacksite.com/ 基于Starling框架开发的一个开源小游戏 © 2011 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.Thursday, December 1, 2011 17
  18. 18. Starling核心API Thin layer (80kb), on top of Stage3D © 2011 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.Thursday, December 1, 2011 18
  19. 19. Starling核心显示API starling.display © 2011 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.Thursday, December 1, 2011 19
  20. 20. 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 © 2011 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.Thursday, December 1, 2011 20
  21. 21. 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(); } } } © 2011 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.Thursday, December 1, 2011 21
  22. 22. Starling中的显示对象 •Quad •Image •Sprite •MovieClip •Button •Textfield •.... © 2011 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.Thursday, December 1, 2011 22
  23. 23. 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 © 2011 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.Thursday, December 1, 2011 23
  24. 24. 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; © 2011 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.Thursday, December 1, 2011 24
  25. 25. 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())); © 2011 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.Thursday, December 1, 2011 25
  26. 26. 动态材质 如何将动态绘制的图形(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); © 2011 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.Thursday, December 1, 2011 26
  27. 27. 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!"); } } © 2011 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.Thursday, December 1, 2011 27
  28. 28. 按钮 •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 © 2011 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.Thursday, December 1, 2011 28
  29. 29. Sprite对象 •Sprite属于容器 (扩展自 starling.display.DisplayObject) •跟原生的Display List中Sprite一致,Starliing中的Sprite也 是最轻量级的容器 starling.display.Sprite © 2011 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.Thursday, December 1, 2011 29
  30. 30. Flat Sprite •flatten方法可以提升渲染性能 •如同cacheAsBitmap一样简单好用 •在渲染一个树形显示队列的时候此方法相当有用 •子对象有变化的时候,需要重新调用此方法相应变化 Example : // freeze the children container.flatten(); // assign changes to a child child.scaleX = child.scaleY = .5; // refresh container.unflatten() © 2011 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.Thursday, December 1, 2011 30
  31. 31. Flat Sprite 在没有运用Flatten方法时渲染机制 对每个显示对象对立进行数据运算 子对象越多消耗运算越多,从而影响性能 © 2011 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.Thursday, December 1, 2011 31
  32. 32. Flat Sprite 运用Flatten方法后渲染机制 获取所有子对象的几何数据于一个大的缓冲中 绘制整个显示数列时仅调用一次draw © 2011 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.Thursday, December 1, 2011 32
  33. 33. 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 © 2011 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.Thursday, December 1, 2011 33
  34. 34. Sprite Sheet •Sprite Sheet让你将展现一个对象的各个材质组合在一张图片上(动画序列图, UI的皮肤等) •图片尺寸请使用2的阶乘以获得更好性能和节省内存 (1, 2, 4, 8, 16, 32, 64, 128, 256, 512, ...) •Stage3D 限制最大的材质图片为 2048 x 2048 像素 •如果其中素材超过了尺寸限制,请创建多个 © 2011 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.Thursday, December 1, 2011 34
  35. 35. Texture Atlases •Texture Atlases(材质图集)比Sprite Sheets更优化 •将游戏中用到的各种元素集合在一 个大的图片中 •减少数据、材质上载至GPU的频度 •图片尺寸尽可能为2的阶乘(1, 2, 4, 8, 16, 32, 64, 128, 256, 512, ...) •在一张图片中尽可能集合多的元素 © 2011 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.Thursday, December 1, 2011 35
  36. 36. 创建Sprite Sheet和Texture Atlases的工具 下一个版本的Flash Pro将集成此功能! 可以将一个或多个Graphic/MovieClip对象导出为Sprite Sheet © 2011 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.Thursday, December 1, 2011 36
  37. 37. 创建Sprite Sheet和Texture Atlases的工具 TexturePacker http://www.texturepacker.com/ © 2011 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.Thursday, December 1, 2011 37
  38. 38. 创建Sprite Sheet和Texture Atlases的工具 Dynamic Texture Atlas Generator https://github.com/emibap/Dynamic-Texture-Atlas-Generator •作为Starling扩展的开源AS3项目 •将原生的MovieClip动态转换为Texture Atlases •点阵化MovieClip的每一帧,创建到位图材质中 •初始化游戏时会占用一些时间 •使用原生矢量MC,减少了SWF文件的尺寸(以动态生成时间为代价) © 2011 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.Thursday, December 1, 2011 38
  39. 39. 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 ); © 2011 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.Thursday, December 1, 2011 39
  40. 40. 暂停与继续 •在程序的任何地方都可以访问到核心的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 ); } © 2011 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.Thursday, December 1, 2011 40
  41. 41. 控制资源及对象生命周期 •当不需要对象时请使用Dispose方法 •及时删除无用的listeners : removeEventListeners() or removeChild (child, dispose) or removeFromParent(true) •注意区分starling.displayObject.dispose/ texture.dispose •对所有显示对象,调用dispose将自动删除其中的listeners,同时也删除 GPU中的缓存buffer •对于Texture对象,将从GPU显存中清除此材质 © 2011 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.Thursday, December 1, 2011 41
  42. 42. 与原生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); © 2011 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.Thursday, December 1, 2011 42
  43. 43. Text对象 •Starling框架提供了更快的文本显示方式 •TextField 和 BitmapFont API •TextField 采用原生TextField来渲染并作为材质上载到GPU •BitmapFont 采用位图字形 (将文字以位图形式保存在spritesheet) © 2011 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.Thursday, December 1, 2011 43
  44. 44. 位图文字创建工具 GlyphDesigner http://glyphdesigner.71squared.com/ Bitmap Font Generator http://www.angelcode.com/products/bmfont/ © 2011 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.Thursday, December 1, 2011 44
  45. 45. 粒子系统 •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); © 2011 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.Thursday, December 1, 2011 45
  46. 46. 粒子编辑工具 Particle Designer http://particledesigner.71squared.com/ © 2011 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.Thursday, December 1, 2011 46
  47. 47. 粒子编辑工具 Particle Editor http://onebyonedesign.com/flash/particleeditor/ © 2011 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.Thursday, December 1, 2011 47
  48. 48. 其他资源 •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 © 2011 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.Thursday, December 1, 2011 48
  49. 49. Stage3D相关其他2D框架 •ND2D https://github.com/nulldesign/nd2d •M2D https://github.com/egreenfield/M2D •REMX https://github.com/sleep2death/sl2d-framework •SL2D https://github.com/sleep2death/sl2d-framework © 2011 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.Thursday, December 1, 2011 49
  50. 50. Show Time!!Thursday, December 1, 2011 50
  51. 51. Q&A junhuang@adobe.com www.fans8.com weibo.com/fans8Thursday, December 1, 2011 51
  52. 52. © 2011 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.Thursday, December 1, 2011 52
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×