本文主要包含HTML5，cnGameJS，精灵对象等相关知识,匿名希望在学习及工作中可以帮助到您
返回目录
1.什么是精灵对象（sprite）？
所谓的精灵对象，就是游戏中的一个具有行为的元素，以超级玛丽为例，玛丽，敌人都算是一个精灵对象。在cnGameJS框架中，精灵对象如下几个特点：
1.添加动画：在之前的动画篇中，我们介绍过cnGameJS如何实现帧动画。而作为精灵对象，就是动画的使用者。例如我们控制玛丽向不同方向的行走，玛丽会产生行走的动画。
2.包含图像：对于另外一些精灵对象，它可能不需要运动动画，这时我们就可以只让它使用图像。
3.能进行不同类型的运动：可以让精灵对象向不同方向，以不同加速度进行移动。
2.demo展现
这里以一个简单的demo进行展现，我们通过鼠标控制玛丽的行动（匀加速运动），当玛丽停止时，使用图片。当玛丽移动时，使用动画，键盘左右方向键控制玛丽的移动。
效果：
代码：
<body>
<div><canvas id="gameCanvas">请使用支持canvas的浏览器查看</canvas></div>
</body>
<script src="http://files.cnblogs.com/Cson/cnGame_v1.0.js"></script>
<script>
var Src="http://images.cnblogs.com/cnblogs_com/Cson/290336/o_player.png";
/* 初始化 */
cnGame.init('gameCanvas',{width:300,height:150});
var floorY=cnGame.height-40;
var gameObj=(function(){
/* 玩家对象 */
var player=function(options){
this.init(options);
this.speedX=0;
this.moveDir;
this.isJump=false;
}
cnGame.core.inherit(player,cnGame.Sprite);
player.prototype.initialize=function(){
this.addAnimation(new cnGame.SpriteSheet("playerRight",Src,{frameSize:[50,60],loop:true,width:150,height:60}));
this.addAnimation(new cnGame.SpriteSheet("playerLeft",Src,{frameSize:[50,60],loop:true,width:150,height:120,beginY:60}));
}
player.prototype.moveRight=function(){
if(cnGame.core.isUndefined(this.moveDir)||this.moveDir!="right"){
this.moveDir="right";
this.speedX<0&&(this.speedX=0);
this.setMovement({aX:10,maxSpeedX:15});
this.setCurrentAnimation("playerRight");
}
}
player.prototype.moveLeft=function(){
if(cnGame.core.isUndefined(this.moveDir)||this.moveDir!="left"){
this.moveDir="left";
this.speedX>0&&(this.speedX=0);
this.setMovement({aX:-10,maxSpeedX:15});
this.setCurrentAnimation("playerLeft");
}
}
player.prototype.stopMove=function(){
if(this.speedX<0){
this.setCurrentImage(Src,0,60);
}
else if(this.speedX>0){
this.setCurrentImage(Src);
}
this.moveDir=undefined;
this.resetMovement();
}
player.prototype.update=function(){
player.prototype.parent.prototype.update.call(this);//调用父类update
if(cnGame.input.isPressed("right")){
this.moveRight();
}
else if(cnGame.input.isPressed("left")){
this.moveLeft();
}
else{
this.stopMove();
}
}
return {
initialize:function(){
cnGame.input.preventDefault(["left","right","up","down"]);
this.player=new player({src:Src,width:50,height:60,x:0,y:floorY-60});
this.player.initialize();
},
update:function(){
this.player.update();
},
draw:function(){
this.player.draw();
}
};
})();
cnGame.loader.start([Src],gameObj);
</script>
复制代码3.实现
和动画篇spriteSheet对象一样，sprite对象同样划分三个阶段：初始化，更新，绘制。
首先看sprite的初始化函数：
/**
*初始化
**/
init:function(options){
/**
*默认对象
**/
var defaultObj={
x:0,
y:0,
imgX:0,
imgY:0,
width:32,
height:32,
angle:0,
speedX:0,
speedY:0,
aX:0,
aY:0,
maxSpeedX:postive_infinity,
maxSpeedY:postive_infinity,
maxX:postive_infinity,
maxY:postive_infinity,
minX:-postive_infinity,
minY:-postive_infinity
};
options=options||{};
options=cg.core.extend(defaultObj,options);
this.x=options.x;
this.y=options.y;
this.angle=options.angle;
this.width=options.width;
this.height=options.height;
this.angle=options.angle;
this.speedX=options.speedX;
this.speedY=options.speedY;
this.aX=options.aX;
this.aY=options.aY;
this.maxSpeedX=options.maxSpeedX;
this.maxSpeedY=options.maxSpeedY;
this.maxX=options.maxX;
this.maxY=options.maxY;
this.minX=options.minX;
this.minY=options.minY;
this.spriteSheetList={};
if(options.src){ //传入图片路径
this.setCurrentImage(options.src,options.imgX,options.imgY);
}
else if(options.spriteSheet){//传入spriteSheet对象
this.addAnimation(options.spriteSheet);
setCurrentAnimation(options.spriteSheet);
}
}参数很多，主要包括：对象位置，旋转角度，尺寸，xy方向的速度，xy方向的加速度，xy方向的最大速度。另外如果用户传入图片地址，则设置当前sprite对象使用图片，否则使用spriteSheet动画。
先看看sprite对象如何使用图像:
/**
*设置当前显示图像
**/
setCurrentImage:function(src,imgX,imgY){
if(!this.isCurrentImage(src,imgX,imgY)){
imgX=imgX||0;
imgY=imgY||0;
this.image=cg.loader.loadedImgs[src];
this.imgX=imgX;
this.imgY=imgY;
this.spriteSheet=undefined;
}
},首先检测现在是否正在使用该图像，如果不是，则从loader里获取下载好的image对象（所有图像资源在游戏开始时已下载好，），并且设置spriteSheet为undefined（表示不使用spriteSheet动画），这样sprite对象就可以使用图像了。
再看看如何使用动画：
/**
*设置当前显示动画
**/
setCurrentAnimation:function(id){//可传入id或spriteSheet
if(!this.isCurrentAnimation(id)){
if(cg.core.isString(id)){
this.spriteSheet=this.spriteSheetList[id];
this.image=this.imgX=this.imgY=undefined;
}
else if(cg.core.isObject(id)){
this.spriteSheet=id;
this.addAnimation(id);
this.image=this.imgX=this.imgY=undefined;
}
}
},
复制代码首先根据传入的spriteSheet或spriteSheet的id判断是否正在使用该动画，如果不是，则设置sprite使用spriteSheet动画。
设置好sprite对象使用动画后，核心函数update就负责调用spriteSheet的update，更新sprite使用的动画，需要注意的是使spriteSheet的xy为sprite的xy：
i