How to add jumping to a fps game?

how to add jumping to a fps game and what is the best way to do it? the edditor is here: PlayCanvas | HTML5 Game Engine my code is here:

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: 6000,
    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 =;

    // 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 () {
    }, 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 (! {

    var force = this.force;
    var app =;

    // Get camera directions to determine movement directions
    var forward =;
    var 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_SPACE)) {

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

    // update camera angle from mouse events, 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 = new pc.Entity();"First Person Camera");"camera");
    this.entity.addChild(;, 0.5, 0);

thank you.


That’s a popular topic with a lot of answers in the forums. Try using the search function on top to search for that.

Here is an example answer that came back:

i have been looking at it but i haven seemed to find out a way to implement it.

You can either check for an input via, this.keyDown, this);

in the initialize function and then

CharacterAnimation.prototype.keyDown = function (e) {
    if((e.key === pc.KEY_SPACE){

or in the update function

if ({...

After that, you write

this.entity.rigidbody.applyImpulse(0, 10, 0);

Additionally, in the update function, I’d write code to apply a downwards force to the player that gradually increases (the dt argument come in handy) while he is in mid-air. For that, you need a variable that gets increased by dt (don’t forget to reset the variable when the player starts to jump) and another one that keeps track of whether the player in mid-air (there are many ways to do so). Finally, you would get something like

this.gravity += dt; // initialized in the initialize function (this.gravity = 0)

if (isJumping){
    this.entity.rigidbody.applyForce(0, this.gravity * youCanTweakThisValue, 0);
1 Like


how do i figure out if the player is (jumping)?


With this rule you can check if the player pressed a key to jump. After that rule you can set your jumping boolean to true.

You can also use my example project if you want.

thanks i forgot about it.

There are 3 ways (that I know of) to check if the player is jumping

  1. You give your player collision and check if the player collides with anything that has collision as well. A good tutorial can be found here
    The problem with this method is that it would allow the player to jump whenever he makes a collision with anything. So you would have to shrink the collision volume, which would result in the clipping of the player.

  2. The other and better option is to use a raycast. You achieve a raycast by putting a small empty object underneath the player. You can leave some space, so the game can guarantee to detect if the ray hits anything inbetween. You cast a ray with some code like

    var from = this.entity.getPosition();
    var to = this.entity.findByName(hereGoesTheNameOfTheEmptyObject).getPosition();
    var result =, to);

    if(result){ ...

thanks and Hi.

1 Like