cocos creator实战-(三)简单例子摇杆控制角色移动

（待完善，给玩家加上摄像机跟随效果）

1、stick监听cc.Node.EventType.TOUCH_MOVE事件，获取tick移动的坐标和朝向，限制移动的范围

2、根据stick的朝向，每帧更新player的位置和方向

 

// 摇杆代码 joy_stick.js

cc.Class({
    extends: cc.Component,

    properties: {
        // foo: {
        //     // ATTRIBUTES:
        //     default: null,        // The default value will be used only when the component attaching
        //                           // to a node for the first time
        //     type: cc.SpriteFrame, // optional, default is typeof default
        //     serializable: true,   // optional, default is true
        // },
        // bar: {
        //     get () {
        //         return this._bar;
        //     },
        //     set (value) {
        //         this._bar = value;
        //     }
        // },
        stick:{
            type: cc.Node,
            default: null
        },
        max_r : 80
    },

    // LIFE-CYCLE CALLBACKS:

    onLoad () {
        this.start_pos = cc.v2(0, 0);
        this.stick.setPosition(this.start_pos);

        this.dir = cc.v2(0, 0);

        this.stick.on(cc.Node.EventType.TOUCH_START, function(){

        }.bind(this), this);

        this.stick.on(cc.Node.EventType.TOUCH_MOVE, function(e){
            var w_pos = e.getLocation();
            var pos = this.node.convertToNodeSpaceAR(w_pos);
            var len = pos.mag();

            /* 好处
            归一化，一个方向，只有一个值;
            this.dir.x = cos(r);
            this.dir.y = sin(r);
            // -1, 1
            */
            this.dir.x = pos.x / len;
            this.dir.y = pos.y / len;



            if(len > this.max_r){
                // 三角函数或者比例关系算坐标
                pos.x = pos.x * this.max_r / len;
                pos.y = pos.y * this.max_r / len;
            }
            this.stick.setPosition(pos);

        }.bind(this), this);

        this.stick.on(cc.Node.EventType.TOUCH_END, function(){
            this.dir = cc.v2(0, 0);
            this.stick.setPosition(this.start_pos);
        }.bind(this), this);

        this.stick.on(cc.Node.EventType.TOUCH_CANCEL, function(){
            this.dir = cc.v2(0, 0);
            this.stick.setPosition(this.start_pos);
        }.bind(this), this);
    },

    start () {

    },

    // update (dt) {},
});

 

// 玩家代码 player.js

var joy_stick = require("joy_stick");
cc.Class({
    extends: cc.Component,

    properties: {
        stick : {
            default : null,
            type : joy_stick
        },
        speed : 80
    },

    // LIFE-CYCLE CALLBACKS:

    // onLoad () {},

    start () {

    },

    update (dt) {
        if (this.stick.dir.mag() < 0.5) {
            return;
        }

        var vx = this.stick.dir.x * this.speed;
        var vy = this.stick.dir.y * this.speed;

        this.node.x += vx * dt;
        this.node.y += vy * dt;

        // Math.atan2(y,x) 计算出来的结果angel是一个弧度值 数学的弧度是逆时针的 而游戏中是顺时针的
        var angel = Math.atan2(this.stick.dir.y, this.stick.dir.x);
        var degree = angel* 180 / Math.PI;
        degree = 360 - degree + 90;

        this.node.rotation = degree;
    },
});