How do I make the plane turn and move in a circle to a new angle and not turn immediately?

16 Views Asked by At

I'm planning on doing the same with this game: https://play.google.com/store/apps/details?id=pl.macaque.Missiles&gl=US&pli=1 enter image description here

this is my class:

const { ccclass, property } = cc._decorator;

export const event_instance = new cc.EventTarget();

@ccclass
export default class Main extends cc.Component {
    @property(cc.Node)
    cameraNode: cc.Node = null;

    @property(cc.Node)
    Game: cc.Node = null;

    private touchStartPos: cc.Vec2 = cc.Vec2.ZERO;

    private isRotating: boolean = false;

    private newAngle: number = 0;
    private moveDir: cc.Vec2 = cc.Vec2.ZERO;


    protected onLoad(): void {
        this.init();
    }

    init(): void {
        this.cameraNode.on(cc.Node.EventType.TOUCH_START, this.onTouchStart, this);
        this.cameraNode.on(cc.Node.EventType.TOUCH_MOVE, this.onTouchMove, this);
        this.cameraNode.on(cc.Node.EventType.TOUCH_END, this.onTouchEnd, this);
    }

    onTouchStart(event: cc.Event.EventTouch): void {
        this.touchStartPos = event.getLocation();
    }

    onTouchMove(event: cc.Event.EventTouch): void {
        this.isRotating = true;

        const touchPos = event.getLocation();

        const moveVec = touchPos.subtract(this.touchStartPos).normalize();

        this.moveDir = moveVec;

        this.newAngle = cc.misc.radiansToDegrees(Math.atan2(moveVec.y, moveVec.x)) - 90;
    }

    onTouchEnd(event: cc.Event.EventTouch): void {
        this.isRotating = false;
        this.touchStartPos = cc.Vec2.ZERO;
    }

    protected update(dt: number): void {
        if (this.isRotating) {
            this.Game.getChildByName('Plane').angle = this.newAngle;

            this.Game.getChildByName('Plane').setPosition(this.Game.getChildByName('Plane').getPosition().add(
                this.moveDir.clone().multiplyScalar(15)
            ));

            this.cameraNode.setPosition(this.Game.getChildByName('Plane').position);
        }
    }

}

This is the image I'm working on

How can I make it move in a circle with a certain diameter when I change the angle? I've searched a lot but haven't found the right result. Can anyone help me?

0

There are 0 best solutions below