cocos 入门3

今天做一个手柄控制小车运动的demo,上代码

button.ts 手柄控制脚本

// Learn TypeScript:
//  - https://docs.cocos.com/creator/manual/en/scripting/typescript.html
// Learn Attribute:
//  - https://docs.cocos.com/creator/manual/en/scripting/reference/attributes.html
// Learn life-cycle callbacks:
//  - https://docs.cocos.com/creator/manual/en/scripting/life-cycle-callbacks.html

const {ccclass, property} = cc._decorator;
// import CarScript from './CarScript'
@ccclass
export default class NewClass extends cc.Component {

    @property(cc.Label)
    label: cc.Label = null;

    @property
    text: string = 'hello';

    car:cc.Node=null;

    CarScript:cc.Component=null

    // LIFE-CYCLE CALLBACKS:

    onLoad () {
        //获取到小车的节点
        this.car=cc.find('Canvas/小车');
        this.CarScript=this.car.getComponent('CarScript'); 
        cc.log(this.CarScript,'---/-----')
        

        
    }

    start () {
        let pos =cc.v2(1,1);
        //就是说v2坐标其实是三角函数的值
        cc.log(pos,'---------------')
        this.node.on('touchstart',this.touchstartHandle,this);
        this.node.on('touchmove',this.touchmoveHandle,this);
        this.node.on('touchend',this.touchcancelHandle,this);
        this.node.on('touchcancel',this.touchcancelHandle,this);

    }
    touchstartHandle(e:cc.Event.EventTouch){
        cc.log(e)
        cc.log(e.getLocation()) //获取的是绝对做坐标也就是世界坐标
        //start
    }
    touchmoveHandle(e:cc.Event.EventTouch){

        //先获取鼠标的位置
        //单位换算
        //设置手柄位置
        let location:cc.Vec2=e.getLocation()
        let pos =this.node.parent.convertToNodeSpaceAR(location);
        this.node.setPosition(pos);
        //限制位置，不能超过圆
        let direction:cc.Vec2=pos.normalize(); //求得方位角
        // cc.log(direction,'方位') //其中x代表cos值，y代表sin值
        let R:number=60;

        let real=cc.Vec2.distance(pos,cc.v2(0,0)); //求出当前点的位置与中心点的距离
        if(real>R){
            pos.x=R*direction.x;
            pos.y=R*direction.y;
        }
        this.node.setPosition(pos);

        //设置小车的方向，其实小车的方向需要跟手柄的方向一致，那么，只需要确定手柄的方向就行了
        //这里就选取了一个固定的（1，0）这个点
        let radian = pos.signAngle(cc.v2(1,0))
        let angle = radian/Math.PI*180 //弧度

        this.car.angle = -angle;  //这样就是相反的，需要取一下反

        this.CarScript.direction=direction;


    }
    // touchendHandle(e:cc.Event.EventTouch){
    //     //end 将手柄位置移动回原来的位置
    //     this.node.setPosition(cc.v2(0,0))
    // }
    touchcancelHandle(e:cc.Event.EventTouch){
        this.node.setPosition(cc.v2(0,0))
        this.CarScript.direction=null;
    }

    // update (dt) {}
}

car.ts 小车脚本
其实这个就和之前的键盘控制人移动差不多
// Learn TypeScript:
//  - https://docs.cocos.com/creator/manual/en/scripting/typescript.html
// Learn Attribute:
//  - https://docs.cocos.com/creator/manual/en/scripting/reference/attributes.html
// Learn life-cycle callbacks:
//  - https://docs.cocos.com/creator/manual/en/scripting/life-cycle-callbacks.html

const {ccclass, property} = cc._decorator;

@ccclass
export default class NewClass extends cc.Component {

    @property(cc.Label)
    label: cc.Label = null;

    @property
    speed: number = 3;

    direction:cc.Vec2=null;

    // LIFE-CYCLE CALLBACKS:

    // onLoad () {}

    start () {

    }

    update (dt) {
        if(this.direction == null) return; // 静止

        // speed 步长
        // direction 方向
        let dx = this.speed * this.direction.x;
        let dy = this.speed * this.direction.y;
        
        let pos = this.node.getPosition();
        pos.x += dx;
        pos.y += dy;
        this.node.setPosition(pos);      

    }
}