How to change what controls the camera

I’m trying to make a 2 player split screen game and i want one person to have the mouse as camera and another to have different keys like, i for looking up, k for down, l for left, and j for right. any ideas?
[PlayCanvas | HTML5 Game Engine
https://playcanvas.com/editor/code/691128?tabs=44103147,43964578

(first one is project, second one is the code for the camera i want to change)

Hi @Sledge_Gates1,

Since I see you’ve already created two separate movement scripts for each player, you can start by keeping all keyboard related input handlers in one script and the mouse handlers in the other.

Then assign the first script to Player1 and the second to Player2. If your game can work exclusively with mouse vs keys then there won’t be any conflict there.

so do you mean creating a script for movement, and a separate script for the mouse camera movements

There is no need to generate a different script, you can do it however it suits you.

The idea is that you separate the controls depending on which player is active. You can use an if statement together with the entity name to make it simple:

if( this.entity.name === 'Player1'){
   // add mouse movement for Player1
}
if( this.entity.name === 'Player2'){
   // check the keys for Player2
}

okay thats good but, how would i change the mouse to keys? like just specific keys?

Well, in your scripts mouse is used to set the rotation angle of the camera.

So you should do something similar, for example when key arrow right is pressed increase the angle, when key arrow left is pressed decrease.

Try to replicate the values the mouse movement provides with keys.

do you mind explaining a bit further? i’m new to code but i don’t understand much

Sure, something like this could work to move the camera with keys:

    if (this.entity.name === 'Player1' && app.keyboard.isPressed(pc.KEY_A)) {
       this.eulers.x -= this.lookSpeed;
    }

    if (this.entity.name === 'Player1' && app.keyboard.isPressed(pc.KEY_D)) {
       this.eulers.x += this.lookSpeed;
        z += right.z;
    }

ill test this out and come back. i thank you for how much you’ve helped me today

1 Like

okay so i put in the code and it cant read the name of the entity. do i have to add it to the tags or just rename it entirely?

That’s it, rename the entity that is holding the scripts, no need to add tags for this.

it’s still not working. do you mind checking it out?

Sorry I am not on desk now, I will try and do tomorrow if nobody hasn’t stepped in till then.

alright. thank you so much for your time

1 Like

hey so i’ve tried to modify it more but it still can’t read the entity name. even though i changed it both multiple times. i would really love it if you could give me more options because i really want to finish this game and not give up because i hit a roadblock.

Here you go, I’ve modified the first person movement example so you can move the camera with the arrow keys as well:

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;
    }
    
    if (app.keyboard.isPressed(pc.KEY_LEFT)) {
        this.eulers.x += this.lookSpeed * 1;
    }
    
    if (app.keyboard.isPressed(pc.KEY_RIGHT)) {
        this.eulers.x -= this.lookSpeed * 1;
    }    
    
    if (app.keyboard.isPressed(pc.KEY_UP)) {
        this.eulers.y += this.lookSpeed * 1;
    }
    
    if (app.keyboard.isPressed(pc.KEY_DOWN)) {
        this.eulers.y -= this.lookSpeed * 1;
    }    

    // 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, 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);
};

https://playcanvas.com/project/774867/overview/tutorial-fps-movement

1 Like