LayaAir-js学习笔记（一） 关于游戏地图的创建

LayaAir-js学习笔记（一） 关于游戏地图的创建

最近对RPG游戏的制作比较感兴趣，恰好看到新发布的一款Html5引擎——LayaAir，专门下载来学习一下，以制作一款RPG小游戏为目标，在此记录下学习以及制作过程，以及个人的一些想法，希望有前辈或者同僚指点一二，不胜感激。
LayaAir官网：[http://www.layabox.com](http://www.layabox.com)

1.准备工作

    首先创建工程。我是用的是LayaIDE+Webstorm的组合进行开发，LayaAir-js引擎版本1.0.2。打开LayaIDE，新建一个工程。

    选择新建一个空项目，修改名称和路径信息。

    新建后，感觉编辑区字体有点小，眼都要看瞎了，习惯性Ctrl+滚轮，并没有什么卵用。在菜单栏找了一圈，可以使用Ctrl++整体放大。后来发现可以Ctrl+shift+P，输入“打开用户设置”，可以进行个人的配置（之前使用sublim感觉这个快捷键相当熟悉啊）。

    比如想要调整字体和大小，可以简单更改如下：

2.开工！

    首先看一下项目的目录结构。

    可以看到LayaSample.js里面有一行

Laya.init(600, 400);

    也就是初始化一个600*400的舞台。关于这个初始化方法，查阅API如下：

init    ()  方法
public static function init(width:Number, height:Number, ... plugins):*
初始化引擎。
参数
    width:Number — 游戏窗口宽度。

    height:Number — 游戏窗口高度。

    ... plugins — WebGL。
Returns
    * — 返回原生canvas，方便控制

    第一和第二个参数控制游戏窗口的宽高，第三个可有可无的参数代表是否使用WebGL渲染方式。如果使用，也就是

Laya.init(600, 400, Laya.WebGL);

    Laya会根据浏览器是否支持/开启WebGL来智能调用。
    把这个文件改名为Game.js。为了懒省事就先使用一个文件。选中这个文件，按F2即可重命名。当然不要忘记把index.html中的js引用名称改掉。
    在文件中新建一个BgMap类，用来初始化我们的背景地图。

function BgMap() {
        //定义地图
        this.mTiledMap = null;
        //初始化父类
        BgMap.__super.call(this);
        this.init();
    }

    接着在init方法中调用createMap方法

_proto.init = function(){
        //创建地图
        this.mTiledMap = new TiledMap();
        this.mTiledMap.createMap("../bin/res/map/guchangjing2.json", new Laya.Rectangle(0,0,Browser.width, Browser.height), new Laya.Handler(this, this.completeHandler, null, false));
    };

    关于TiledMap类以及createMap()方法：

包
laya.map

类 public class TiledMap
继承 TiledMap Inheritance Object
tiledMap是整个地图的核心 地图以层级来划分地图（例如：地表层，植被层，建筑层） 每层又以分块（GridSprite)来处理显示对象，只显示在视口区域的区 每块又包括N个格子（tile) 格子类型又分为动画格子跟图片格子两种

createMap () 方法
public function createMap(mapName:String, viewRect:Rectangle, completeHandler:Handler, viewRectPadding:Rectangle = null, gridSize:Point = null, enableLinear:Boolean = true):void
创建地图

参数

mapName:String — JSON文件名字

viewRect:Rectangle — 视口区域

completeHandler:Handler — 地图创建完成的回调函数

viewRectPadding:Rectangle (default = null) — 视口扩充区域，把视口区域上、下、左、右扩充一下，防止视口移动时的穿帮

gridSize:Point (default = null) — grid大小

enableLinear:Boolean (default = true) — 是否开启线性取样（为false时，可以解决地图黑线的问题，但画质会锐化）

    这里我使用Tiled进行地图的制作，将制作好的json文件以及地图文件拷贝到项目中，在bin目录下新建一个res文件夹，里面新建一个map文件夹，将上述文件放进去方便引用。
    视口区域也就是玩家所看到的区域，其他区域并不加载进来，当地图移动再进行加载。所以new一个和浏览器窗口大小一致的Rectangle作为视口区域。
    之后新建Game类，进行引擎的初始化等操作。

function Game(){
        //初始化引擎
        Laya.init(Browser.width, Browser.height, Laya.WebGL);
        //加载地图
        this.bg = new BgMap();
        //添加到舞台
        Laya.stage.addChild(this.bg);
    }

  到此地图的加载基本完成了。不过编写过程中遇到一个问题就是createMap方法中的路径会出现404错误。并且bin有时候会被误认为项目根目录。后来解决了但是也是没搞清楚问题所在。欢迎有同样问题的来交流指点~
  下面是Game.js的全部代码：

var TiledMap = laya.map.TiledMap;
var Browser = laya.utils.Browser;
(function () {
    function BgMap() {
        //定义地图
        this.mTiledMap = null;
        //初始化父类
        BgMap.__super.call(this);
        this.init();
    }
    //注册类
    Laya.class(BgMap, "BgMap", laya.display.Sprite);
    //获取原型
    var _proto = BgMap.prototype;

    _proto.init = function(){
        //创建地图
        this.mTiledMap = new TiledMap();
        this.mTiledMap.createMap("../bin/res/map/guchangjing2.json", new Laya.Rectangle(0,0,Browser.width, Browser.height), new Laya.Handler(this, this.completeHandler, null, false));
    };

    _proto.completeHandler = function(){
        console.log("地图加载完成！");
    };
})();

(function(){
    function Game(){
        //初始化引擎
        Laya.init(Browser.width, Browser.height, Laya.WebGL);
        //加载地图
        this.bg = new BgMap();
        //添加到舞台
        Laya.stage.addChild(this.bg);
    }
    //注册类
    Laya.class(Game, "Game");
    //获取原型
    var _proto = Game.prototype;

})();

var game = new Game();