素材处理：从gif图片到游戏角色
做游戏的时候，找素材是挺费劲儿的事儿，还好有老铁Yorhomwang告诉咱们有个资源网站可以搜一下，真的帮大忙了！这次用上了一堆动态炫酷的GIF图！要运用这些图的话，得把每帧的动作拆开然后合成新图。不想让大家浪费太多时间，所以给大家准备了超实用的Flash转图工具，直接在这儿下就好~
地图移动与角色添加
var back_run = true;
为了让游戏更好玩儿，我们让地图变得动态化！设定个变量看地图能否动来动去，没错它真的可以移动假的可不行呦～游戏中主角黄老将走到哪里，地图跟到哪里。特别的是，如果他开始走的话，标记的坐标也会跟着变，感觉像是地形都晃悠起来了。还有就是，我们会在主角行动时调用加敌函数，看看是不是得让战场多些敌人？
Player.prototype.move = function (){
var self = this, mx = 0, my = 0;
if(keyCtrl[KEY.LEFT] && charaLayer.x + self.x > 0){
mx = -1;
}else if(keyCtrl[KEY.RIGHT] && charaLayer.x + self.x 0 && charaLayer.x + self.x > LGlobal.width * 0.5){
var setX = mx*MOVE_STEP;
if(backLayer.data.x + setX + backLayer.data.width > backLayer.data.image.width){
back_run = false;
setX = backLayer.data.image.width - backLayer.data.width - backLayer.data.x;
}
charaLayer.x -= setX;
backLayer.data.setCoordinate(backLayer.data.x + setX,backLayer.data.y);
addEnemy();
}
self.callParent("move",arguments);
};
敌人角色添加及AI设计
咱们玩点新鲜的！给游戏加几个敌人怎么样？先弄点儿孙尚香那种的素材，创建一个新类叫Enemy，把它跟Character里面的东西继承下来。这样敌人就加进去了！接下来，咱们瞅瞅addEnemy()这家伙到底啥时候、在哪儿添敌人，关键在于预先设置的enemy_list数组。顺便提一下，这个数组里还有其他重要信息，比如什么时候出现敌人，敌人消失后地图要不要停滞等等。做完这些，得让敌人有点自己的智能，也就是添加点AI行为！
function Enemy(list,speed){
var self = this;
base(this,Character,[list,speed]);
self.belong = "enemy";
self.hp = 100;
};
Enemy.prototype.onjump = function (){
var self = this;
self.callParent("onjump",arguments);
self.setLocation();
var index = self.anime.colIndex;
self.yArr = [0,-10,-20,-30,-40,-40,-30,-20,-10,0];
self.anime.y += self.yArr[index];
};
Enemy.prototype.onjump_attack = function (){
var self = this;
self.callParent("onjump_attack",arguments);
self.setLocation();
var index = self.anime.colIndex;
if(index >= self.yArr.length)return;
self.anime.y += self.yArr[index];
};
Enemy.prototype.setAction = function (action,direction){
var self = this,yArr = new Array();
if(action == ACTION.MOVE && self.action == ACTION.JUMP)return;
if(action == ACTION.JUMP_ATTACK){
var index = self.anime.colIndex,i;
for(i = index;i0){
self.anime.y += self.yArr[0];
}
};
Enemy.prototype.overActionRun = function (lastAction,animeAction){
var self = this;
self.callParent("overActionRun",arguments);
keylock = false;
if(lastAction == ACTION.FALL){
if(self.direction == DIRECTION.LEFT){
self.x += 80;
}else{
self.x -= 80;
}
}
};
Enemy.prototype.move = function (){
var self = this, mx = 0, my = 0;
self.mx = mx;
self.my = my;
self.callParent("move",arguments);
};
攻击与碰撞检测
打斗是游戏里关键的一环关于碰撞检测，咱们就用矩形对象，好使又简单。这项任务靠着Lufylegend.js引擎的LGlobal.hitTest()函数，以及LRectangle类的intersects()函数给轻松搞定了。具体咋弄？就是为各个角色安排一个能攻多少距离的范围，再设个容易受伤的区域。最后在他们的初始设定里加上碰撞检测就可以。
var enemy_list = new Array(
{name:"sunji",x:800,y:350,when_x:300,back_run:false},
{name:"huangzhong",x:1200,y:280,when_x:800,back_run:true}
);
function addEnemy(){
if(enemy_list.length == 0)return;
if(enemy_list[0].when_x > hero.x)return;
var charadata = CharacterList[enemy_list[0].name]();
var enemy = new Enemy(charadata);
enemy.x = enemy_list[0].x;
enemy.y = enemy_list[0].y;
charaLayer.addChild(enemy);
enemy_list.shift();
}
源码下载与测试链接
小伙伴们，快点开始做游戏！快来学习我们已做好的东西，并下载源代码体验下！愿你能从中挖掘到属于你个人独特的趣味与灵感哟～
var CharacterList = {
huangzhong:function(){
//图片数据
var dataList = new Array();
dataList.push(new LBitmapData(imglist["player_stand"],0,0,106,77));
dataList.push(new LBitmapData(imglist["player_move"],0,0,115,85));
dataList.push(new LBitmapData(imglist["player_run"],0,0,125,87));
dataList.push(new LBitmapData(imglist["player_jump"],0,0,131,134));
dataList.push(new LBitmapData(imglist["player_attack"],0,0,242,143));
dataList.push(new LBitmapData(imglist["player_big_attack"],0,0,232,143));
dataList.push(new LBitmapData(imglist["player_jump_attack"],0,0,232,143));
dataList.push(new LBitmapData(imglist["player_hit"],0,0,161,88));
dataList.push(new LBitmapData(imglist["player_skill"],0,0,324,140));
dataList.push(new LBitmapData(imglist["player_big_skill"],0,0,441,166));
dataList.push(new LBitmapData(imglist["player_hert"],0,0,179,87));
dataList.push(new LBitmapData(imglist["player_fall"],0,0,298,157));
//图片分割数据
var coordinateList = new Array();
coordinateList.push(LGlobal.pideCoordinate(1272,77,1,12));
coordinateList.push(LGlobal.pideCoordinate(920,85,1,8));
coordinateList.push(LGlobal.pideCoordinate(750,87,1,6));
var jumpList = LGlobal.pideCoordinate(655,134,1,5);
coordinateList.push([[jumpList[0][0],jumpList[0][0],jumpList[0][1],jumpList[0][1],jumpList[0][2],jumpList[0][2],jumpList[0][3],jumpList[0][3],jumpList[0][4],jumpList[0][4]]]);
var attackList = LGlobal.pideCoordinate(484,143,1,2);
coordinateList.push([[attackList[0][0],attackList[0][1],attackList[0][1],attackList[0][1]]]);
var bigattackList = LGlobal.pideCoordinate(927,143,1,4);
coordinateList.push(bigattackList);
var jumpattackList = LGlobal.pideCoordinate(927,143,1,4);
coordinateList.push(jumpattackList);
coordinateList.push(LGlobal.pideCoordinate(966,88,1,6));
coordinateList.push(LGlobal.pideCoordinate(2268,140,1,7));
var bigskillList = LGlobal.pideCoordinate(2205,830,5,5);
coordinateList.push([[bigskillList[0][0],bigskillList[0][1],bigskillList[0][2],bigskillList[0][3],bigskillList[0][4]
,bigskillList[1][0],bigskillList[1][1],bigskillList[1][2],bigskillList[1][3],bigskillList[1][4]
,bigskillList[2][0],bigskillList[2][1],bigskillList[2][2],bigskillList[2][3],bigskillList[2][4]
,bigskillList[3][0],bigskillList[3][1],bigskillList[3][2],bigskillList[3][3],bigskillList[3][4]
,bigskillList[4][0],bigskillList[4][1],bigskillList[4][2],bigskillList[4][3],bigskillList[4][4]]]);
var hertList = LGlobal.pideCoordinate(358,87,1,2);
coordinateList.push([[hertList[0][0],hertList[0][0],hertList[0][1],hertList[0][1]]]);
var fallList = LGlobal.pideCoordinate(2682,157,1,9);
coordinateList.push([[fallList[0][0],fallList[0][1],fallList[0][2],fallList[0][3],fallList[0][4],fallList[0][5],fallList[0][6],fallList[0][6],fallList[0][6],fallList[0][7],fallList[0][7],fallList[0][6],fallList[0][6],fallList[0][7],fallList[0][8]]]);
//图片位置数据
var locationList = new Array();
locationList.push({x:0,y:0});
locationList.push({x:0,y:0});
locationList.push({x:0,y:0});
locationList.push({x:0,y:0});
locationList.push({x:20,y:20});
locationList.push({x:20,y:20});
locationList.push({x:20,y:20});
locationList.push({x:0,y:0});
locationList.push({x:100,y:0});
locationList.push({x:150,y:20});
locationList.push({x:5,y:0});
locationList.push({x:-30,y:10});
//被攻击范围
var hertList = [[[-30,-60,60,50],[-30,-60,60,50],[-30,-60,60,50],[-30,-60,60,50],[-30,-60,60,50],[-30,-60,60,50],[-30,-60,60,50],[-30,-60,60,50],[-30,-60,60,50],[-30,-60,60,50],[-30,-60,60,50],[-30,-60,60,50]],
[[-30,-70,50,60],[-30,-70,50,60],[-30,-70,50,60],[-30,-70,50,60],[-30,-70,50,60],[-30,-70,50,60],[-30,-70,50,60],[-30,-70,50,60]],
[[-30,-70,60,60],[-30,-70,60,60],[-30,-70,60,60],[-30,-70,60,60],[-30,-70,60,60],[-30,-70,60,60]],
[[-25,-70,50,60],[-25,-70,50,60],[-25,-70,50,60],[-25,-70,50,60],[-25,-70,50,60]],
[[-10,-60,30,60],[-10,-60,30,60],[-30,-60,30,60],[-30,-60,30,60]],
[[0,-60,40,60],[0,-60,40,60],[-20,-60,30,60],[-20,-60,30,60]],
[],
[[-20,-60,30,60],[-20,-60,30,60],[-20,-60,30,60],[-20,-60,30,60],[-20,-60,30,60],[-20,-60,30,60]],
[[0,-70,40,60],[0,-70,40,60]],
[],[],[]
];
//攻击范围
var attackList = [[],[],[],[],
[[0,0,0,0],[0,0,0,0],[-10,-70,115,60],[-10,-70,115,60]],
[[0,0,0,0],[0,0,0,0],[-10,-100,140,90],[-10,-100,140,90]],
[[0,0,0,0],[0,0,0,0],[-10,-130,115,60],[-10,-110,140,120]],
[[10,-70,30,70],[10,-70,30,70],[10,-70,30,70],[10,-70,30,70],[10,-70,30,70],[10,-70,30,70]],
[[0,0,0,0],[0,0,0,0],[-40,-70,80,60],[-60,-100,80,60],[20,-100,130,100],[20,-100,130,100]],
[[0,0,0,0],[0,0,0,0],[0,0,0,0],[0,0,0,0],[0,0,0,0],[0,0,0,0],[0,0,0,0],[0,0,0,0],
[50,-105,50,20],[60,-100,120,40],[60,-90,150,40],[50,-80,190,40],[50,-80,210,40],
[50,-75,310,60],[50,-75,310,60],[50,-75,310,60],[50,-75,310,80]],[],[]
];
return [dataList,coordinateList,locationList,hertList,attackList];
},
sunji:function(){
//图片数据
var dataList = new Array();
dataList.push(new LBitmapData(imglist["sunji_stand"],0,0,129,89));
dataList.push(new LBitmapData(imglist["sunji_move"],0,0,128,97));
dataList.push(new LBitmapData(imglist["sunji_run"],0,0,125,77));
dataList.push(new LBitmapData(imglist["sunji_jump"],0,0,131,134));
dataList.push(new LBitmapData(imglist["sunji_attack"],0,0,197,103));
dataList.push(new LBitmapData(imglist["sunji_big_attack"],0,0,198,103));
dataList.push(new LBitmapData(imglist["sunji_jump_attack"],0,0,182,143));
dataList.push(new LBitmapData(imglist["sunji_hit"],0,0,238,86));
dataList.push(new LBitmapData(imglist["sunji_skill"],0,0,215,102));
dataList.push(new LBitmapData(imglist["sunji_big_skill"],0,0,275,139));
dataList.push(new LBitmapData(imglist["sunji_hert"],0,0,131,79));
dataList.push(new LBitmapData(imglist["sunji_fall"],0,0,249,136));
//图片分割数据
var coordinateList = new Array();
coordinateList.push(LGlobal.pideCoordinate(1548,89,1,12));
coordinateList.push(LGlobal.pideCoordinate(640,97,1,5));
coordinateList.push(LGlobal.pideCoordinate(1000,77,1,8));
var jumpList = LGlobal.pideCoordinate(655,134,1,5);
coordinateList.push([[jumpList[0][0],jumpList[0][0],jumpList[0][1],jumpList[0][1],jumpList[0][2],jumpList[0][2],jumpList[0][3],jumpList[0][3],jumpList[0][4],jumpList[0][4]]]);
var attackList = LGlobal.pideCoordinate(394,103,1,2);
coordinateList.push([[attackList[0][0],attackList[0][1],attackList[0][1],attackList[0][1]]]);
var bigattackList = LGlobal.pideCoordinate(792,103,1,4);
coordinateList.push(bigattackList);
var jumpattackList = LGlobal.pideCoordinate(728,143,1,4);
coordinateList.push(jumpattackList);
coordinateList.push(LGlobal.pideCoordinate(1428,86,1,6));
coordinateList.push(LGlobal.pideCoordinate(2365,102,1,11));
var bigskillList = LGlobal.pideCoordinate(1650,695,5,6);
coordinateList.push([[bigskillList[0][0],bigskillList[0][1],bigskillList[0][2],bigskillList[0][3],bigskillList[0][4],bigskillList[0][5]
,bigskillList[1][0],bigskillList[1][1],bigskillList[1][2],bigskillList[1][3],bigskillList[1][4],bigskillList[1][5]
,bigskillList[2][0],bigskillList[2][1],bigskillList[2][2],bigskillList[2][3],bigskillList[2][4],bigskillList[2][5]
,bigskillList[3][0],bigskillList[3][1],bigskillList[3][2],bigskillList[3][3],bigskillList[3][4],bigskillList[3][5]
,bigskillList[4][0],bigskillList[4][1],bigskillList[4][2],bigskillList[4][3],bigskillList[4][4],bigskillList[4][5]]]);
var hertList = LGlobal.pideCoordinate(262,79,1,2);
coordinateList.push([[hertList[0][0],hertList[0][0],hertList[0][1],hertList[0][1]]]);
var fallList = LGlobal.pideCoordinate(1245,544,4,5);
coordinateList.push([[fallList[0][0],fallList[0][1],fallList[0][2],fallList[0][3],fallList[0][4],fallList[1][0],fallList[1][1],fallList[1][2],fallList[1][3],fallList[1][4],fallList[2][0],fallList[2][1],fallList[2][2],fallList[2][3],fallList[2][4],fallList[3][0],fallList[3][1],fallList[3][2],fallList[3][3],fallList[3][4]]]);
//图片位置数据
var locationList = new Array();
locationList.push({x:0,y:0});
locationList.push({x:0,y:0});
locationList.push({x:0,y:0});
locationList.push({x:0,y:0});
locationList.push({x:40,y:8});
locationList.push({x:20,y:0});
locationList.push({x:20,y:20});
locationList.push({x:0,y:0});
locationList.push({x:0,y:0});
locationList.push({x:70,y:10});
locationList.push({x:5,y:0});
locationList.push({x:-35,y:0});
//被攻击范围
var hertList = [[[-25,-70,60,60],[-25,-70,60,60],[-25,-70,60,60],[-25,-70,60,60],[-25,-70,60,60],[-25,-70,60,60],[-25,-70,60,60],[-25,-70,60,60],[-25,-70,60,60],[-25,-70,60,60],[-25,-70,60,60],[-25,-70,60,60]],
[[-25,-90,50,80],[-25,-90,50,80],[-25,-90,50,80],[-25,-90,50,80],[-25,-90,50,80],[-25,-90,50,80],[-25,-90,50,80],[-25,-90,50,80]],
[[-30,-60,70,40],[-30,-60,70,40],[-30,-60,70,40],[-30,-60,70,40],[-30,-60,70,40],[-30,-60,70,40]],
[[-25,-90,50,70],[-25,-90,50,70],[-25,-90,50,70],[-25,-90,50,70],[-25,-90,50,70]],
[[-20,-80,50,70],[-20,-80,50,70],[-10,-60,70,50],[-10,-60,70,50]],
[[-10,-80,50,60],[-10,-80,50,60],[-10,-80,50,60],[-10,-80,50,60]],
[[-30,-80,50,70],[-30,-80,50,70],[-30,-80,50,70],[-30,-80,50,70]],
[[-20,-70,60,60],[-20,-70,60,60],[-20,-70,60,60],[-20,-70,60,60],[-20,-70,60,60],[-20,-70,60,60]],
[[-10,-80,40,70],[-10,-80,40,70]],
[],[],[]
];
//攻击范围
var attackList = [[],[],[],[],
[[0,0,0,0],[0,0,0,0],[30,-70,75,60],[30,-70,75,60]],
[[0,0,0,0],[0,0,0,0],[20,-100,80,90],[20,-100,80,90]],
[[0,0,0,0],[0,0,0,0],[-10,-90,100,80],[-10,-90,100,80]],
[[10,-70,50,70],[10,-70,50,70],[10,-70,50,70],[10,-70,50,70],[10,-70,50,70],[10,-70,50,70]],
[[0,0,0,0],[0,0,0,0],[-30,-70,90,60],[-90,-70,130,60],[-100,-80,140,70],[-40,-80,140,70]],
[[0,0,0,0],[0,0,0,0],[0,0,0,0],[0,0,0,0],[0,0,0,0],[0,-100,100,40],[0,-110,100,50],[0,-110,100,50],
[0,0,0,0],[20,-120,140,120],[20,-120,130,120],[-50,-120,160,120],[-60,-80,180,80],
[-20,-50,150,60],[-10,-60,150,60],[50,-60,90,60],[50,-75,150,70],[50,-75,150,70],
[50,-75,150,70],[50,-75,150,70]],[],[]
];
return [dataList,coordinateList,locationList,hertList,attackList];
}
}
。
评论0