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