lufylegend引擎 实现2D RPG地图的切换

版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/qq_26786555/article/details/45459749

对于一款游戏来说,丰富的地形可以成为很出色的买点,特别是对于RPG这个类型来说,翻箱倒柜洗劫各场景中的道具无疑是一种乐趣,所以这篇文章主要的目的就是通过lufylegend这款引擎来实现RPG地图的切换,也就是实现三光政策的基础,对于cocos2dx来说场景的切换可以通过scene类来实现,所以实现的方法基本和cocos2dx类似,通过scene的切换来实现,因为lufylegend并没有scene这个类,所以我们需要使用的是js的页面跳转来实现相同的目的,首先是人物出现的第一个场景,实现可以参照上一篇文章,在这里就不多写了,地址:http://blog.csdn.net/qq_26786555/article/details/44927707

第一个场景截图:


一般对于2D游戏来说场景的切换,都会在人物到达场景中的特殊点时,进行切换,那么首先就需要在onframe函数中添加检测函数,用以当人物到达此点是进行场景的切换

检测函数非常容易编写,仅需判断人物坐标是否是场景中特殊点即可,所以函数如下:

   function checkscene(){
  if((playerLayer.x==192)&&(playerLayer.y==192))
  {
  window.location.href="nextmap.php";
  }
   }

在这里选取了192,192作为切换点,切换可以用js自带的跳转功能就可以实现了


这样在人物到达相应点时就会进行切换,下面就是切换后的场景


这样场景的切换就完成了,当然这只是最简单的一种方法,最佳的方法是将其封装成一个scene类来实现,这样可以避免代码的冗余,封装方式很简单,在这里就不多说了 

源代码如下:

index.php:

<!DOCTYPE html>  
<html lang="en">  
    <head>  
    <meta charset="utf-8" />  
    <title>LTileMap</title>  
    <script type="text/javascript" src="lufylegend.js-lufylegend-1.9.7/lufylegend-1.9.7.min.js"></script>
<script type="text/javascript" src="LCharcter.js"></script>
<script type="text/javascript" src="map.js"></script>
    <script>  
    LInit(30,"legend",448,320,main);
LGlobal.setDebug(true);  
    var backLayer,loadingLayer,mapLayer,playerLayer;
var loadData = [  
        {name:"cr",path:"./images/charc.jpg"},   
{name:"map",path:"./images/map.jpg"},
{name:"money",path:"./images/bird.png"}
    ]; 
    var mapData=[[[18,1],[18,1],[18,1],[18,1],[18,1],[18,1],[18,1],[18,1],[18,1],[18,1],[18,1],[18,1],[55,1],[55,1],[18,1]],    
                 [[18,1],[18,1],[18,1],[17,0],[17,0],[17,0],[17,0],[17,0],[17,0],[17,0],[17,0],[17,0],[55,1],[55,1],[18,1]],    
                 [[18,1],[18,1],[17,0],[17,0],[17,0],[17,0],[18,1],[18,1],[17,0],[17,0],[17,0],[17,0],[55,1],[55,1],[18,1]],    
                 [[18,1],[17,0],[17,0],[17,0],[18,1],[18,1],[18,1],[18,1],[18,1],[17,0],[17,0],[55,1],[55,1],[17,0],[18,1]],    
                 [[18,1],[17,0],[17,0],[18,1],[22,1],[23,1],[23,1],[23,1],[24,1],[18,1],[17,0],[55,1],[55,1],[17,0],[18,1]],    
                 [[18,1],[17,0],[17,0],[18,1],[25,1],[28,1],[26,1],[79,1],[27,1],[18,1],[55,1],[55,1],[17,0],[17,0],[18,1]],    
                 [[18,1],[17,0],[17,0],[17,0],[17,0],[10,0],[11,0],[12,0],[18,1],[18,1],[55,1],[55,1],[17,0],[17,0],[18,1]],    
                 [[18,1],[18,1],[17,0],[17,0],[10,0],[16,0],[16,0],[16,0],[11,0],[55,1],[55,1],[17,0],[17,0],[17,0],[18,1]],    
                 [[18,1],[18,1],[17,0],[17,0],[77,0],[16,0],[16,0],[16,0],[16,0],[21,0],[21,0],[17,0],[17,0],[17,0],[18,1]],    
                 [[18,1],[18,1],[18,1],[18,1],[18,1],[18,1],[18,1],[18,1],[18,1],[55,1],[55,1],[18,1],[18,1],[18,1],[18,1]]];
