How do i make a movement script and a camera that follows the player

Help & Support
1

heres my script
and link https://playcanvas.com/editor/scene/1220680

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, 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

Hi @Lol_So_funny and welcome,

Try writing about your problem as well, the code you posted is mostly coming from the First Person Movement example. It doesn’t really make sense to post the full script here without telling us what doesn’t work for you.

If you want a third person controller there is another example for that:

https://developer.playcanvas.com/en/tutorials/third-person-controller/

3

i think it may bc my pc im not sure the camera view just bounces around im not sure if its in the code or not

4

Hi @Lol_So_funny! You need to fix a couple of things.

  • Add a collision component to your Plane entity and give it the correct size.

  • Add a rigidbody component to your Plane entity and set the type to static.

  • Parse the script to activate the attributes of the script.

    image

  • Add the Camera entity to the correct attribute of the script.

.

5

thx it works kinda, turns out its my pc it makes any 3d games camera bugged thx any way tho sorry that i wasted ur time

6

ive been thinking the part that is bugged is when the camera moves so what if the player moved but not the camera i tried using a script from an old tutorial from 2016 but i cant get it to work could ya have a look please, thanks.

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

// initialize code called once per entity
FirstPersonMovement.prototype.initialize = function() {
    
};

// update code called every frame
FirstPersonMovement.prototype.update = function(dt) {
    if (this.app.keyboard.isPressed(pc.KEY_A)) {
        this.entity.translateLocal(-0.1, 0, 0);
    } 
    
    if (this.app.keyboard.isPressed(pc.KEY_D)) {
        this.entity.translateLocal(0.1, 0, 0);
    }

    if (this.app.keyboard.isPressed(pc.KEY_W)) {
        this.entity.translateLocal(0, 0.1, 0);
    } 
    
    if (this.app.keyboard.isPressed(pc.KEY_S)) {
        this.entity.translateLocal(0, -0.1, 0);
    }

    if (this.app.keyboard.isPressed(pc.KEY_Q)) {
        this.entity.translateLocal(0, 0, 0.1);
    } 
    
    if (this.app.keyboard.isPressed(pc.KEY_E)) {
        this.entity.translateLocal(0, 0, -0.1);
    }
};

heres the link again https://playcanvas.com/editor/scene/1220680

7

First you need to parse the script again. The current way of movement in your script need a kinematic rigidbody. If you want to move a dynamic rigidbody you need to apply a force on the rigidbody. The camera is not moving with your current setup.

https://developer.playcanvas.com/en/tutorials/Using-forces-on-rigid-bodies/

8

hmm i added parse not but it still dosnt move and i dont want the camera to follow

9

I don’t know what you are doing with the script(name), but there is still a problem with the script. This time you have to remove the script from the box entity and add the script again.

image
image937×353 47.5 KB

10

thanks it works now!!

1 Like