日本综合一区二区|亚洲中文天堂综合|日韩欧美自拍一区|男女精品天堂一区|欧美自拍第6页亚洲成人精品一区|亚洲黄色天堂一区二区成人|超碰91偷拍第一页|日韩av夜夜嗨中文字幕|久久蜜综合视频官网|精美人妻一区二区三区

RELATEED CONSULTING
相關(guān)咨詢
選擇下列產(chǎn)品馬上在線溝通
服務(wù)時(shí)間：8:30-17:00
你可能遇到了下面的問題
關(guān)閉右側(cè)工具欄

新聞中心

這里有您想知道的互聯(lián)網(wǎng)營銷解決方案
HTML5開發(fā)RPG游戲之一（地圖人物實(shí)現(xiàn)）

本篇將以零基礎(chǔ)的視點(diǎn)，來講解如何開發(fā)一款RPG游戲。

在游戲的世界里，我們可以看到各種地圖，各種游戲人物，看到人物在地圖上行走，對話等，無論是地圖還是人物，其實(shí)都是圖片的處理與顯示，把不同的圖片顯示到屏幕上，我們就看到不同的游戲界面，要想讓這些圖片同時(shí)顯示到界面上，我們就需要處理好層次，讓他們來分層顯示，我們可以想象，如果游戲人物顯示在地圖的下層的話，顯然會(huì)被地圖遮擋住。

一款RPG游戲，我簡單把它分為地圖層，人物層，效果層(一些法術(shù)效果等)，對話層，控制層(按鈕菜單等)。

如下圖

我們只要依次將圖片畫在屏幕上，游戲人物將站在地圖上，如果有對話，對話將出現(xiàn)在人物和地圖的上面，而按鈕等控件會(huì)出現(xiàn)在游戲的最外層

下面，我們一步步來實(shí)現(xiàn)一個(gè)簡單的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

二，庫件配置

首先建立一個(gè)文件夾rpg(你也可以起其他的名字)

然后將下載的庫件解壓，解壓后將legend文件夾放到與rpg文件夾同目錄

然后，在rpg文件夾里建一個(gè)index.html文件和一個(gè)js文件夾，在js文件夾里建一個(gè)Main.js文件

***，在index.html里加入下面的代碼

     
     
     
     
    
      
      
      
      
  1. 
      
      
      
      
  2.   
    3. 
      
      
      
      
  3.   
    4. 
      
      
      
      
  4.   
    5. 
      
      
      
      
  5. rpg  
    6. 
      
      
      
      
  6.   
    7. 
      
      
      
      
  7.   
    8. 
      
      
      
      
  8. loading……  
    9. 
      
      
      
      
  9.   
    10. 
      
      
      
      
  10.    
    11. 
      
      
      
      
  11.    
    12. 
      
      
      
      
  12.   
    13.

當(dāng)然，你也可以將legend文件夾放到其他地方，但是你需要修改legend文件夾下的legend.js文件中的LEGEND_PATH的值，來配置庫件的路徑

游戲地圖的實(shí)現(xiàn)

接下來，我們先來畫***層的地圖層，

地圖當(dāng)然就是是由圖片來組成的，如何在畫面上顯示一張圖片，我之前已經(jīng)寫過專門的文章，代碼如下

 
 
 
 
    
  
  
  
  
  1. var loader;   
    2. 
  
  
  
  
  2. function main(){    
    3. 
  
  
  
  
  3.     loader = new LLoader();    
    4. 
  
  
  
  
  4.     loader.addEventListener(LEvent.COMPLETE,loadBitmapdata);    
    5. 
  
  
  
  
  5.     loader.load("map.jpg","bitmapData");    
    6. 
  
  
  
  
  6. }    
    7. 
  
  
  
  
  7. function loadBitmapdata(event){    
    8. 
  
  
  
  
  8.     var bitmapdata = new LBitmapData(loader.content);    
    9. 
  
  
  
  
  9.     var bitmap = new LBitmap(bitmapdata);    
    10. 
  
  
  
  
  10.     addChild(bitmap);    
    11. 
  
  
  
  
  11. }    
    12.

如果想更詳細(xì)了解的話，看下面的帖子

用仿ActionScript的語法來編寫html5——***篇，顯示一張圖片http://bbs.html5cn.org/thread-2700-1-1.html

