准备工作：图片素材
hero.png
角色精灵图分为四个移动方向
map.png
地图素材包含精灵图和普通块图
goods.png
物品为普通块图
chara.png
人物素材包含npc和怪物的精灵图（游戏还在开发中，怪物素材还不完整）
游戏初始化
定义dom结构并引入lufylegend引擎
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no">
<title>RPG</title>
<script src="javascript/lufylegend-1.10.1.js" type="text/javascript" charset="utf-8"></script>
<script src="javascript/main.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<div id="mylegend">loading...</div>
</body>
</html>
初始化
LInit(50, "mylegend", 352, 544, main);LInit为引擎中的全局函数用于初始化。
接收的参数按照顺序分别为：fps、dom节点、宽、高、callback
执行callback并加载图片
var imgData = [{
name: "map",
/*地图*/
path: "./images/map.png"
}, {
name: "chara",
/*人物*/
path: "./images/chara.png"
}, {
name: "goods",
/*物品*/
path: "./images/goods.png"
}, {
name: "hero",
/*英雄*/
path: "./images/hero.png"
}];
function main() {
LGlobal.align = LStageAlign.MIDDLE;
LGlobal.stageScale = LStageScaleMode.SHOW_ALL;
LSystem.screen(LStage.FULL_SCREEN);
//准备读取图片
loadingLayer = new LoadingSample3();
addChild(loadingLayer);
LLoadManage.load(
imgData,
function (progress) {
loadingLayer.setProgress(progress)
},
gameInit
);
}LGlobal.align为画布对其方式LSystem.screen为缩放LoadingSample3为加载动画的一种LLoadManage.load进行加载并做callback
这样我们准备的素材就被加载进来了
详细介绍请查看API
//预加载完成的图片数组
var imgList = {};
//加载动画类型
var loadingLayer;
//游戏层
var layers = {
back: null,
mapview: null,
things: null,
effect: null,
talk: null,
};
function gameInit(result) {
removeChild(loadingLayer);
loadingLayer = null;
imgList = result;
//游戏层显示初始化
layerInit();
//游戏场景载入
drawInit();
// 游戏信息展示
drawGameInfo();
LEvent.addEventListener(LGlobal.window, LKeyboardEvent.KEY_DOWN, playerEvent);
}
function layerInit() {
layers.back = new LSprite();
layers.back.graphics.drawRect(0, '#103820', [0, 0, LGlobal.width, LGlobal.height], true, '#012345');
addChild(layers.back);
layers.back.x = 0;
layers.back.y = 0;
layers.mapview = new LSprite();
layers.back.addChild(layers.mapview);
layers.things = new LSprite();
layers.back.addChild(layers.things);
layers.talk = new LSprite();
layers.back.addChild(layers.talk);
layers.effect = new LSprite();
layers.effect.y = 11 * globalData.size
layers.back.addChild(layers.effect);
}加载完成后将加载动画移除，将返回的result存到全局变量imgList中
layerInit定义游戏层，需要注意的是添加的顺序会影响当前层级的高度（类型z-index），后添加的较高
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用。你还可以使用@来通知其他用户。