高恩博-Canvas2D动画与游戏设计思路.ppt

Canvas 2D应用设计思路 常用内容 getContext(2d) setInterval JSON drawImage 计时系统 计时，速度控制，规划内容，打酱油! 计时器设计时..... 过多的使用setInterval 或 setTimeout 会影响脚本执行速度。 setInterval结合一个计数器列表，循环绘制要控制的内容。 每次循环后， 清理掉Canvas内的像素或重新覆盖你的背景信息。 单计时器下的JSON组织结构 背景层：优先画出背景层，构造游戏或动画的视觉场景。 常驻层：角色或物品等显示层。 临时动画层：视觉效果层，通常是一些稍纵即逝的内容。(烟雾、子弹……) drawImage的参数组合 偷懒的3参组合：image,dx,dy 相对灵活的5参组合：image,dx,dy,dw,dh BT 9 参：image,sx,sy,sw,sh,dx,dy,dw,dh 上图是一只自称混儿混儿的Panda抽自己嘴巴的瞬间！！ Image绘制中注意的事项 图片载入迟缓易引起绘制失败。 网速有限的情况下， 鱼与熊掌不可兼得。 图片过多会延长载入时间。 一图多片制，减少图片对象的创建次数 不要超出Canvas的绘制范围。 计数器的作用 动画有效的存活时间 动画播放的延迟处理 一图多片动画针的切换控制 得分统计与时间统计 还是打酱油 还是打酱油 控制器的设计 捕获事件，根据设计需求实现参数的修改。 在JSON数据中，标记每个元素绘制时的相关参数。 分析JSON数据，以便触发像素范围内的触摸，点击等事件。 结束语 对于创新来说，方法就是新的世界，最重要的不是知识，而是思路。 ——郎加明《创新的奥秘》27页 ablegao@ * 插图为一只自称是混混的Panda抽自己嘴巴的瞬间。 * 插图为一只自称是混混的Panda抽自己嘴巴的瞬间。