在地图显示的时候,首先把图片切割,然后在根据预先设定好的位置显示到地图层上,这样我们就看到了一张完整的地图了
接下来,打开Main.js
在里面加入
init(50,"mylegend",480,320,main);
在legendForHtml5Progarmming中,用init这个函数来初始化canvas,上面的代码表示,初始化一个速度为50,名字为mylegend,大小为480*320的游戏界面,初始化完成后调用main(),这个速度值是说每个多少毫秒游戏循环一次,所以这个值设定的越小,游戏运行的速度就越快
因为要调用main方法,所以我们要写一个main方法,main方法里做一些简单的准备工作。
虽说读取图片只需要一个
loader.load("map.jpg","bitmapData");
但是游戏中往往用到很多张图片,你可以用到哪一张再加载哪一张,也可以一次性全部加载完,然后再开始显示游戏
为了一次性把图片加载完,我的做法是,将需要的图片放到一个数组里,然后设定一个索引,每加载一个图片,让这个索引加1,当这个索引小于数组的长度,则继续加载,直到将数组中的图片全部加载完,然后开始进行下一步的工作
具体实现看下面的代码
//图片path数组
varimgData=newArray();
//读取完的图片数组
varimglist= {};
function main(){
//准备读取图片
imgData.push({name:"map",path:"./image/map.jpg"});
imgData.push({name:"mingren",path:"./image/mingren.png"});
imgData.push({name:"e1",path:"./image/e1.png"});
imgData.push({name:"e2",path:"./image/e2.png"});
//实例化进度条层
loadingLayer=newLSprite();
loadingLayer.graphics.drawRect(1,"black",[50, 200, 200, 20],true,"#ffffff");
addChild(loadingLayer);
//开始读取图片
loadImage();
}
function loadImage(){
//图片全部读取完成,开始初始化游戏
if(loadIndex>= imgData.length){
removeChild(loadingLayer);
legendLoadOver();
gameInit();
return;
}
//开始读取图片
loader=newLLoader();
loader.addEventListener(LEvent.COMPLETE,loadComplete);
loader.load(imgData[loadIndex].path,"bitmapData");
}
function loadComplete(event){
//进度条显示
loadingLayer.graphics.clear();
loadingLayer.graphics.drawRect(1,"black",[50, 200, 200, 20],true,"#ffffff");
loadingLayer.graphics.drawRect(1,"black",[50, 203, 200*(loadIndex/imgData.length), 14],true,"#000000");
//储存图片数据
imglist[imgData[loadIndex].name] = loader.content;
//读取下一张图片
loadIndex++;
loadImage();
}
上面的代码不难明白,当图片没有读取完之前,会不断循环loadImage和loadComplete两个方法,当读取完之后,移除进度条,用legendLoadOver告诉游戏已经读取完成,然后调用gameInit方法,进行游戏的初始化工作。
看gameInit方法
function gameInit(event){
//游戏层显示初始化
layerInit();
//添加地图
addMap();
//添加人物
addChara();
}
在gameInit方法中,首先进行游戏层的初始化,然后添加游戏地图,然后添加人物
游戏层显示初始化,按照我们一开始所说,我们一次来初始化地图层,人物层,效果层,对话层,控制层
//游戏层显示初始化
function layerInit(){
//游戏底层添加
backLayer=newLSprite();
addChild(backLayer);
//地图层添加
mapLayer=newLSprite();
backLayer.addChild(mapLayer);
//人物层添加
charaLayer=newLSprite();
backLayer.addChild(charaLayer);
//效果层添加
effectLayer=newLSprite();
backLayer.addChild(effectLayer);
//对话层添加
talkLayer=newLSprite();
backLayer.addChild(talkLayer);
//控制层添加
ctrlLayer=newLSprite();
backLayer.addChild(ctrlLayer);
}
有了游戏层次的划分,我们在添加游戏对象的时候,将地图添加到地图层,人物添加到人物层,他们就会依次显示在游戏的界面
下面开始添加地图
首先我们需要准备好显示地图的数组
//地图图片数组
varmap= [
[18,18,18,18,18,18,18,18,18,18,18,18,55,55,18],
[18,18,18,17,17,17,17,17,17,17,17,17,55,55,18],
[18,18,17,17,17,17,18,18,17,17,17,17,55,55,18],
[18,17,17,17,18,18,18,18,18,17,17,55,55,17,18],
[18,17,17,18,22,23,23,23,24,18,17,55,55,17,18],
[18,17,17,18,25,28,26,79,27,18,55,55,17,17,18],
[18,17,17,17,17,10,11,12,18,18,55,55,17,17,18],
[18,18,17,17,10,16,16,16,11,55,55,17,17,17,18],
[18,18,17,17,77,16,16,16,16,21,21,17,17,17,18],
[18,18,18,18,18,18,18,18,18,55,55,18,18,18,18]
];
这些数字分别对应着图中如下位置