二、基于lufylegend引擎的魔塔游戏开发（准备工作）

2019年8月31日 176次阅读 来源: zuank

准备工作：图片素材

hero.png
《二、基于lufylegend引擎的魔塔游戏开发（准备工作）》
角色精灵图分为四个移动方向

map.png
《二、基于lufylegend引擎的魔塔游戏开发（准备工作）》
地图素材包含精灵图和普通块图

goods.png
《二、基于lufylegend引擎的魔塔游戏开发（准备工作）》
物品为普通块图

chara.png
《二、基于lufylegend引擎的魔塔游戏开发（准备工作）》
人物素材包含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），后添加的较高

    原文作者：zuank
    原文地址: https://segmentfault.com/a/1190000010681474
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