lufylegend的一些简单的使用
lufylegend的一些简单的使用
本人小白，路过的大神有什么指导的，请不要吝啬自己的语言，我会中信的感谢
lufylegend游戏框架是 lufy 大神写的一个框架，是一款基于html5的canvas的游戏框架，具有很好的兼容性，这里不多介绍，有兴趣的可以去看看。
今天写一些很简单的用法（真的很简单）
就是用键盘控制任务上下左右行走
首先引入框架
然后是代码
<script>
init(50,"mylegend",1000,1000,main);
//背景 动画 动画层
var backLayer,anime,renwuLayer;
var yiDongPanDuan,yiDongFangXiang;
function main(){
backLayer = new LLoader();
backLayer.addEventListener(LEvent.COMPLETE,loadBitmapdata);
backLayer.load('../images/地图.png','bitmapData');
}
function loadBitmapdata(event) {
var bitmapData = new LBitmapData(backLayer.content);
var bitmap = new LBitmap(bitmapData);
addChild(bitmap);
renwuLayer = new LSprite();
addChild(renwuLayer);
backLayer = new LLoader();
backLayer.addEventListener(LEvent.COMPLETE,loadBitmapdata1);
backLayer.load('../images/精灵图像.png','bitmapData');
}
function loadBitmapdata1(event){
var bitmapData = new LBitmapData(backLayer.content,0,0,32,32);
var list = LGlobal.divideCoordinate(96,128,4,3);
anime = new LAnimation(renwuLayer,bitmapData,list);
renwuLayer.addEventListener(LEvent.ENTER_FRAME,onframe);
//键盘按键的落下
LEvent.addEventListener(LGlobal.window,LKeyboardEvent.KEY_DOWN,onkeydown);
//键盘按键的弹起事件
LEvent.addEventListener(LGlobal.window,LKeyboardEvent.KEY_UP,onkeyup);
}
function onframe(){
if(yiDongPanDuan)
{
switch (yiDongFangXiang){
case "left":
renwuLayer.x -= 5;
if(renwuLayer.x<=0){
renwuLayer.x =0;
}
break;
case "up":
renwuLayer.y -= 5 ;
if(renwuLayer.y<=0){
renwuLayer.y = 0;
}
break;
case "reght":
renwuLayer.x += 5;
if(renwuLayer.x>=500){
renwuLayer.x = 500;
}
break;
case "down":
renwuLayer.y += 5 ;
if(renwuLayer.y>=500){
renwuLayer.y = 500;
}
break;
}
anime.onframe();
}
}
//就按盘落下事件
function onkeydown(event){
if(event.keyCode == 37){//left
yiDongPanDuan = true;
yiDongFangXiang = 'left';
anime.setAction(1);
} else if(event.keyCode == 38){//up
yiDongPanDuan = true;
yiDongFangXiang = 'up';
anime.setAction(3);
}else if(event.keyCode == 39){//reght
yiDongPanDuan = true;
yiDongFangXiang = 'reght';
anime.setAction(2);
}else if(event.keyCode == 40){//down
yiDongPanDuan = true;
yiDongFangXiang = 'down';
anime.setAction(0);
}
}
//键盘弹起事件
function onkeyup(event){
yiDongPanDuan = false;
}
</script>
任务背景图片带颜色，所以效果有点差
backLayer = new LLoader();
backLayer.addEventListener(LEvent.COMPLETE,loadBitmapdata);
backLayer.load('../images/地图.png','bitmapData');
是加载背景图片
var bitmapData = new LBitmapData(backLayer.content);
var bitmap = new LBitmap(bitmapData);
addChild(bitmap);
renwuLayer = new LSprite();
addChild(renwuLayer);
显示背景图片到最低层
backLayer = new LLoader();
backLayer.addEventListener(LEvent.COMPLETE,loadBitmapdata1);
backLayer.load('../images/精灵图像.png','bitmapData');
}
function loadBitmapdata1(event){
var bitmapData = new LBitmapData(backLayer.content,0,0,32,32);
var list = LGlobal.divideCoordinate(96,128,4,3);
anime = new LAnimation(renwuLayer,bitmapData,list);
renwuLayer.addEventListener(LEvent.ENTER_FRAME,onframe);
加载精灵图片并添加循环事件
//键盘按键的落下
LEvent.addEventListener(LGlobal.window,LKeyboardEvent.KEY_DOWN,onkeydown);
//键盘按键的弹起事件
LEvent.addEventListener(LGlobal.window,LKeyboardEvent.KEY_UP,onkeyup);
键盘事件 键盘按下与弹起
//就按盘落下事件
function onkeydown(event){
if(event.keyCode == 37){//left
yiDongPanDuan = true;
yiDongFangXiang = 'left';
anime.setAction(1);
} else if(event.keyCode == 38){//up
yiDongPanDuan = true;
yiDongFangXiang = 'up';
anime.setAction(3);
}else if(event.keyCode == 39){//reght
yiDongPanDuan = true;
yiDongFangXiang = 'reght';
anime.setAction(2);
}else if(event.keyCode == 40){//down
yiDongPanDuan = true;
yiDongFangXiang = 'down';
anime.setAction(0);
}
}
//键盘弹起事件
function onkeyup(event){
yiDongPanDuan = false;
}
键盘上下左右对应的键值
if(yiDongPanDuan)
{
switch (yiDongFangXiang){
case "left":
renwuLayer.x -= 5;
if(renwuLayer.x<=0){
renwuLayer.x =0;
}
break;
case "up":
renwuLayer.y -= 5 ;
if(renwuLayer.y<=0){
renwuLayer.y = 0;
}
break;
case "reght":
renwuLayer.x += 5;
if(renwuLayer.x>=500){
renwuLayer.x = 500;
}
break;
case "down":
renwuLayer.y += 5 ;
if(renwuLayer.y>=500){
renwuLayer.y = 500;
}
break;
}
anime.onframe();
}
根据键值，获取不同的图片，做不同方向的移动 ，其中 ，anime.setAction(2)表示读取第三行图片。
var bitmapData = new LBitmapData(backLayer.content,0,0,32,32);
var list = LGlobal.divideCoordinate(96,128,4,3);
上面对应的每一个图片大小0，0，32，32，
总体图片大小 96 128 纵向4行 横向3行
用anime.setAction()方法可以把一行图片连贯成一组动作
以上一些简单的代码，就是可以移动人物上下左右在地图上行动，因为本人才开始学习这个框架，所以代码过于简陋，很多东西都没有想到，好在，过于简陋的东西，也不需要太多的想法，没出现什么问题（笑）