创建循环区块地图

你可以通过D5引擎的BaseMap类，来快速创建一个单一地砖循环的地图场景。

首先，我们需要两个容器，用来存放地图和角色。并以此将他们添加到舞台上。

    var map_layer:egret.DisplayObjectContainer = new egret.DisplayObjectContainer();

    var char_layer:egret.DisplayObjectContainer = new egret.DisplayObjectContainer();

    this.addChild(map_layer);

    this.addChild(char_layer);

接下来，我们准备好摄像机和角色所要使用的变量。

    var c:d5power.Camera;

    var char:d5power.SingleFrameCharacter;

就像你看到的代码，我们使用变量c来存储摄像机，使用char来存储我们的角色。由于这只是个简单的Demo。我们就使用D5中提供的单帧角色SingleFrameCharacter就可以了。它可以直接使用整张图片来作为我们的角色。

接下来，就可以创建地图了。

    var m:d5power.BaseMap = new d5power.BaseMap();

    m.setContainer(map_layer);

    m.createLoop(303,'resource/tile.jpg',onReady,this,20,20);

我们把地图的容器设置为刚才创建好的map_layer，然后通过createLoop方法，设置一个ID为303的地图。同时将resource/tile.jpg作为循环地砖，并生成20*20个区块组成的地图。当地图预处理完成后，会自动调用onReady方法。我们只需要在onReady中去创建角色就可以了。当然，顺便我们还可以创建摄像机。

    var onReady:Function = function():void
    {

        c = new d5power.Camera(m);

        char = new d5power.SingleFrameCharacter(m);

        char.setPos(200,200);

        char.setSkin('resource/demo.png');

        c.focus = char;

        char_layer.addChild(char.monitor);

        that.addEventListener(egret.Event.ENTER_FRAME,render,this);

        that.touchEnabled = true;

    }

接下来就是渲染事件了，我们给主场景增加ENTER_FRAME侦听。然后在这个侦听中去触发摄像机、角色、地图的数据更新和渲染就OK了

    var render:Function = function():void
    {

        var t:number = egret.getTimer();
        
        char.run(t);

        c.update();

        m.render();

    }

就这么简单。下面是完整的Main.ts代码。

/**
* D5Power游戏框架模版
* 
* @author D5-Howard(d5@microgame.cn)
* 
*/
class Main extends egret.DisplayObjectContainer {
public constructor() {
    super();
    this.addEventListener(egret.Event.ADDED_TO_STAGE, this.onAddToStage, this);
}

/**
 * 舞台初始化后运行
 * @param event 
 */
private onAddToStage(event: egret.Event):void {
    // 请从这里开始编写游戏逻辑
    var that:Main = this;
    var render:Function = function():void
    {
        var t:number = egret.getTimer();
        
        char.run(t);
        c.update();
        m.render();
    }
    var onReady:Function = function():void
    {
        c = new d5power.Camera(m);
        char = new d5power.SingleFrameCharacter(m);
        char.setPos(200,200);
        char.setSkin('resource/demo.png');
        c.focus = char;

        char_layer.addChild(char.monitor);
        that.addEventListener(egret.Event.ENTER_FRAME,render,this);
        that.touchEnabled = true;
    }

    var map_layer:egret.DisplayObjectContainer = new egret.DisplayObjectContainer();
    var char_layer:egret.DisplayObjectContainer = new egret.DisplayObjectContainer();

    this.addChild(map_layer);
    this.addChild(char_layer);

    var c:d5power.Camera;
    var char:d5power.SingleFrameCharacter;
    var m:d5power.BaseMap = new d5power.BaseMap();
    m.setContainer(map_layer);
    m.createLoop(303,'resource/tile.jpg',onReady,this,20,20);

    
   
}

/**
 * 当界面主题加载完成后运行本方法
 */
private onUIReady():void
{

}
}