var imglist=[];
function main(){  
        //加入进度条  
        loadingLayer = new LoadingSample3();   
        addChild(loadingLayer);   
        //加载图片并显示进度  
        LLoadManage.load(  
            loadData, 
            function(progress){  
                loadingLayer.setProgress(progress);  
            },  
            gameInit  
        );  
      
    }  
function gameInit(result){
removeChild(loadingLayer);  
        imglist = result;  
backLayer = new LSprite();  
        addChild(backLayer); 
mapLayer = new LTileMap(mapData,imglist["map"],32,32);
backLayer.addChild(mapLayer);
playerLayer=new LCharcter(imglist["cr"]);
backLayer.addChild(playerLayer);
   //加入动画和按键事件监听
backLayer.addEventListener(LEvent.ENTER_FRAME,onframe);
LEvent.addEventListener(LGlobal.window, LKeyboardEvent.KEY_DOWN,move); 
        LEvent.addEventListener(LGlobal.window, LKeyboardEvent.KEY_UP,stop);
       
}
function onframe(){
checkscene();
}
   function move(e){  
 playerLayer.move(e.keyCode);
   }
   function stop(e){
 playerLayer.stop();
   }
   function checkscene(){
  if((playerLayer.x==192)&&(playerLayer.y==192))
  {
  window.location.href="nextmap.php";
  }
   }
</script>  





</head>  
    <body>  
            <div id="legend"></div>  
    </body>  
</html>

map.js

function LTileMap(data,img,width,height){  
    var s = this;  
    base(s,LSprite,[]);  
    s.x = 0;  
    s.y = 0;  
    s.mapData = data;  
    s.imgData = img;  
s.name="map";
var bitmap = new LBitmapData(s.imgData);
s.width=bitmap.image.width;
    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();  
}  
LTileMap.prototype.GetMapData = function(){
var s=this;
return s.mapData;


}
LTileMap.prototype.onshow = function(){  
    var s = this;  
    var mapdata = s.mapData;  
    var partWidth = s.partWidth;  
    var partHeight = s.partHeight;  
    var width=s.width;  
    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++){  
   var sprite=new LSprite();
            index = mapdata[i][j][0];  
            indexY = Math.floor(index/Math.floor(width/32));  
            indexX = index - indexY*Math.floor(width/32);  
            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; 
            sprite.addChild(bitmap);
            s.addChild(sprite);
            }  
    }  
}  

Charcter.js

var player;
var speed=32;
var bitmapDate;
var moveto;
var right=0;
var left=0;
var up=0;
var down=0;
var mapData;
function LCharcter(imgdata){
var s=this;
base(s,LSprite,[]);
s.x=64;
s.y=128;
s.imgdata=imgdata;
var list=LGlobal.divideCoordinate(640,728,8,8);
bitmapData=new LBitmapData(s.imgdata);
s.width=bitmapData.width/8;
s.height=bitmapData.height/8;
player= new LAnimation(s,bitmapData,list);
    player.setAction(0,1,1,false);
player.scaleX=0.4;
player.scaleY=0.4;
s.addChild(player);
//s.addBodyPolygon(bitmapData.width,bitmapData.height,1,0,0,0);
mapData=backLayer.getChildByName("map").GetMapData();
}
LCharcter.prototype.move=function(moveto){
//仅设置一次action避免重复设置导致图形不断重置
  var s=this;
  if(moveto==40){
    if(down==0){
     player.setAction(0,1,1,false);
 down++;
}
 if(s.y<352-bitmapData.height&&(mapData[(s.y+speed)/32][s.x/32][1]!=1)){
       s.y=s.y+speed;
 }
  }else if(moveto==39){
  if(left==0){
     player.setAction(2,1,1,false);
 left++;
}   
 if(s.x<480-bitmapData.width&&(mapData[s.y/32][(s.x+speed)/32][1]!=1)){
       s.x=s.x+speed;
}
  }else if(moveto==38){
   if(up==0){
     player.setAction(3,1,1,false); 
 up++;
}   
  if(s.y>0&&(mapData[(s.y-speed)/32][s.x/32][1]!=1)){
       s.y=s.y-speed;
}
  }else if(moveto==37){
    if(right==0){
     player.setAction(1,1,1,false);
 right++;
}   
   if(s.x>0&&(mapData[s.y/32][(s.x-speed)/32][1]!=1)){
       s.x=s.x-speed;
}   
  }
  s.addEventListener(LEvent.ENTER_FRAME,s.onmove);
}
LCharcter.prototype.onmove=function(){
player.onframe();
}
LCharcter.prototype.stop=function(){
    var s=this;
moveto=0;
if(left!=0)
left=0;
if(right!=0)
right=0;
if(up!=0)
up=0;
if(down!=0)
down=0;
}
LCharcter.prototype.CheckContact=function(money){
    var s=this;
//money在右侧
if((s.x>money.x)&&(money.x+money.width<s.x)){
return false;
    //money在左侧
}else if((s.x<money.x)&&(s.x+s.width<money.x)){

return false;
//money在下测
}else if((s.y<money.y)&&(s.y+s.height<money.y)){

return false;
//money在上测
}else if((s.y>money.y)&&(money.y+money.height<s.y)){
return false;
}else{
money.mode="die";
return true;
}
}

