一，話說天下大事
前不久看到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上一張圖片作為樣例，給大家看看這種裝滿小地圖的大圖是什么樣的：
我們要完成的效果是什么樣的呢？我把它放在這里，完成后看看實現度究竟有多少：
?
二，怎樣實現
準備工作：
首先你須要下載lufylegend，最新版本號是1.7.5，用1.7.3都行。
下載地址：http://lufylegend.com/lufylegend
上面有它的API和論壇，能夠看看。
另外推薦一本相關圖書，lufy寫的，叫《HTML5 Canvas游戲開發實戰》。用于學習基礎和了解開發技巧還是不錯的。當中另一些非常不錯的js技術指導。值得一看。
書籍介紹：http://lufylegend.com/book/view/1
?
開始編寫
因為lufylegend做的比較完美，那么我們封裝起來就比較簡單了。看看LTileMap完整構造器：
?
[javascript]?view plaincopy
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來實現了。
※lufy大神近期提示我：“把變量s和this等起來是為了防止this的指向發生變化，并不是單一降低引擎的大小。因為this的指向不一定一直指向當前函數的。”在此再次感謝lufy的支持。
?
首先我們讓它繼承LSprite，這樣假設我們改變x和y屬性后就能夠直接變換位置了。再追加兩個屬性：mapData和imgData。
mapData是通過data參數賦值的，data的賦值應該是一個二維數組，格式例如以下：
?
[javascript]?view plaincopy
[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方法：
?
[javascript]?view plaincopy
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[i][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);??????????????}??????}??}?? 它的功能非常easy，就是畫出地圖。當中的邏輯都非常easy。主要是這里：
?
?
[javascript]?view plaincopy
for(i=0;i<mapdata.length;i++){??????for(j=0;j<mapdata[0].length;j++){??????????index?=?mapdata[i][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，非常easy是不是？實現后我們怎么用它呢？看下面代碼：
?
[html]?view plaincopy
<!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>?? 執行代碼得到例如以下效果：
?
為了防止大家以為我ps圖片，那我就不仿把測試鏈接給出，大家自己看吧。
測試地址：http://www.cnblogs.com/yorhom/articles/3063759.html
代碼非常少，能夠自己復制粘貼下來看看。哈！
?
近期做了一個留言板，歡迎大家發表自己的意見
留言板地址：http://www.cnblogs.com/yorhom/archive/2013/04/20/3033235.html
?
----------------------------------------------------------------
歡迎大家轉載我的文章。
轉載請注明：轉自Yorhom's Game Box
歡迎繼續關注我的博客
總結
以上是生活随笔為你收集整理的如何实现一个HTML5 RPG游戏引擎——第一章，实现地图类的全部內容，希望文章能夠幫你解決所遇到的問題。
如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。
