• 1. HTML5跨平台游戏开发腾讯 无线游戏产品部 曹雨 http://t.qq.com/aniao8527
  • 2. 保证在各个平台可以正常使用保证照顾到各个平台的的性能保证各个平台的用户体验并照顾到平台差异性跨平台的标准 怎样才叫跨平台123
  • 3. 交互方式的不同事件的不同 PC常见的交互有单击,双击,拖动,窗口缩放 触屏常见的交互有点击,拖动,多点触控,各种传感器 键盘手持设备有……啥都没有PC:click, dblclick, dragstart, dragend, mousemove 触屏:click, touchstart, touchend, touchcancel, touchmove, "Gesture"保证不同平台能正常使用 先把应用跑起来
  • 4. 不同 平台安卓IOSPCCLICK:click DRAG:dragstart, mousemove, dragendCLICK:touchstart, touchend DRAG:touchstart, touchmove, touchend CLICK:touchstart, touchend DRAG:touchstart, touchmove, touchend 用不同平台的基础事件来组装我们的虚拟事件 (Android和IOS监听touch事件后很可能不会触发click事件)
  • 5. 管理器Drag植物收获Click事件的管理 用户面板金钱面板仓库长经验升级事件类型监听对象调用函数
  • 6. 用户交互事件要针对不同平台做适配不用的对象一定要从事件管理器里注销,不然会内存泄漏两个注意点
  • 7. 保证照顾到各个平台的的性能 移动设备就是木桶的短板
  • 8. 脏矩形技术抛弃Canvas六参数放射变换模型,采用简化四参数模型。放弃旋转功能各种缓存提高性能的措施 每秒3帧的速度你伤不起123
  • 9. 死循环clearrendersleep清屏开始渲染各个组件休息一下控制帧率(如果还有时间休息的话)最简单的游戏渲染流程while(true) { clear(); render(); sleep(); }
  • 10. 脏矩形技术 最保险方式是所有和重绘区域有交集的对象都重绘该区域
  • 11. 脏矩形技术 最保险方式是所有和重绘区域有交集的对象都重绘该区域
  • 12. 脏矩形技术 最保险方式是所有和重绘区域有交集的对象都重绘该区域
  • 13. 脏矩形技术 每个对象都应该提供一个局部矩形渲染的实现function render(x, y, width, height) { //TODO 如果说我要渲染相对本对象内部 //(x,y)为左上顶点,长为width,宽为height //的矩形部分所需要做的工作 }
  • 14. 脏矩形技术 脏矩形的切割和合并(在总面积和数量上做平衡)
  • 15. 脏矩形技术 为何牺牲渲染面积减少脏矩形数量while(true) { detectDirtyRects(); for(rect in dirtyRects) { for(obj in objs) { obj.render(rect); } } sleep(); }每个对象和脏矩形都要计算全局的脏 矩形坐标相对于对象本身的相对坐标
  • 16. 仿射变换模型(六参数模型) 计算量大到蛋疼X2 = A*X1 + B*Y1 + C Y2 = D*X1 + E*Y1 + F X2 A B C X1 [Y2] = [ D E F ] * [ Y1] 1 0 0 1 1
  • 17. 仿射变换模型(六参数模型) 子对象的相对坐标和父对象相对坐标的关系父对象子对象function getGlobalMatrix() { if(this!= topObj) { return this.parent.getGlobalMatrix() * this.matrix; } return E; }
  • 18. X平移透明度Y拉伸层次Y平移X拉伸旋转 (就是他拖后腿)对象渲染的维度 Please insert sub-title
  • 19. 四参数变换模型 去掉旋转功能之后X2 = A*X1 + B Y2 = C*Y1 + D A:X坐标伸缩比例 B:X坐标平移 C:Y坐标伸缩比例 D:Y坐标平移六参数变换模型中的A的求法看起来是类似(乱写的,只是表明复杂度): A = X坐标拉伸 * (cos(theta) + tan(theta) * X坐标平移 + ctan(theta)*Y坐标平移)
  • 20. 四参数变换模型 选择四参数变换模型的另外一个原因一部分Android 2.1所带的浏览器放射变换矩阵的实现是错误的,而旋转功能必须 用到其自带的transform函数,也就是使用六参数模型正确的错误的
  • 21. 用户操作事件的缓存全局坐标的缓存对象树的缓存各种缓存技术 缓存往往是最好用的空间换时间的优化技术123
  • 22. 将用户操作事件保存到事件队列,而不是立即响应每一帧一开始取出事件队列里所有缓存的用户操作对事件进行去重以及事件的分发用户操作事件的缓存 在2帧之间调用多次Drag事件函数是浪费时间和生命123
  • 23. 每一帧都将相对全局的变换矩阵保存下来如果对象有移动,缩放等操作就重新计算全局变换大部分情况下,就直接使用缓存的全局变换矩阵全局坐标的缓存 让递归计算见鬼去吧123
  • 24. 对象树的缓存 你看到的其实不是很多精灵,他们只不过是一幅画当整个背景都在移动的时候,就直接把整个背景和其子对象渲染到一个临时Canvas里面,然后在移动过程中就把背景扁平成一张图片,也就是这个临时的Canvas,这样就不用维护多个精灵的全局变换矩阵,计算多个脏矩形的合并和分割,以及同一个位置上层叠的精灵的多次渲染。大大节省了计算开销
  • 25. 其他需要图片化缓存的东西 文字对象,canvas自带的绘图对象(圆,直线,等等)当舍弃掉六参数模型和canvas自带的transform之后,只有利用drawImage接口对图片对象进行缩放。所以很有必要对文字进行图片化处理渲染文字和绘制矢量图是Canvas的性能短板,需要进行规避12
  • 26. 优化永无止尽 游戏逻辑的代码同样需要优化优化一切能优化的地方,性能需要抠,即使是几个与或表达式的顺序也要考虑到短路带来的性能提升游戏策划、交互以及动画的设计需要考虑到性能上的特点尝试WebGL在3D空间绘制2D图形123
  • 27. 平台缩放由我们的程序对图片资源进行线性缩放不同平台使用不同尺寸的图片资源利用平台自带的缩放功能,比如ipad对iphone应用的X2处理换图片程序缩放多平台的适配 主要是屏幕尺寸
  • 28. 不同平台使用不同的图片资源 给高清屏幕以高清体验,牺牲流量和性能不同尺寸图片在不同平台上渲染50次所需要的时间 (最下面2个接近0的是PC平台的safari和chrome), 由图可知移动平台性能问题严峻。
  • 29. 用程序根据平台进行线性缩放 大屏幕也使用小资源节约流量,牺牲效果和性能除了线性缩放带来的计算开销之外,还是要付出与面积 成正比的渲染开销
  • 30. 利用平台自带的缩放机制,达到全屏效果 性能影响很小,大屏幕也用小资源节省流量,牺牲效果IOS :31. 开发门槛高,一切都得DIY,协作和模块化开发难性能比Flash较差各大巨头的大力支持,内定太子,前途看好HTML5游戏开发的总结 和flash的对比123
  • 32. Thank you !这不是最好的时代,也不是最坏的时代。 这只是黎明前的黑暗,未来一片光明。