全新HTML5跨平台游戏开发.ppt

利用平台自带的缩放机制，达到全屏效果 性能影响很小，大屏幕也用小资源节省流量，牺牲效果 IOS ：meta name=viewport content=width=device-width minimum-scale=1.0, maximum-scale=1.0 ”/ Android：meta name=viewport content=width=320 minimum-scale=1.0, maximum-scale=1.0 “/ 开发门槛高，一切都得DIY，协作和模块化开发难 性能比Flash较差 各大巨头的大力支持，内定太子，前途看好 HTML5游戏开发的总结 和flash的对比 1 2 3 Thank you ! 这不是最好的时代，也不是最坏的时代。 这只是黎明前的黑暗，未来一片光明。 HTML5跨平台游戏开发 保证在各个平台可以正常使用 保证照顾到各个平台的的性能 保证各个平台的用户体验并照顾到平台差异性 跨平台的标准 怎样才叫跨平台 1 2 3 交互方式的不同 事件的不同 PC常见的交互有单击，双击，拖动，窗口缩放 触屏常见的交互有点击，拖动，多点触控，各种传感器 键盘手持设备有……啥都没有 PC：click, dblclick, dragstart, dragend, mousemove 触屏:click, touchstart, touchend, touchcancel, touchmove, Gesture 保证不同平台能正常使用 先把应用跑起来 不同 平台 安卓 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 事件的管理 用户面板 金钱面板 仓库 长经验 升级 事件类型 监听对象 调用函数 用户交互事件要针对不同平台做适配 不用的对象一定要从事件管理器里注销，不然会内存泄漏 两个注意点 保证照顾到各个平台的的性能 移动设备就是木桶的短板 脏矩形技术 抛弃Canvas六参数放射变换模型，采用简化四参数模型。放弃旋转功能 各种缓存 提高性能的措施 每秒3帧的速度你伤不起 1 2 3 死循环 clear render sleep 清屏 开始渲染各个组件 休息一下控制帧率（如果还有时间休息的话） 最简单的游戏渲染流程 while(true) { clear(); render(); sleep(); } 脏矩形技术 最保险方式是所有和重绘区域有交集的对象都重绘该区域 脏矩形技术 最保险方式是所有和重绘区域有交集的对象都重绘该区域 脏矩形技术 最保险方式是所有和重绘区域有交集的对象都重绘该区域 脏矩形技术 每个对象都应该提供一个局部矩形渲染的实现 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(); } 每个对象和脏矩形都要计算全局的脏 矩形坐标相对于对象本身的相对坐标 仿射变换模型（六参数模型） 计算量大到蛋疼 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) {