用canvas制作酷炫射击游戏--part3

今天介绍下 游戏中的sprite模块，也就是构建玩家及怪物的模块。有了这个模块，就可以在咱们的游戏里加入人物了。

想必用过css的朋友都知道sprite，一种将需要加载的图片拼接在一张图里以减少请求的css性能优化的方法。在游戏中的sprite，指游戏里有行为、有模样的对象。也就是人物或怪物。

源码见game-engine第598行。这里截取下目前需要的部分 加以说明。

// 精灵构造器
var Sprite= function  (name,context,painter,behaviors) {
	this.name=name;
	this.painter=painter;
	this.behaviors=behaviors || [];
}

Sprite.prototype.paint=function  (context) {
		return this.painter.paint(context);
	};
Sprite.prototype.update=function  (sprite,time) {
		if (this.exist) {
			for (var i=0;i<this.behaviors.length;i++) {
				this.behaviors[i].execute(sprite,time);
			}
		}
	}

很简单，一个构造函数两个原型方法。这里为什么Sprite要以构造函数的形式呈现，因为在游戏中我们每刷新一个怪物相当于就是new了一个Sprite对象。

这里sprite接受4个参数  name,context,painter,behaviors

name：对象名称，是玩家还是怪物，是小怪还是boss？在这里说明

context：指向我们canvas绘画环境的2d context。如果还不了解canvas基本操作的朋友可以简单看看教学http://javascript.ruanyifeng.com/htmlapi/canvas.html

painter：顾名思义，是用来绘制sprite的样子的。跑动的僵尸，枪口喷射的火焰理论上都可以通过painter实现。painter有两种，一种比较简单，用来绘制几何图形。只需要在painter函数中用canvas绘制出几何图形，引擎会帮助你在画面中实现删除上一帧与绘制下一帧操作。

本文主要介绍复杂的一中：spriteSheet（精灵表）。类似与css中的sprite图，他能根据需要拉取需要的贴图，实现漂亮的动画效果。源码见game-engine 267行。

//源码现在不需要掌握，贴出来只是为了方便接下来讲解，只需了解构成即可
var	SpriteSheetPainter=function  (name,sprite,cells,spritesheet,interval,x,y,width,height) {
		this.name=name;
		this.sprite=sprite;
		this.cells=cells || [];
		this.cellIndex=0;
		this.spritesheet=spritesheet;
		this.x=x;
		this.y=y;
		this.width=width;
		this.height=height;
		this.isRunning=false;
		this.lastTime=0;
		this.interval=interval;
		this.angle=angle;
	};

SpriteSheetPainter.prototype={
	advance:function  (spriteSheets) {
		this.isRunning=true;
		if (this.cellIndex==this.cells.length-1) {
			delete spriteSheets[this.name];
			if (this.sprite.index) delete spriteSheets[this.name+this.sprite.index];
			this.isRunning=false;
			this.cellIndex=0;
		} else {
			this.cellIndex++;
		}
	},
	paint:function  (context) {
		var sprite=this.sprite,
			sLeft=sprite.left,
			sTop=sprite.top;
			context.save();
			context.beginPath();
			context.translate(sLeft,sTop);
			context.rotate(this.sprite.angle);
			for (var i=0;i<this.cells.length;i++) {
				var cell=this.cells[this.cellIndex];
				context.drawImage(this.spritesheet,cell.left,cell.top,cell.width,cell.height,this.x,this.y,this.width,this.height);
			}
			context.restore();
	}
}

　看到这么多行代码别被吓到了，请听我分析分析。

总的来说也就是一个构造函数和2个原型方法。　SpriteSheet构造函数中只用关心以下两句：

		this.cells=cells || [];
		this.cellIndex=0;

　　cell是什么？ 下图中每个动作就是一个cell。  cellIndex就代表每个动作的编号（索引）。

原型方法中paint方法就是根据当前的索引（每个索引对应的动作位置保存在data文件中，如下图就是僵尸死亡的动画每个索引对应的坐标），找到索引对应的坐标，再把图片中对应坐标的动画绘制在canvas中。这就是一帧动画的绘制。