游戲中的地圖可以是一張比較大的圖片，即整個(gè)圖片就是游戲的地圖，當(dāng)人物或者地圖移動(dòng)的時(shí)候，改變圖片顯示的區(qū)域范圍，從而實(shí)現(xiàn)地圖的滾動(dòng)和顯示等，這樣的話，必須為每個(gè)場景準(zhǔn)備一張地圖。

另外，地圖也可以是由許多小的地圖塊兒來組成，比如，我們熟悉的《吞食天地》，《勇者斗惡龍》等經(jīng)典小型rpg游戲，這樣的地圖，我們需要準(zhǔn)備一張或幾張地圖塊兒，把這些地圖塊組合成地圖來顯示，比如下圖

在地圖顯示的時(shí)候，首先把圖片切割，然后在根據(jù)預(yù)先設(shè)定好的位置顯示到地圖層上，這樣我們就看到了一張完整的地圖了

接下來，打開Main.js

在里面加入

  
 
 
 
    
   
  
  
  
  1. init(50,"mylegend",480,320,main);
    2.

在legendForHtml5Progarmming中，用init這個(gè)函數(shù)來初始化canvas，上面的代碼表示，初始化一個(gè)速度為50，名字為mylegend，大小為480*320的游戲界面，初始化完成后調(diào)用main(),這個(gè)速度值是說每個(gè)多少毫秒游戲循環(huán)一次，所以這個(gè)值設(shè)定的越小，游戲運(yùn)行的速度就越快

因?yàn)橐{(diào)用main方法，所以我們要寫一個(gè)main方法，main方法里做一些簡單的準(zhǔn)備工作。

雖說讀取圖片只需要一個(gè)

  
 
 
 
    
   
  
  
  
  1. loader.load("map.jpg","bitmapData");   
    2.

但是游戲中往往用到很多張圖片，你可以用到哪一張?jiān)偌虞d哪一張，也可以一次性全部加載完，然后再開始顯示游戲

為了一次性把圖片加載完，我的做法是，將需要的圖片放到一個(gè)數(shù)組里，然后設(shè)定一個(gè)索引，每加載一個(gè)圖片，讓這個(gè)索引加1，當(dāng)這個(gè)索引小于數(shù)組的長度，則繼續(xù)加載，直到將數(shù)組中的圖片全部加載完，然后開始進(jìn)行下一步的工作

#p#

具體實(shí)現(xiàn)看下面的代碼 

  
 
 
 
    
   
  
  
  
  1. //圖片path數(shù)組 
    2. 
   
  
  
  
  2. 
   
  
  
  
  3. var imgData = new Array();  
    4. 
   
  
  
  
  4. //讀取完的圖片數(shù)組  
    5. 
   
  
  
  
  5. var imglist = {};  
    6. 
   
  
  
  
  6. function main(){  
    7. 
   
  
  
  
  7.         //準(zhǔn)備讀取圖片  
    8. 
   
  
  
  
  8.         imgData.push({name:"map",path:"./image/map.jpg"});  
    9. 
   
  
  
  
  9.         imgData.push({name:"mingren",path:"./image/mingren.png"});  
    10. 
   
  
  
  
  10.         imgData.push({name:"e1",path:"./image/e1.png"});  
    11. 
   
  
  
  
  11.         imgData.push({name:"e2",path:"./image/e2.png"});  
    12. 
   
  
  
  
  12.         //實(shí)例化進(jìn)度條層  
    13. 
   
  
  
  
  13.         loadingLayer = new LSprite();  
    14. 
   
  
  
  
  14.         loadingLayer.graphics.drawRect(1,"black",[50, 200, 200, 20],true,"#ffffff");  
    15. 
   
  
  
  
  15.         addChild(loadingLayer);  
    16. 
   
  
  
  
  16.         //開始讀取圖片  
    17. 
   
  
  
  
  17.         loadImage();  
    18. 
   
  
  
  
  18. }  
    19. 
   
  
  
  
  19. function loadImage(){  
    20. 
   
  
  
  
  20.         //圖片全部讀取完成，開始初始化游戲  
    21. 
   
  
  
  
  21.         if(loadIndex >= imgData.length){  
    22. 
   
  
  
  
  22.                 removeChild(loadingLayer);  
    23. 
   
  
  
  
  23.                 legendLoadOver();  
    24. 
   
  
  
  
  24.                 gameInit();  
    25. 
   
  
  
  
  25.                 return;  
    26. 
   
  
  
  
  26.         }  
    27. 
   
  
  
  
  27.         //開始讀取圖片  
    28. 
   
  
  
  
  28.         loader = new LLoader();  
    29. 
   
  
  
  
  29.         loader.addEventListener(LEvent.COMPLETE,loadComplete);  
    30. 
   
  
  
  
  30.         loader.load(imgData[loadIndex].path,"bitmapData");  
    31. 
   
  
  
  
  31. }  
    32. 
   
  
  
  
  32. function loadComplete(event){  
    33. 
   
  
  
  
  33.         //進(jìn)度條顯示  
    34. 
   
  
  
  
  34.         loadingLayer.graphics.clear();  
    35. 
   
  
  
  
  35.         loadingLayer.graphics.drawRect(1,"black",[50, 200, 200, 20],true,"#ffffff");  
    36. 
   
  
  
  
  36.         loadingLayer.graphics.drawRect(1,"black",[50, 203, 200*(loadIndex/imgData.length), 14],true,"#000000");  
    37. 
   
  
  
  
  37.         //儲(chǔ)存圖片數(shù)據(jù)  
    38. 
   
  
  
  
  38.         imglist[imgData[loadIndex].name] = loader.content;  
    39. 
   
  
  
  
  39.         //讀取下一張圖片  
    40. 
   
  
  
  
  40.         loadIndex++;  
    41. 
   
  
  
  
  41.         loadImage();  
    42. 
   
  
  
  
  42. }  
    43.

