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