zombieDieCell=[{left:0,top:1035,width:58,height:53},
					{left:58,top:1035,width:58,height:53},
					{left:116,top:1035,width:58,height:53},
					{left:174,top:1035,width:58,height:53},
					{left:232,top:1035,width:58,height:53},
					{left:290,top:1035,width:58,height:53},
					{left:348,top:1035,width:58,height:53},
					{left:0,top:1088,width:58,height:53},
					{left:58,top:1088,width:58,height:53},
　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　

绘制完毕一帧后，就该原型中的advance方法出场了，该方法会让索引值+1，如果索引值达到最大（如我的动画基本都是22帧，也就是22幅画面组成一个动作），就删除这个动画。 （为什么要删除？想想如果索引值达到22我又给他赋值为1，那倒地的僵尸不就又站起来重复倒地么？删除表示这个动作做完了）

就是这么简单。

到这里我们再梳理下本节思路，我们介绍了Sprite构造函数，该构造函数接受4个参数，其中一个是painter，接下来我们介绍了一种很好用的painter--spriteSheet。　

// 精灵构造器
var Sprite= function  (name,context,painter,behaviors) {
	this.name=name;
	this.painter=painter;
	this.behaviors=behaviors || [];
}

接下来介绍behaviors，其实思路和painter一模一样。 刚才是每帧动画的绘制，接下来就是每帧动画所代表的行为绘制（想想如果仅仅绘制动画而没有行为，那僵尸一巴掌拍你身上，看起来吓人但根本不掉血啊！因为根本没触发攻击的行为）

这里截取僵尸的行为，源代码见game-loop 220行。（为啥这次的行为构造器不像spriteSheet一样放在game-engine里而放在game-loop里？因为spritesheet是任何游戏都能复用的部分所以放在引擎中，而不是所有游戏里都有僵尸，所以僵尸的行为代码放在我的游戏主体里）

ZombieBehaviors=function  () {
			this.interval=undefined;
			this.angleTriggle=false;
			this.sprite=undefined;
			this.angle=undefined;
			this.player=player;
		}

		ZombieBehaviors.prototype.hangout=function  () {

			};
		ZombieBehaviors.prototype.advance=function  () {

		};
		ZombieBehaviors.prototype.stepBack=function  () {

		};
		ZombieBehaviors.prototype.hunt=function  () {

		};
		ZombieBehaviors.prototype.freeze=function  () {

			}
		}
		ZombieBehaviors.prototype.execute=function  (sprite) {
			var random=Math.random();
			this.player=player;
			this.sprite=sprite;
			this.advance();
			this.stepBack();
			this.hangout();
			this.hunt();
			this.freeze();
		}

这就是僵尸的行为，中间具体的每个行为因为比较长我删掉了。大家从名字可以看出这些行为代表了僵尸被击退、被眩晕在原地、追踪玩家、闲逛。最后一个execute每次执行都会把僵尸所有行为都执行一次。在各个行为内部会检测当前是否适合执行该行为。

接下来我来简单演示下sprite怎么用。

首先我们定义好zombiePainter，源码见game-loop 326行。定义了painer名字叫“zombie”，他所用的cell数据来源于“zombie,monsterType[type].cell”。 所用的cell文件来源于“pics.getImage("images/sprite.png")”。 后面的参数定义了这个动画的大小，左右平移（用来和碰撞检测体积吻合）。

zombie.painter=new SpriteSheetPainter("zombie",zombie,monsterType[type].cell,pics.getImage("images/sprite.png"),monsterType[type].interval,monsterType[type].x,monsterType[type].y,monsterType[type].width,monsterType[type].height);

　接下来我们定义zombieBehaviors，这个构造函数告诉引擎僵尸都有哪些各式各样的行为。

至此，我们就完成了一个僵尸的创建，不仅有头有脸，而且有智商。

到这里还有最后一个问题，我们现在已经知道painter用来绘制一帧的画面，behavior用来显示当前帧僵尸的行为。但是为了让僵尸动起来，每一帧我们都必须调用他的painter和behavior，难道要我们每一帧都手动调用？

这，就是Sprite构造函数原型上两个方法做的事情了。

Sprite.prototype.paint=function  (context) {
        return this.painter.paint(context);
    };
Sprite.prototype.update=function  (sprite,time) {
        if (this.exist) {
            for (var i=0;i<this.behaviors.length;i++) {
                this.behaviors[i].execute(sprite,time);
            }
        }
    }

构造函数上有个paint和update方法，这两个方法会去调用我们传入的painter的paint方法 已经behaviors的execute方法。 还记得么，paint方法会绘制一帧的画面，execute方法会执行一遍僵尸所有的行为。

所以，我们可以通过Sprite的这两个方法来更新动画以及行为，那又是谁来调用这两个方法呢？上一章我们已经讲过了——游戏引擎。

　　　　　　　this.tick(time);
            this.clearScreen();
            this.startAnimate(time);
            this.paintUnderSprites();
            this.updateSprites(time);
            this.paintSprites();
            this.paintOverSprites();
            this.endAnimate();

还记得吗，游戏引擎每一帧都会将上面所有函数都调用一遍。其中

   this.updateSprites(time);
   this.paintSprites();

就是调用游戏内所有Sprite的paint方法以及update方法。  paint方法又会去调用painter的paint方法， update方法会去调用behavior的execute方法。

这里是这两个函数的源码：

updateSprites: function  (time) {
        for (var i=0;i<this.sprites.length;i++) {
            var sprite=this.sprites[i];
            if (sprite!==undefined) sprite.update(sprite,time);
        }
    },
    paintSprites: function  (time) {
        for (var i=0;i<this.sprites.length;i++) {
            var sprite=this.sprites[i];
            if (sprite!==undefined) sprite.paint(this.context);
        }

这下， 你懂了么，一层调用一层，一层包裹一层形成大大小小的模块，最后再由引擎调用。这么做看似复杂。但是如果游戏画面出了问题，我们从引擎出发，顺着引擎的

updateSprites和paintSprites找问题，没有问题继续往下一层Sprite找问题，再没问题就找Sprite的Painter和Behaviors。这样思路是很清晰的。

好了，现在我们有了满屏乱晃的僵尸，是时候召唤我们的英雄了，下一篇将告诉你如何控制你的英雄奔跑，射击。