FPS mouse left and right to move the body not the camera

Help & Support
,
1

Hello, playcanvas support team hope everything is fine. I just switched to this browser game engine which seems to be awesome and I am also very new in javascript. So I was trying some FPS stuff and i found this tutorial code there was a capsule and the mouse movement moves the camera’s X and Y axis what i wanted was when I moved the mouse left and right wanted to rotate my player body and for the mouse up and down the camera should move up and down. So I tried something with the code and the body rotation did work but when I press W the camera position resets and it is not moving forward. Please help me fix this.
I added two players to check whether the body rotation is working or not
Here is my project link PlayCanvas | HTML5 Game Engine

 // update camera angle from mouse events
    this.camera.setLocalEulerAngles(this.eulers.y, 0, 0);
    this.entity.setLocalEulerAngles(0, this.eulers.x, 0); //I added this to rotate player body


var FirstPersonMovement = pc.createScript('firstPersonMovement');

FirstPersonMovement.attributes.add('camera', {
    type: 'entity',
    description: 'Optional, assign a camera entity, otherwise one is created'
});

FirstPersonMovement.attributes.add('power', {
    type: 'number',
    default: 2500,
    description: 'Adjusts the speed of player movement'
});

FirstPersonMovement.attributes.add('lookSpeed', {
    type: 'number',
    default: 0.25,
    description: 'Adjusts the sensitivity of looking'
});

// initialize code called once per entity
FirstPersonMovement.prototype.initialize = function() {
    this.force = new pc.Vec3();
    this.eulers = new pc.Vec3();

    var app = this.app;

    // Listen for mouse move events
    app.mouse.on("mousemove", this._onMouseMove, this);

    // when the mouse is clicked hide the cursor
    app.mouse.on("mousedown", function () {
        app.mouse.enablePointerLock();
    }, this);

    // Check for required components
    if (!this.entity.collision) {
        console.error("First Person Movement script needs to have a 'collision' component");
    }

    if (!this.entity.rigidbody || this.entity.rigidbody.type !== pc.BODYTYPE_DYNAMIC) {
        console.error("First Person Movement script needs to have a DYNAMIC 'rigidbody' component");
    }
};

// update code called every frame
FirstPersonMovement.prototype.update = function(dt) {
    // If a camera isn't assigned from the Editor, create one
    if (!this.camera) {
        this._createCamera();
    }

    var force = this.force;
    var app = this.app;

    // Get camera directions to determine movement directions
    var forward = this.camera.forward;
    var right = this.camera.right;


    // movement
    var x = 0;
    var z = 0;

    // Use W-A-S-D keys to move player
    // Check for key presses
    if (app.keyboard.isPressed(pc.KEY_A) || app.keyboard.isPressed(pc.KEY_Q)) {
        x -= right.x;
        z -= right.z;
    }

    if (app.keyboard.isPressed(pc.KEY_D)) {
        x += right.x;
        z += right.z;
    }

    if (app.keyboard.isPressed(pc.KEY_W)) {
        x += forward.x;
        z += forward.z;
    }

    if (app.keyboard.isPressed(pc.KEY_S)) {
        x -= forward.x;
        z -= forward.z;
    }

    // use direction from keypresses to apply a force to the character
    if (x !== 0 && z !== 0) {
        force.set(x, 0, z).normalize().scale(this.power);
        this.entity.rigidbody.applyForce(force);
    }

    // update camera angle from mouse events
    this.camera.setLocalEulerAngles(this.eulers.y, 0, 0);
    this.entity.setLocalEulerAngles(0, this.eulers.x, 0);


};

FirstPersonMovement.prototype._onMouseMove = function (e) {
    // If pointer is disabled
    // If the left mouse button is down update the camera from mouse movement
    if (pc.Mouse.isPointerLocked() || e.buttons[0]) {
        this.eulers.x -= this.lookSpeed * e.dx;
        this.eulers.y -= this.lookSpeed * e.dy;
    }
};

FirstPersonMovement.prototype._createCamera = function () {
    // If user hasn't assigned a camera, create a new one
    this.camera = new pc.Entity();
    this.camera.setName("First Person Camera");
    this.camera.addComponent("camera");
    this.entity.addChild(this.camera);
    this.camera.translateLocal(0, 0.5, 0);
};
2

Hello

this.entity.setLocalEulerAngles(0, this.eulers.x, 0);

Here you are trying to move the entire player entity which includes both camera and player entity (with the camera again) and they are interfering with each other.

I had the same problem as you but found an easy fix by creating a new entity called orientation inside the player entity with the camera and player model being its children. This orientation entity will be responsible for ONLY rotating the camera and player model relative to your mouse movements. You will then need to create a script attribute and reference your orientation entity so you can use it in the script. FirstPersonMovement.attributes.add('orientation', {type: 'entity'});

Then simply do this.orientation.setLocalEulerAngles(0, this.eulers.x, 0); That should fix your problem and now the player body and camera should both rotate relative to the orientation.

see the sample here

2 Likes
3

Thanks a lot @nasjarta it helped :smiley: and it worked in offline
I tried the same thing with multiplayer using photon but there we cant see any type of rotation for other players joining i tried updating the rotation of the player in the player.js script too here is my code and project link PlayCanvas | HTML5 Game Engine

var Player = pc.createScript('player');

Player.prototype.initialize = function () {
    if (!this.app.loadBalancing || !this.app.loadBalancing.isJoinedToRoom()) {
        console.error("not connected");
    }
    this.tmpVec = this.entity.getPosition().clone();
    this.tmpVec1 = this.entity.getRotation().clone();
    this.app.on("loadbalancing:raiseEvent", this.raiseEvent, this);
};

Player.prototype.postUpdate = function () {
    const playerPos = this.entity.getPosition();
    const playerRot = this.entity.getRotation();
    if (!this.tmpVec.equals(playerPos)) {
        this.tmpVec = playerPos.clone();
        this.raiseEvent();
    }

    if (!this.tmpVec1.equals(playerRot)) {
        this.tmpVec1 = playerRot.clone();
        this.raiseEventI();
    }
};

Player.prototype.raiseEvent = function () {
    if (!this.tmpVec.x || !this.tmpVec.y || !this.tmpVec.z) return;
    const data = {
        position: {
            x: this.tmpVec.x,
            y: this.tmpVec.y,
            z: this.tmpVec.z,
        }

        
    };

    
    console.log("raiseEvent!!");
    this.app.loadBalancing.raiseEvent(0, data);
};

Player.prototype.raiseEventI = function () {
   

        if (!this.tmpVec1.x || !this.tmpVec1.y || !this.tmpVec1.z) return;
    const data1 = {
        rotation: {
            x: this.tmpVec1.x,
            y: this.tmpVec1.y,
            z: this.tmpVec1.z,
        }
};
console.log("raiseEventI!!");
    this.app.loadBalancing.raiseEventI(0, data1);
};

How can i update the rotation of the players in multiplayers?

4

So can anyone tell me how can do that? :sweat_smile: :sweat_smile: