HTML 5開發(fā)RPG游戲之一（地圖人物實現(xiàn)）
|
本篇將以零基礎(chǔ)的視點，來講解如何開發(fā)一款RPG游戲。 在游戲的世界里，我們可以看到各種地圖，各種游戲人物，看到人物在地圖上行走，對話等，無論是地圖還是人物，其實都是圖片的處理與顯示，把不同的圖片顯示到屏幕上，我們就看到不同的游戲界面，要想讓這些圖片同時顯示到界面上，我們就需要處理好層次，讓他們來分層顯示，我們可以想象，如果游戲人物顯示在地圖的下層的話，顯然會被地圖遮擋住。 一款RPG游戲，我簡單把它分為地圖層，人物層，效果層(一些法術(shù)效果等)，對話層，控制層(按鈕菜單等)。 如下圖
我們只要依次將圖片畫在屏幕上，游戲人物將站在地圖上，如果有對話，對話將出現(xiàn)在人物和地圖的上面，而按鈕等控件會出現(xiàn)在游戲的最外層 下面，我們一步步來實現(xiàn)一個簡單的RPG游戲的開發(fā) 準(zhǔn)備工作 一，庫件下載 本游戲開發(fā)，需要用到開源庫件：LegendForHtml5Programming 請到這里下載***版的LegendForHtml5Programming，本次開發(fā)需要1.2版以上 http://code.google.com/p/legendforhtml5programming/downloads/list 庫件的開發(fā)過程請看這里 http://bbs.html5cn.org/thread-2712-1-1.html 二，庫件配置 首先建立一個文件夾rpg(你也可以起其他的名字) 然后將下載的庫件解壓，解壓后將legend文件夾放到與rpg文件夾同目錄 然后，在rpg文件夾里建一個index.html文件和一個js文件夾，在js文件夾里建一個Main.js文件 ***，在index.html里加入下面的代碼
|
當(dāng)然，你也可以將legend文件夾放到其他地方，但是你需要修改legend文件夾下的legend.js文件中的LEGEND_PATH的值，來配置庫件的路徑
游戲地圖的實現(xiàn)
接下來，我們先來畫***層的地圖層，
地圖當(dāng)然就是是由圖片來組成的，如何在畫面上顯示一張圖片，我之前已經(jīng)寫過專門的文章，代碼如下
- 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);
- }
如果想更詳細(xì)了解的話，看下面的帖子
用仿ActionScript的語法來編寫html5——***篇，顯示一張圖片http://bbs.html5cn.org/thread-2700-1-1.html
游戲中的地圖可以是一張比較大的圖片，即整個圖片就是游戲的地圖，當(dāng)人物或者地圖移動的時候，改變圖片顯示的區(qū)域范圍，從而實現(xiàn)地圖的滾動和顯示等，這樣的話，必須為每個場景準(zhǔn)備一張地圖。
另外，地圖也可以是由許多小的地圖塊兒來組成，比如，我們熟悉的《吞食天地》，《勇者斗惡龍》等經(jīng)典小型rpg游戲，這樣的地圖，我們需要準(zhǔn)備一張或幾張地圖塊兒，把這些地圖塊組合成地圖來顯示，比如下圖
在地圖顯示的時候，首先把圖片切割，然后在根據(jù)預(yù)先設(shè)定好的位置顯示到地圖層上，這樣我們就看到了一張完整的地圖了
接下來，打開Main.js
在里面加入
- init(50,"mylegend",480,320,main);
在legendForHtml5Progarmming中，用init這個函數(shù)來初始化canvas，上面的代碼表示，初始化一個速度為50，名字為mylegend，大小為480*320的游戲界面，初始化完成后調(diào)用main(),這個速度值是說每個多少毫秒游戲循環(huán)一次，所以這個值設(shè)定的越小，游戲運行的速度就越快
因為要調(diào)用main方法，所以我們要寫一個main方法，main方法里做一些簡單的準(zhǔn)備工作。
雖說讀取圖片只需要一個
- loader.load("map.jpg","bitmapData");
但是游戲中往往用到很多張圖片，你可以用到哪一張再加載哪一張，也可以一次性全部加載完，然后再開始顯示游戲
為了一次性把圖片加載完，我的做法是，將需要的圖片放到一個數(shù)組里，然后設(shè)定一個索引，每加載一個圖片，讓這個索引加1，當(dāng)這個索引小于數(shù)組的長度，則繼續(xù)加載，直到將數(shù)組中的圖片全部加載完，然后開始進(jìn)行下一步的工作
#p#
具體實現(xiàn)看下面的代碼
- //圖片path數(shù)組
- var imgData = new Array();
- //讀取完的圖片數(shù)組
- var imglist = {};
- function main(){
- //準(zhǔn)備讀取圖片
- 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"});
- //實例化進(jìn)度條層
- 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){
- //進(jìn)度條顯示
- 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");
- //儲存圖片數(shù)據(jù)
- imglist[imgData[loadIndex].name] = loader.content;
- //讀取下一張圖片
- loadIndex++;
- loadImage();
- }
上面的代碼不難明白，當(dāng)圖片沒有讀取完之前，會不斷循環(huán)loadImage和loadComplete兩個方法，當(dāng)讀取完之后，移除進(jìn)度條，用legendLoadOver告訴游戲已經(jīng)讀取完成，然后調(diào)用gameInit方法，進(jìn)行游戲的初始化工作。
看gameInit方法
- function gameInit(event){
- //游戲?qū)语@示初始化
- layerInit();
- //添加地圖
- addMap();
- //添加人物
- addChara();
- }
在gameInit方法中，首先進(jìn)行游戲?qū)拥某跏蓟缓筇砑佑螒虻貓D，然后添加人物
游戲?qū)语@示初始化，按照我們一開始所說，我們一次來初始化地圖層，人物層，效果層，對話層，控制層
- //游戲?qū)语@示初始化
- 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);
- }
有了游戲?qū)哟蔚膭澐郑覀冊谔砑佑螒驅(qū)ο蟮臅r候，將地圖添加到地圖層，人物添加到人物層，他們就會依次顯示在游戲的界面
下面開始添加地圖
首先我們需要準(zhǔn)備好顯示地圖的數(shù)組
- //地圖圖片數(shù)組
- 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]
- ];
這些數(shù)字分別對應(yīng)著圖中如下位置
然后看下面代碼
- //添加地圖
- function addMap(){
- var i,j,index,indexX,indexY;
- var bitmapdata,bitmap;
- //地圖圖片數(shù)據(jù)
- bitmapdata = new LBitmapData(imglist["map"]);
- //將地圖圖片拆分，得到拆分后的各個小圖片的坐標(biāo)數(shù)組
- 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++){
- //從地圖數(shù)組中得到相應(yīng)位置的圖片坐標(biāo)
- index = map[i][j];
- //小圖片的豎坐標(biāo)
- indexY = Math.floor(index /10);
- //小圖片的橫坐標(biāo)
- indexindexX = index - indexY*10;
- //得到小圖片
- bitmapdata = new LBitmapData(imglist["map"],indexX*32,indexY*32,32,32);
- bitmap = new LBitmap(bitmapdata);
- //設(shè)置小圖片的顯示位置
- bitmap.x = j*32;
- bitmap.y = i*32;
- //將小圖片顯示到地圖層
- mapLayer.addChild(bitmap);
- }
- }
- }
這樣，我們就把預(yù)先設(shè)置好的圖片顯示到了游戲界面上，形成了地圖
先把a(bǔ)ddChara方法加上
- //添加人物
- function addChara(){
- }
然后運行游戲,可以得到下面畫面
游戲人物的實現(xiàn)
為了更好的實現(xiàn)游戲人物的控制，我們新建一個游戲人物類Character.js
里面代碼如下
- function Character(data,row,col,speed){
- base(this,LSprite,[]);
- var self = this;
- //設(shè)定人物動作速度
- self.speed = speed==null?3:speed;
- self.speedIndex = 0;
- //設(shè)定人物大小
- data.setProperties(0,0,data.image.width/col,data.image.height/row);
- //得到人物圖片拆分?jǐn)?shù)組
- var list = LGlobal.divideCoordinate(data.image.width,data.image.height,row,col);
- //設(shè)定人物動畫
- 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();
- };
在legendForHtml5Programming里，有一個LAnimation類，用來實現(xiàn)圖片數(shù)組順序播放，形成動畫。使用LAnimation類需要三個參數(shù)，一個是顯示動畫的層，一個是圖片，一個是圖片的坐標(biāo)數(shù)組
然后，調(diào)用LAnimation類的onframe方法，就可以實現(xiàn)動畫的播放了
在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);
- }
在gameInit的末尾添加循環(huán)事件
- //添加貞事件，開始游戲循環(huán)
- backLayer.addEventListener(LEvent.ENTER_FRAME,onframe);
***，添加onframe方法
- function onframe(){
- player.onframe();
- }
運行代碼，看到了嗎
一個會動的鳴人出現(xiàn)在游戲的地圖上了
