给角色增加触摸屏控制器

创建好地图、角色和摄像机以后。就可以来编写角色的控制功能了。D5引擎提供了一个简单的触屏控制器。你只需要自己准备好控制器的背景样式和摇杆样式即可。另外也需要对角色做一些小小的扩展。你可以使用区块地图或随机地图两篇文章中的代码来继续编写本功能。

首先，你需要准备控制器的背景样式和摇杆样式。这里，我们就简单使用Shape来画两个圆。

    var bg:egret.Shape = new egret.Shape();
    bg.graphics.beginFill(0x666666);
    bg.graphics.drawCircle(0,0,60);
    bg.graphics.endFill();

    var bar:egret.Shape = new egret.Shape();
    bar.graphics.beginFill(0x990000);
    bar.graphics.drawCircle(0,0,30);
    bar.graphics.endFill();


    bg.x = bar.x = 80;
    bg.y = bar.y = this.stage.stageHeight-80;

    this.addChild(bg);
    this.addChild(bar);

然后，就可以初始化控制器了：

    var controll:d5power.TouchController = new d5power.TouchController(this.stage,onTouch,this);
    controll.init(bg,bar,false);

控制器需要提供一个响应函数，当发生参数变化时，会通过这个响应函数通知。函数需要提供三个参数，第一参数为本次触控的角度，第二参数为触控位置距中心的距离，第三参数为和上次相比的变化角度。你可以根据自己游戏的需要，来使用这些参数。例如根据距离来控制角色奔跑的速度。下面的代码，我们只是让角色根据第一个参数，向一个特定的方向移动。

    var onTouch:Function = function(angle:number,distance:number,change:number):void
    {
        if(char) char.moveDir = angle;
    }

我们目前使用的SingleFrameCharacter默认并没有处理延特定的方向移动。但我们在基本角色对象里提供了这个接口。所以只要自己扩展一下run方法，来调用这个接口方法就可以了。建立一个新的类，继承自SingleFrameCharacter。代码如下：

module d5power
{
    export class Char extends SingleFrameCharacter
    {

        public run(t:number)
        {
            !isNaN(this._movedir) && this.moveWidthDir();
            super.run(t);
        }
    }
}

现在，你的角色就可以根据触控的方向来移动了。完整的Main代码如下：

/**
 * 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.Char(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 onTouch:Function = function(angle:number,distance:number,change:number):void
    {
        if(char) char.moveDir = angle;
    }

    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.Char;
    var m:d5power.BaseMap = new d5power.BaseMap();
    m.setContainer(map_layer);
    m.createLoop(303,'resource/tile.jpg',onReady,this,20,20);


    var controll:d5power.TouchController = new d5power.TouchController(this.stage,onTouch,this);
    var bg:egret.Shape = new egret.Shape();
    bg.graphics.beginFill(0x666666);
    bg.graphics.drawCircle(0,0,60);
    bg.graphics.endFill();

    var bar:egret.Shape = new egret.Shape();
    bar.graphics.beginFill(0x990000);
    bar.graphics.drawCircle(0,0,30);
    bar.graphics.endFill();

    bg.x = bar.x = 80;
    bg.y = bar.y = this.stage.stageHeight-80;

    controll.init(bg,bar,false);

    this.addChild(bg);
    this.addChild(bar);
    
   
}

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

}
}