First Individual Digital camera Rotation In direction of Mouse – Cocos Creator

Hello All,

I’m making an attempt to make some first individual controls to attempt to see how all the pieces works. I could also be wanting in all of the unsuitable locations however I appear to be struggling to seek out examples and so forth to assist out.

Up to now I’ve created a capsule to be the participant and a terrain. It took awhile to determine this out and of coarse is smart now however I couldn’t discover something explaining this however including the physics to the participant and the terrain. So to do that appropriately ultimately I give the participant a rigidbody then a field collider. The terrain then must be given rigidbody (static) after which the terrain collider. I’ve created a script to then transfer the participant relying on the AWSD keys being pressed and connected this to the participant.

That is the participant script:

import { _decorator, Part, Node, systemEvent, enter, Enter, KeyCode, EventKeyboard, Vec3, SystemEventType } from 'cc';
import { globalVars } from './globalVars';
const { ccclass, property } = _decorator;

@ccclass('PlayerScript')
export class PlayerScript extends Part {

    /* Native Variables */

        personal movementSpeed = 3;
        personal moveForward = 0;
        personal moveBackward = 0;
        personal moveLeft = 0;
        personal moveRight = 0;
        personal nodePos: Vec3 = new Vec3();
        personal nodeDeltaPos: Vec3 = new Vec3(0, 0, 0);

    /* Finish Native Variables */
    
    begin() {
        globalVars.character = this;
        enter.on(Enter.EventType.KEY_DOWN, this.onKeyDown, this);
        enter.on(Enter.EventType.KEY_UP, this.onKeyUp, this);
    }

    onKeyDown(occasion: EventKeyboard){
        change(occasion.keyCode) {
            case KeyCode.KEY_A: {
                this.moveLeft = 1;
            break;}

            case KeyCode.KEY_W: {
                this.moveForward = 1;
            break;}

            case KeyCode.KEY_D: {
                this.moveRight = 1;
            break;}

            case KeyCode.KEY_S: {
                this.moveBackward = 1;
            break;}
        }
    }

    onKeyUp(occasion: EventKeyboard){
        change(occasion.keyCode) {
            case KeyCode.KEY_A: {
                this.moveLeft = 0;
            break;}

            case KeyCode.KEY_W: {
                this.moveForward = 0;
            break;}

            case KeyCode.KEY_D: {
                this.moveRight = 0;
            break;}

            case KeyCode.KEY_S: {
                this.moveBackward = 0;
            break;}
        }
    }

    replace(deltaTime: quantity) {
        if(this.moveForward){
            this.nodePos = this.node.getPosition();
                if(this.moveLeft || this.moveRight){
                    this.nodeDeltaPos.x = (this.movementSpeed/2) * deltaTime;
                } else {
                    this.nodeDeltaPos.x = this.movementSpeed * deltaTime;
                }
            Vec3.add(this.nodePos, this.nodePos, this.nodeDeltaPos);
            this.node.setPosition(this.nodePos);
        }
        if(this.moveBackward){
            this.nodePos = this.node.getPosition();
                if(this.moveLeft || this.moveRight){
                    this.nodeDeltaPos.x = -(this.movementSpeed/2) * deltaTime;
                } else {
                    this.nodeDeltaPos.x = -this.movementSpeed * deltaTime;
                }
            Vec3.add(this.nodePos, this.nodePos, this.nodeDeltaPos);
            this.node.setPosition(this.nodePos);
        }
        if(this.moveLeft){
            this.nodePos = this.node.getPosition();
                if(this.moveForward || this.moveBackward){
                    this.nodeDeltaPos.z = -(this.movementSpeed/2) * deltaTime;
                } else {
                    this.nodeDeltaPos.z = -this.movementSpeed * deltaTime;
                }
            Vec3.add(this.nodePos, this.nodePos, this.nodeDeltaPos);
            this.node.setPosition(this.nodePos);
        }
        if(this.moveRight){
            this.nodePos = this.node.getPosition();
                if(this.moveForward || this.moveBackward){
                    this.nodeDeltaPos.z = (this.movementSpeed/2) * deltaTime;
                } else {
                    this.nodeDeltaPos.z = this.movementSpeed * deltaTime;
                }
            Vec3.add(this.nodePos, this.nodePos, this.nodeDeltaPos);
            this.node.setPosition(this.nodePos);
        }
    }
}

I’ve created a separate globalVars script like this:

import { _decorator, Part, Node } from 'cc';
const { ccclass, property } = _decorator;

@ccclass('globalVars')
export class globalVars extends Part {
    
    /* International Variables */

        public character;
        public digital camera;

    /* Finish International Variables */
}

As you possibly can see within the participant script. I set this because the character within the globalVars, that enables me to work together with the character within the digital camera script. Unsure if that’s the proper method round it (these are my first scripts in cocos ever).

So now I’ve created a digital camera script and connected it to digital camera.

import { _decorator, Part, Enter, Vec3, enter, math, Quaternion, Quat, Node, quat } from 'cc';
import { globalVars } from './globalVars';
const { ccclass, property } = _decorator;

@ccclass('cameraScript')
export class cameraScript extends Part {

    /* Native Variables */

    personal mousePos: Vec3 = new Vec3(0, 0, 0);
    personal angleX;
    personal angleY;
    personal xAxisMin = 45
    personal xAxisMax = 180;

    /* Finish Native Variables */

    begin() {
        globalVars.digital camera = this;
        enter.on(Enter.EventType.MOUSE_MOVE, this.onMouseMove, this);
    }

    replace(deltaTime: quantity) {
        this.node.setPosition(globalVars.character.node.getPosition());
    }

    onMouseMove(occasion:EventMouse){

        this.angleX += -event.movementX; 
        this.angleY += -event.movementY;

        this.angleY=math.clamp(this.angleY,this.xAxisMin,this.xAxisMax);

        this.node.rotation= Quaternion.GetQuatFromAngle(new Vec3(this.angleY,this.angleX,0));
    }
}

So this script units the place of the digital camera to the character. The rotation is a script instance I discovered else the place on the boards (unable to hyperlink this).

Though I solely get this error once I do that:

Can not learn properties of undefined (studying 'GetQuatFromAngle')

Other than this instance I couldn’t discover anything of use. I attempted another issues too. I got here shut however it was very Janky and I forgot what I did to attain that now.

Has anyone received any concepts for an answer?

Thanks,
-iDev