HTML5跨平台游戏开发

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