上面的代碼不難明白，當(dāng)圖片沒有讀取完之前，會(huì)不斷循環(huán)loadImage和loadComplete兩個(gè)方法，當(dāng)讀取完之后，移除進(jìn)度條，用legendLoadOver告訴游戲已經(jīng)讀取完成，然后調(diào)用gameInit方法，進(jìn)行游戲的初始化工作。

看gameInit方法

  
 
 
 
    
   
  
  
  
  1. function gameInit(event){ 
    2. 
   
  
  
  
  2.         //游戲?qū)语@示初始化  
    3. 
   
  
  
  
  3.         layerInit();  
    4. 
   
  
  
  
  4.         //添加地圖  
    5. 
   
  
  
  
  5.         addMap();  
    6. 
   
  
  
  
  6.         //添加人物  
    7. 
   
  
  
  
  7.         addChara();  
    8. 
   
  
  
  
  8. }  
    9.

在gameInit方法中，首先進(jìn)行游戲?qū)拥某跏蓟?，然后添加游戲地圖，然后添加人物

游戲?qū)语@示初始化，按照我們一開始所說，我們一次來初始化地圖層，人物層，效果層，對話層，控制層

  
 
 
 
    
   
  
  
  
  1. //游戲?qū)语@示初始化 
    2. 
   
  
  
  
  2. function layerInit(){  
    3. 
   
  
  
  
  3.         //游戲底層添加  
    4. 
   
  
  
  
  4.         backLayer = new LSprite();  
    5. 
   
  
  
  
  5.         addChild(backLayer);  
    6. 
   
  
  
  
  6.         //地圖層添加  
    7. 
   
  
  
  
  7.         mapLayer = new LSprite();  
    8. 
   
  
  
  
  8.         backLayer.addChild(mapLayer);  
    9. 
   
  
  
  
  9.         //人物層添加  
    10. 
   
  
  
  
  10.         charaLayer = new LSprite();  
    11. 
   
  
  
  
  11.         backLayer.addChild(charaLayer);  
    12. 
   
  
  
  
  12.         //效果層添加  
    13. 
   
  
  
  
  13.         effectLayer = new LSprite();  
    14. 
   
  
  
  
  14.         backLayer.addChild(effectLayer);  
    15. 
   
  
  
  
  15.         //對話層添加  
    16. 
   
  
  
  
  16.         talkLayer = new LSprite();  
    17. 
   
  
  
  
  17.         backLayer.addChild(talkLayer);  
    18. 
   
  
  
  
  18.         //控制層添加  
    19. 
   
  
  
  
  19.         ctrlLayer = new LSprite();  
    20. 
   
  
  
  
  20.         backLayer.addChild(ctrlLayer);  
    21. 
   
  
  
  
  21. } 
    22.

