因爲上一篇雷電的開發中，有朋友反應不太理解，本篇將以零基礎的視點，來講解如何開發一款RPG遊戲。
在遊戲的世界裏，我們可以看到各種地圖，各種遊戲人物，看到人物在地圖上行走，對話等，無論是地圖還是人物，其實都是圖片的處理與顯示，把不同的圖片顯示到屏幕上，我們就看到不同的遊戲界面，要想讓這些圖片同時顯示到界面上，我們就需要處理好層次，讓他們來分層顯示，我們可以想象，如果遊戲人物顯示在地圖的下層的話，顯然會被地圖遮擋住。
一款RPG遊戲，我簡單把它分爲地圖層，人物層，效果層(一些法術效果等)，對話層，控制層(按鈕菜單等)。
如下圖
我們只要依次將圖片畫在屏幕上，遊戲人物將站在地圖上，如果有對話，對話將出現在人物和地圖的上面，而按鈕等控件會出現在遊戲的最外層
下面，我們一步步來實現一個簡單的RPG遊戲的開發
準備工作
一，庫件下載
本遊戲開發，需要用到開源庫件：LegendForHtml5Programming
請到這裏下載最新版的LegendForHtml5Programming，本次開發需要1.2版以上
http://code.google.com/p/legendforhtml5programming/downloads/list
庫件的開發過程請看這裏
http://blog.csdn.net/lufy_legend/article/details/6844949
二，庫件配置
首先建立一個文件夾rpg(你也可以起其他的名字)
然後將下載的庫件解壓，解壓後將legend文件夾放到與rpg文件夾同目錄
然後，在rpg文件夾裏建一個index.html文件和一個js文件夾，在js文件夾裏建一個Main.js文件
最後，在index.html里加入下面的代碼
- <!DOCTYPE html>
- <html>
- <head>
- <meta charset="UTF-8">
- <title>rpg</title>
- </head>
- <body>
- <div id="mylegend">loading……</div>
- <!-- 引入LegendForHtml5Programming庫件 -->
- <script type="text/javascript" src="../legend/legend.js"></script>
- <script type="text/javascript" src="./js/Main.js"></script>
- </body></html>
當然，你也可以將legend文件夾放到其他地方，但是你需要修改legend文件夾下的legend.js文件中的LEGEND_PATH的值，來配置庫件的路徑
遊戲地圖的實現
接下來，我們先來畫最底層的地圖層，地圖當然就是是由圖片來組成的，如何在畫面上顯示一張圖片，我之前已經寫過專門的文章，代碼如下
- var loader;
- function main(){
- loader = new LLoader();
- loader.addEventListener(LEvent.COMPLETE,loadBitmapdata);
- loader.load("map.jpg","bitmapData");
- }
- function loadBitmapdata(event){
- var bitmapdata = new LBitmapData(loader.content);
- var bitmap = new LBitmap(bitmapdata);
- addChild(bitmap);
- }
用仿ActionScript的語法來編寫html5——第一篇，顯示一張圖片
http://blog.csdn.net/lufy_legend/article/details/6753032
遊戲中的地圖可以是一張比較大的圖片，即整個圖片就是遊戲的地圖，當人物或者地圖移動的時候，改變圖片顯示的區域範圍，從而實現地圖的滾動和顯示等，這樣的話，必須爲每個場景準備一張地圖。
另外，地圖也可以是由許多小的地圖塊兒來組成，比如，我們熟悉的《吞食天地》，《勇者鬥惡龍》等經典小型rpg遊戲，這樣的地圖，我們需要準備一張或幾張地圖塊兒，把這些地圖塊組合成地圖來顯示，比如下圖
在地圖顯示的時候，首先把圖片切割，然後在根據預先設定好的位置顯示到地圖層上，這樣我們就看到了一張完整的地圖了
接下來，打開Main.js
在裏面加入
- init(50,"mylegend",480,320,main);
因爲要調用main方法，所以我們要寫一個main方法，main方法裏做一些簡單的準備工作。
雖說讀取圖片只需要一個
- loader.load("map.jpg","bitmapData");
爲了一次性把圖片加載完，我的做法是，將需要的圖片放到一個數組裏，然後設定一個索引，每加載一個圖片，讓這個索引加1，當這個索引小於數組的長度，則繼續加載，直到將數組中的圖片全部加載完，然後開始進行下一步的工作
具體實現看下面的代碼
- //圖片path數組
- var imgData = new Array();
- //讀取完的圖片數組
- var imglist = {};
- 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 = new LSprite();
- 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 = new LLoader();
- 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();
- }
看gameInit方法
- function gameInit(event){
- //遊戲層顯示初始化
- layerInit();
- //添加地圖
- addMap();
- //添加人物
- addChara();
- }
遊戲層顯示初始化，按照我們一開始所說，我們一次來初始化地圖層，人物層，效果層，對話層，控制層
- //遊戲層顯示初始化
- function layerInit(){
- //遊戲底層添加
- backLayer = new LSprite();
- addChild(backLayer);
- //地圖層添加
- mapLayer = new LSprite();
- backLayer.addChild(mapLayer);
- //人物層添加
- charaLayer = new LSprite();
- backLayer.addChild(charaLayer);
- //效果層添加
- effectLayer = new LSprite();
- backLayer.addChild(effectLayer);
- //對話層添加
- talkLayer = new LSprite();
- backLayer.addChild(talkLayer);
- //控制層添加
- ctrlLayer = new LSprite();
- backLayer.addChild(ctrlLayer);
- }
下面開始添加地圖
首先我們需要準備好顯示地圖的數組
- //地圖圖片數組
- var map = [
- [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 addMap(){
- var i,j,index,indexX,indexY;
- var bitmapdata,bitmap;
- //地圖圖片數據
- bitmapdata = new LBitmapData(imglist["map"]);
- //將地圖圖片拆分，得到拆分後的各個小圖片的座標數組
- imageArray = LGlobal.divideCoordinate(bitmapdata.image.width,bitmapdata.image.height,10,10);
- //在地圖層上，畫出15*10的小圖片
- for(i=0;i<10;i++){
- for(j=0;j<15;j++){
- //從地圖數組中得到相應位置的圖片座標
- index = map[i][j];
- //小圖片的豎座標
- indexY = Math.floor(index /10);
- //小圖片的橫座標
- indexX = index - indexY*10;
- //得到小圖片
- bitmapdata = new LBitmapData(imglist["map"],indexX*32,indexY*32,32,32);
- bitmap = new LBitmap(bitmapdata);
- //設置小圖片的顯示位置
- bitmap.x = j*32;
- bitmap.y = i*32;
- //將小圖片顯示到地圖層
- mapLayer.addChild(bitmap);
- }
- }
- }
先把addChara方法加上
- //添加人物
- function addChara(){
- }
可以得到下面畫面
遊戲人物的實現
爲了更好的實現遊戲人物的控制，我們新建一個遊戲人物類Character.js
裏面代碼如下
- function Character(data,row,col,speed){
- base(this,LSprite,[]);
- var self = this;
- //設定人物動作速度
- self.speed = speed==null?3:speed;
- self.speedIndex = 0;
- //設定人物大小
- data.setProperties(0,0,data.image.width/col,data.image.height/row);
- //得到人物圖片拆分數組
- var list = LGlobal.divideCoordinate(data.image.width,data.image.height,row,col);
- //設定人物動畫
- self.anime = new LAnimation(this,data,list);
- };
- Character.prototype.onframe = function (){
- var self = this;
- if(self.speedIndex++ < self.speed)return;
- self.speedIndex = 0;
- self.anime.onframe();
- };
使用LAnimation類需要三個參數，一個是顯示動畫的層，一個是圖片，一個是圖片的座標數組
然後，調用LAnimation類的onframe方法，就可以實現動畫的播放了
在index.html中引入Character類，然後修改addChara方法，
- //添加人物
- function addChara(){
- bitmapdata = new LBitmapData(imglist["mingren"]);
- player = new Character(bitmapdata,4,4);
- player.x = 32*5;
- player.y = 32*6;
- charaLayer.addChild(player);
- }
- //添加貞事件，開始遊戲循環
- backLayer.addEventListener(LEvent.ENTER_FRAME,onframe);
- /**
- * 循環
- * */
- function onframe(){
- player.onframe();
- }
運行代碼，看到了嗎
一個會動的鳴人出現在遊戲的地圖上了
遊戲演示
http://fsanguo.comoj.com/html5/rpg/index.html
最後，附上這次的遊戲源代碼
http://legend-demo.googlecode.com/files/rpg.zip
下次，就要添加控制層，實現人物的走動和地圖的滾動等，希望大家多多支持。
