一,话说全国年夜事
前没有暂看到lufy的专客上,有一名伴侣念要一个RPG游戏引擎,出于兴趣筹办入手做一做。因为我研讨lufylegend有冶时间了,对它有必然的依赖性,因而便筹办将那个引擎基于lufylegend。临时定名为lufylegendRPG。究竟结果基于lufylegend,假如名称中没有减上lufylegend那寂字的话,有面说欠亨啊。。。最远公布了0.1.0版,可是不睬念,连医柽皆是鼓舞战赞扬我的lufy老师长教师皆是出于至心的暗示没有合意。念理解0.1.0版的伴侣能够吭哟那里(其实最好别看,由于1.0正在用法上做了很年夜的调解):
http://blog.csdn.net/yorhomwang/article/details/8738733
于是我不能不从头去开发它。起首念到了舆图类,明天便去完成一下。
我们的舆图不该该是一张年夜舆图,而是用小舆图拼接而成,如许便利我们修正舆图。
如许的话我们需求许多舆图块的图片,凡是我们把它枚膛正在一张擅埽我们便用lufy老师长教师blog上一张图片做为例子,给各人吭哟这类拆谦小舆图的年夜图是甚么样的:
我们要完秤弈效果是甚么样的呢?渭已它放正在那里,完成后吭哟完成度到底有几:
两,如何完成
[color=ize:18px]筹办工做:
起首您需求下载lufylegend,最新版本是1.7.5,用1.7.3皆止。
下载地点:http://lufylegend.com/lufylegend
上里有它的API战论坛,能够吭哟。
别的保举一底细闭图书,lufy写的,叫《html5 Canvas游戏开发拭魅战》。用于教习根底战理解开发技巧仍是没有错的。此中借有一些很没有错的js手艺指点。值得一看。
册本引见:http://lufylegend.com/book/view/1
开端编写
因为lufylegend做的比力完美,那末我枚题拆起去便比力简单了。吭哟LTileMap完好机关器:
function LTileMap(data,img,width,height){
var s = this;
base(s,LSprite,[]);
s.x = 0;
s.y = 0;
s.mapData = data;
s.imgData = img;
if(!width){
var wbitmap = new LBitmapData(s.imgData);
s.partWidth = wbitmap.image.width;
}else{
s.partWidth = width;
}
if(!height){
var hbitmap = new LBitmapData(s.imgData);
s.partHeight = hbitmap.image.height;
}else{
s.partHeight = height;
}
s.onshow();
}起首为了削减引擎的巨细,我们把变量s战this等起去,上面用到this的处所便皆能用s去完成了。
起首我们让它继承LSprite,如许假如我梅崮变x战y属性后就能够间接变话诨置了。再逃减两个属性:mapData战imgData。
mapData是经由过程data参数赋值的,data的赋值该当是一个两维数组,格局以下:
[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]它拆载着舆图块狄座式,18洞喀的图块战55洞喀的图块是纷歧样的。前面我们会细讲。
imgData望文生义,它是一个拆图片的容器。
借有两个参数,它们是用去暗示舆图快的下度战宽度的。例如每张舆图块是32*42的,那末便要将width设为32,height设为42。如许的话便会将拆谦舆图块的图片分红小舆图。例如我们把上里那张图片分红每一个小舆图块是32*32的,也便是说width设为32,height也设为32,那末便显现现以下的情势:
(以上图片我间接用了lufy专客里的图片)这时候您能够吭哟18战55所洞喀的是甚么。18是一棵树,而55洞喀的是火,因而我们便做到了让每张舆图块隐示得没有同。
接下去是onshow办法:
LTileMap.prototype.onshow = function(){
var s = this;
var mapdata = s.mapData;
var partWidth = s.partWidth;
var partHeight = s.partHeight;
var i,j;
var index,indexY,indexX;
var bitmapdata,bitmap;
for(i=0;i<mapdata.length;i++){
for(j=0;j<mapdata[0].length;j++){
index = mapdata[j];
indexY = Math.floor(index/mapdata.length);
indexX = index - indexY*mapdata.length;
bitmapdata = new LBitmapData(s.imgData,indexX*partWidth,indexY*partHeight,partWidth,partHeight);
bitmap = new LBitmap(bitmapdata);
bitmap.x = j*partWidth + s.x;
bitmap.y = i*partHeight + s.y;
s.addChild(bitmap);
}
}
}它的功用很简单,便是绘出舆图。此中的逻辑皆很简单。次要是那里:
for(i=0;i<mapdata.length;i++){
for(j=0;j<mapdata[0].length;j++){
index = mapdata[j];
indexY = Math.floor(index/mapdata.length);
indexX = index - indexY*mapdata.length;
bitmapdata = new LBitmapData(s.imgData,indexX*partWidth,indexY*partHeight,partWidth,partHeight);
bitmap = new LBitmap(bitmapdata);
bitmap.x = j*partWidth + s.x;
bitmap.y = i*partHeight + s.y;
s.addChild(bitmap);
}
}那冶漾码是绘出舆图的中心,起首它遍历了舆图数组,然后每遍历一个便绘一张,然后减到本身中。因为本身是继承自LSprite,所本地吐减到本身中时,再将本身减到蹬鲢或者其他Sprite中时,整个截里便会隐示。
over,很简单是否是?完成后我玫刘么用它呢?看以下代码:
<!DOCTYPE html>
< html lang="en">
<head>
<meta charset="utf-8" />
<title>LTileMap</title>
<script type="text/JAVAscript" src="../lufylegend-1.7.3.min.js"></script>
<script type="text/javascript" src="../lufylegendrpg-1.0.0.min.js"></script>
<script>
init(30,"legend",480,320,main);
LGlobal.setDebug(true);
var backLayer,loadingLayer;
var map;
var loadData = [
{name:"map",path:"./map.jpg"}
];
var imglist = [];
var mapData = [
[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]
];
function main(){
//参加进度条
loadingLayer = new LoadingSample1();
addChild(loadingLayer);
//减载图片并隐示进度
LLoadManage.load(
loadData,
function(progress){
loadingLayer.setProgress(progress);
},
gameInit
);
}
function gameInit(result){
removeChild(loadingLayer);
imglist = result;
//初初化层
backLayer = new LSprite();
addChild(backLayer);
//参加舆图
addMap();
}
function addMap(){
map = new LTileMap(mapData,imglist["map"],32,32);
backLayer.addChild(map);
}
</script>
</head>
<body>
<div id="legend"></div>
</body>
< /html>
运转代码得到以下效果:更多请查看:http://www.shengshiyouxi.com
HTML5 RPG游戏引擎 地图实现篇
最新推荐文章于 2024-01-21 12:15:54 发布