有了游戲?qū)哟蔚膭澐?，我們在添加游戲?qū)ο蟮臅r(shí)候，將地圖添加到地圖層，人物添加到人物層，他們就會(huì)依次顯示在游戲的界面

下面開始添加地圖

首先我們需要準(zhǔn)備好顯示地圖的數(shù)組

  
 
 
 
    
   
  
  
  
  1. //地圖圖片數(shù)組 
    2. 
   
  
  
  
  2. var map = [  
    3. 
   
  
  
  
  3. [18,18,18,18,18,18,18,18,18,18,18,18,55,55,18],  
    4. 
   
  
  
  
  4. [18,18,18,17,17,17,17,17,17,17,17,17,55,55,18],  
    5. 
   
  
  
  
  5. [18,18,17,17,17,17,18,18,17,17,17,17,55,55,18],  
    6. 
   
  
  
  
  6. [18,17,17,17,18,18,18,18,18,17,17,55,55,17,18],  
    7. 
   
  
  
  
  7. [18,17,17,18,22,23,23,23,24,18,17,55,55,17,18],  
    8. 
   
  
  
  
  8. [18,17,17,18,25,28,26,79,27,18,55,55,17,17,18],  
    9. 
   
  
  
  
  9. [18,17,17,17,17,10,11,12,18,18,55,55,17,17,18],  
    10. 
   
  
  
  
  10. [18,18,17,17,10,16,16,16,11,55,55,17,17,17,18],  
    11. 
   
  
  
  
  11. [18,18,17,17,77,16,16,16,16,21,21,17,17,17,18],  
    12. 
   
  
  
  
  12. [18,18,18,18,18,18,18,18,18,55,55,18,18,18,18]  
    13. 
   
  
  
  
  13. ];  
    14.

這些數(shù)字分別對應(yīng)著圖中如下位置

然后看下面代碼

  
 
 
 
    
   
  
  
  
  1. //添加地圖 
    2. 
   
  
  
  
  2. function addMap(){  
    3. 
   
  
  
  
  3.         var i,j,index,indexX,indexY;  
    4. 
   
  
  
  
  4.         var bitmapdata,bitmap;  
    5. 
   
  
  
  
  5.         //地圖圖片數(shù)據(jù)  
    6. 
   
  
  
  
  6.         bitmapdata = new LBitmapData(imglist["map"]);  
    7. 
   
  
  
  
  7.         //將地圖圖片拆分，得到拆分后的各個(gè)小圖片的坐標(biāo)數(shù)組  
    8. 
   
  
  
  
  8.         imageArray = LGlobal.divideCoordinate(bitmapdata.image.width,bitmapdata.image.height,10,10);  
    9. 
   
  
  
  
  9. 
   
  
  
  
  10.         //在地圖層上，畫出15*10的小圖片  
    11. 
   
  
  
  
  11.         for(i=0;i<10;i++){  
    12. 
   
  
  
  
  12.                 for(j=0;j<15;j++){  
    13. 
   
  
  
  
  13.                         //從地圖數(shù)組中得到相應(yīng)位置的圖片坐標(biāo)  
    14. 
   
  
  
  
  14.                         index = map[i][j];  
    15. 
   
  
  
  
  15.                         //小圖片的豎坐標(biāo)  
    16. 
   
  
  
  
  16.                         indexY = Math.floor(index /10);  
    17. 
   
  
  
  
  17.                         //小圖片的橫坐標(biāo)  
    18. 
   
  
  
  
  18.                         indexindexX = index - indexY*10;  
    19. 
   
  
  
  
  19.                         //得到小圖片  
    20. 
   
  
  
  
  20.                         bitmapdata = new LBitmapData(imglist["map"],indexX*32,indexY*32,32,32);  
    21. 
   
  
  
  
  21.                         bitmap = new LBitmap(bitmapdata);  
    22. 
   
  
  
  
  22.                         //設(shè)置小圖片的顯示位置  
    23. 
   
  
  
  
  23.                         bitmap.x = j*32;  
    24. 
   
  
  
  
  24.                         bitmap.y = i*32;  
    25. 
   
  
  
  
  25.                         //將小圖片顯示到地圖層  
    26. 
   
  
  
  
  26.                         mapLayer.addChild(bitmap);  
    27. 
   
  
  
  
  27.                 }  
    28. 
   
  
  
  
  28.         }  
    29. 
   
  
  
  
  29. }  
    30.

