[SOLVED] Convert joystick input to move camera

Help & Support
,
1

So, i added virtual joystick to my game and i can get x and y inputs from it based on where the player is moving it. any ideas on how to make it so that the joystick moves the camera?
here is the script cut down to just the movement and camera stuff:

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('jumpPower', {
    type: 'number',
    default: 10,
    description: 'Adjusts the strength of the player jump'
});

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

FirstPersonMovement.attributes.add('inAir', {
    type: 'boolean',
    default: false,
    description: 'Whether the player is in the air or not'
});

// 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");
    }
    
    this.entity.collision.on('collisionstart', function (result) {
        this.inAir = false;
    }, this);
};

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

    // Check if shift key is pressed for sprinting
    var sprintMultiplier = 1;
    if (app.keyboard.isPressed(pc.KEY_SHIFT)) {
        sprintMultiplier = 2;
    }

    // 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 * sprintMultiplier);
        this.entity.rigidbody.applyForce(force);
    }

    // Jumping function
    if (app.keyboard.wasPressed(pc.KEY_SPACE) && !this.inAir) {
        var velocity = this.entity.rigidbody.linearVelocity;
        velocity.y = this.jumpPower;
        this.entity.rigidbody.linearVelocity = velocity;
        this.inAir = true;
    }
};

FirstPersonMovement.prototype._onMouseMove = function (event) {
    // Update camera yaw and pitch
    this.eulers.y -= event.dx * this.lookSpeed;
    this.eulers.x -= event.dy * this.lookSpeed;

    // Limit pitch to avoid flipping
    this.eulers.x = pc.math.clamp(this.eulers.x, -90, 90);

    // Update camera entity rotation
    this.camera.setEulerAngles(this.eulers.x, this.eulers.y, 0);
};

btw the joystick is from this tutorial:
https://developer.playcanvas.com/en/tutorials/touch-joypad/

2

Hi @almish_subuk,

You could write a similar method to _onMouseMove() and instead of using event.dx/dy to move the camera, use your joystick input x/z.

1 Like
3

Thanks for the response, but i was able to solve the issue. i ended up deleting all my movement code and keeping only the game logic, and then used the stuff from this tutorial: First Person Shooter Starter Kit | Learn PlayCanvas

1 Like