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