這樣，我們就把預(yù)先設(shè)置好的圖片顯示到了游戲界面上，形成了地圖

先把a(bǔ)ddChara方法加上

  
 
 
 
    
   
  
  
  
  1. //添加人物 
    2. 
   
  
  
  
  2. function addChara(){  
    3. 
   
  
  
  
  3. }  
    4.

然后運(yùn)行游戲,可以得到下面畫面

游戲人物的實(shí)現(xiàn)

為了更好的實(shí)現(xiàn)游戲人物的控制，我們新建一個(gè)游戲人物類Character.js

里面代碼如下

  
 
 
 
    
   
  
  
  
  1. function Character(data,row,col,speed){ 
    2. 
   
  
  
  
  2.         base(this,LSprite,[]);  
    3. 
   
  
  
  
  3.         var self = this;  
    4. 
   
  
  
  
  4.         //設(shè)定人物動(dòng)作速度  
    5. 
   
  
  
  
  5.         self.speed = speed==null?3:speed;  
    6. 
   
  
  
  
  6.         self.speedIndex = 0;  
    7. 
   
  
  
  
  7.         //設(shè)定人物大小  
    8. 
   
  
  
  
  8.         data.setProperties(0,0,data.image.width/col,data.image.height/row);  
    9. 
   
  
  
  
  9.         //得到人物圖片拆分?jǐn)?shù)組  
    10. 
   
  
  
  
  10.         var list = LGlobal.divideCoordinate(data.image.width,data.image.height,row,col);  
    11. 
   
  
  
  
  11.         //設(shè)定人物動(dòng)畫  
    12. 
   
  
  
  
  12.         self.anime = new LAnimation(this,data,list);  
    13. 
   
  
  
  
  13. };  
    14. 
   
  
  
  
  14. Character.prototype.onframe = function (){  
    15. 
   
  
  
  
  15.         var self = this;  
    16. 
   
  
  
  
  16.         if(self.speedIndex++ < self.speed)return;  
    17. 
   
  
  
  
  17.         self.speedIndex = 0;  
    18. 
   
  
  
  
  18.         self.anime.onframe();  
    19. 
   
  
  
  
  19. };  
    20.

在legendForHtml5Programming里，有一個(gè)LAnimation類，用來實(shí)現(xiàn)圖片數(shù)組順序播放，形成動(dòng)畫。使用LAnimation類需要三個(gè)參數(shù)，一個(gè)是顯示動(dòng)畫的層，一個(gè)是圖片，一個(gè)是圖片的坐標(biāo)數(shù)組

然后，調(diào)用LAnimation類的onframe方法，就可以實(shí)現(xiàn)動(dòng)畫的播放了

在index.html中引入Character類，然后修改addChara方法

  
 
 
 
    
   
  
  
  
  1. //添加人物 
    2. 
   
  
  
  
  2. function addChara(){  
    3. 
   
  
  
  
  3.         bitmapdata = new LBitmapData(imglist["mingren"]);  
    4. 
   
  
  
  
  4.         player = new Character(bitmapdata,4,4);  
    5. 
   
  
  
  
  5.         player.x = 32*5;  
    6. 
   
  
  
  
  6.         player.y = 32*6;  
    7. 
   
  
  
  
  7.         charaLayer.addChild(player);  
    8. 
   
  
  
  
  8.           
    9. 
   
  
  
  
  9. }  
    10.

在gameInit的末尾添加循環(huán)事件

  
 
 
 
    
   
  
  
  
  1. //添加貞事件，開始游戲循環(huán) 
    2. 
   
  
  
  
  2.         backLayer.addEventListener(LEvent.ENTER_FRAME,onframe);  
    3.

***，添加onframe方法

  
 
 
 
    
   
  
  
  
  1. function onframe(){  
    2. 
   
  
  
  
  2.         player.onframe();  
    3. 
   
  
  
  
  3. }  
    4.

運(yùn)行代碼，看到了嗎

一個(gè)會(huì)動(dòng)的鳴人出現(xiàn)在游戲的地圖上了

游戲演示：http://fsanguo.comoj.com/html5/rpg/index.html

***，附上這次的游戲源代碼：http://fsanguo.comoj.com/html5/rpg5/rpg5.rar


文章題目：HTML5開發(fā)RPG游戲之一（地圖人物實(shí)現(xiàn)）
URL鏈接：http://www.dlmjj.cn/article/ccsicsj.html