首页 > 代码库 > HTML5 Canvas核心技术—图形、动画与游戏开发.pdf8
HTML5 Canvas核心技术—图形、动画与游戏开发.pdf8
第6章 精灵
精灵(sprite),它是一种可以集成入动画之中的图像对象,赋予它们各种行为,精灵并非Canvas API的一部分,,但都是从它衍生而来
本章将会实现三种设计模式:策略模式(精灵与绘制器解耦)、命令模式(精灵的动作)、享元模式(一个实例表示多个精灵)
painter属性是一个指向Painter对象的引用,使用paint(sprite,context)方法来绘制精灵,behaviors属性指向一个对象数组,数组中每个对象都会以execute(sprite,context,time)方法对精灵进行某种形式的操作。
精灵对象有两个方法paint()与update(),update()方法执行精灵的行为,执行的顺序为被加入的顺序,paint()方法则将精灵的绘制代理给绘制器来做
所有Painter对象都可以被归纳为以下三类:描边及填充绘制器、图像绘制器、精灵表绘制器
精灵对象不需要自己完成绘制,它会将绘制操作代理给另外一个对象来做。本质上讲Painter对象就是一些可以互相交换着使用的绘制算法
一张图片里包含动画的每一帧图片,就叫做精灵表(sprite sheet),复制一张图片比复制多张图片速度要快的多
第7章 物理效果
模拟重力加速度9.81m/s²转换为像素/米
抛物体垂直速度
钟摆运动
时间轴扭曲就是那些与时间呈非线性变化的属性(位置、颜色等)
第8章 碰撞检测
分离轴定理,也叫超平面分离定理,SAT
外接图形判别法:在二维平面中执行碰撞检测时,通常会根据物体外接图形的面积来判定(三维空间则按照体积)
外接矩形判别法:外接矩形经常被当作物体的轮廓来参与碰撞检测
事前碰撞检测,可以提前探知是否发生碰撞,由于这是根据当前帧速率来估算,如果帧速率变化,就会出错
外接圆判别法:两个圆心的距离小于两圆的半径只和
事后碰撞检测法,在碰撞发生后在做判断(是否已经发生了碰撞)
光线投射法,根据两条线相交的部分判定
以上方法并不适用任意多边形之间的碰撞检测,分离轴定理(SAT)与最小平移向量(MTV),分离轴定理只适用于凸多边形(所有内角小于180°)
分离轴定理(SAT)相当于将物体的阴影投到一面墙上,阴影重叠则碰撞,阴影部分数学上叫投影,墙叫做轴
只要在任意一条轴上找到互相分离的投影,就可以立即结束检测过程,判定未发生碰撞
投影轴
p1指向p2的向量叫做边缘向量,还需要一条垂直于边缘向量的法向量,叫做边缘法向量
圆形与多边形的碰撞检测,圆形可以近似看成一个有无数条边的正多边形
最小平移向量,指的是不再与另一个物体相撞所需要的最小距离
碰到后弹开
--------------------代码部分后期处理--------------------
本书完