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

最新推荐文章于 2021-08-09 15:19:26 发布

柯瓦特罗

最新推荐文章于 2021-08-09 15:19:26 发布

阅读量557

点赞数

分类专栏： js lufylegend

本文链接：https://blog.csdn.net/qq_26786555/article/details/45459749

版权

js lufylegend 专栏收录该内容

7 篇文章 0 订阅

订阅专栏

对于一款游戏来说，丰富的地形可以成为很出色的买点，特别是对于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

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>

柯瓦特罗

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
lufylegend引擎实现2D RPG地图的切换

对于一款游戏来说，丰富的地形可以成为很出色的买点，特别是对于RPG这个类型来说，翻箱倒柜洗劫各场景中的道具无疑是一种乐趣，所以这篇文章主要的目的就是通过lufylegend这款引擎来实现RPG地图的切换，也就是实现三光政策的基础,对于cocos2dx来说场景的切换可以通过scene类来实现，所以实现的方法基本和cocos2dx类似，通过scene的切换来实现，因为lufylegend并没有scen
复制链接

扫一扫