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;
    },
});