nextmap.php

<!DOCTYPE html>  
<html lang="en">  
    <head>  
    <meta charset="utf-8" />  
    <title>LTileMap</title>  
    <script type="text/javascript" src="lufylegend.js-lufylegend-1.9.7/lufylegend-1.9.7.min.js"></script>
<script type="text/javascript" src="LCharcter.js"></script>
<script type="text/javascript" src="map.js"></script>
    <script>  
    LInit(30,"legend",448,320,main);
LGlobal.setDebug(true);  
    var backLayer,loadingLayer,mapLayer,playerLayer;
var loadData = [  
        {name:"cr",path:"./images/charc.jpg"},   
{name:"map",path:"./images/1201.png"},
{name:"money",path:"./images/bird.png"}
    ]; 
var mapData=[[[0,0],[1,0],[2,0],[3,0],[4,0],[5,0],[6,0],[7,0]],    
                 [[8,0],[9,0],[10,0],[11,0],[12,0],[13,0],[14,0],[15,0]],    
                 [[16,0],[17,0],[18,0],[19,0],[20,0],[21,0],[22,0],[23,0]],    
                 [[24,0],[25,0],[26,0],[27,0],[28,0],[29,0],[30,0],[31,0]],    
                 [[32,0],[33,0],[34,0],[35,0],[36,0],[37,0],[38,0],[39,0]],    
                 [[40,0],[41,0],[42,0],[43,0],[44,0],[45,0],[46,0],[47,0]],    
                 [[48,0],[49,0],[50,0],[51,0],[52,0],[53,0],[54,0],[55,0]],    
                 [[56,0],[57,0],[58,0],[59,0],[60,0],[61,0],[62,0],[63,0]],    
                 [[64,0],[65,0],[66,0],[67,0],[68,0],[69,0],[70,0],[71,0]],    
                 [[72,0],[73,0],[74,0],[75,0],[76,0],[77,0],[78,0],[79,0]],
[[80,0],[81,0],[82,0],[83,0],[84,0],[85,0],[86,0],[87,0]],
[[88,0],[89,0],[90,0],[91,0],[92,0],[93,0],[94,0],[95,0]]];
var imglist=[];
function main(){  
        //加入进度条  
        loadingLayer = new LoadingSample3();   
        addChild(loadingLayer);   
        //加载图片并显示进度  
        LLoadManage.load(  
            loadData, 
            function(progress){  
                loadingLayer.setProgress(progress);  
            },  
            gameInit  
        );  
      
    }  
function gameInit(result){
removeChild(loadingLayer);  
        imglist = result;  
backLayer = new LSprite();  
        addChild(backLayer); 
//加入地图
mapLayer=new LTileMap(mapData,imglist["map"],32,32);;
backLayer.addChild(mapLayer);
playerLayer=new LCharcter(imglist["cr"]);
backLayer.addChild(playerLayer);
   //加入动画和按键事件监听
//backLayer.addEventListener(LEvent.ENTER_FRAME,onframe);
LEvent.addEventListener(LGlobal.window, LKeyboardEvent.KEY_DOWN,move); 
        LEvent.addEventListener(LGlobal.window, LKeyboardEvent.KEY_UP,stop);
       
}
   function move(e){  
 playerLayer.move(e.keyCode);
   }
   function stop(e){
 playerLayer.stop();
   }
</script>  





</head>  
    <body>  
            <div id="legend"></div>  
    </body>  
</html>




阅读更多
换一批

没有更多推荐了,返回首页