creator 精灵绕点做圆周运动

先看一下效果:

creator 精灵绕点做圆周运动_第1张图片

具体思路:

根据圆的半径求圆上的点的坐标

creator 精灵绕点做圆周运动_第2张图片

来看一下具体实现:

creator 精灵绕点做圆周运动_第3张图片

/**
 * @ 图片绕指定圆心进行圆周运动
 */

const {ccclass, property} = cc._decorator;

@ccclass
export default class NewClass extends cc.Component {

    // 汽车
    @property(cc.Sprite)
    sprCar: cc.Sprite = null;

    // 圆心
    @property
    circleCenter: cc.Vec2 = cc.v2(0, 0);

    // 半径
    @property
    circleRadius: number = 0;

    // 车速
    @property
    carSpeed: number = 0;

    // 弧度
    radian: number = 0;

    onLoad () {
        this.schedule(this.circleMove, 0.01);
    }

    circleMove (dt) {
        // 先计算弧度
        this.radian += dt * (this.carSpeed/100);
        let x = this.circleRadius * Math.cos(this.radian) + this.circleCenter.x; 
        let y = this.circleRadius * Math.sin(this.radian) + this.circleCenter.y;
        let angle = 360- 180/Math.PI*this.radian;
        this.sprCar.node.rotation = angle;
        console.log('x = ' + x + '  y = ' + y + '  angle = ' + angle);
        this.sprCar.node.position = cc.v2(x, y);
    }

}

 

你可能感兴趣的:(creator)