Virtual Joystick help needed

Help & Support
2

Hi @khaelou and welcome,

You need to use the forward vector of your player entity as the base direction for applying the joystick input for movement. That way movement will always face the direction your player is facing.

Here is how I’ve modified your code for that, also I’ve moved the input handler in your initialize method, it’s considered a bad practice for many reasons to bind an event handler on each and every frame:

var PlayerMovement = pc.createScript('playerMovement');

PlayerMovement.attributes.add('speed', { type: 'number', default: 0.085 });

PlayerMovement.prototype.initialize = function () {
    var app = this.app;
    var camera = app.root.findByName('Camera');
    this.cameraScript = camera.script.cameraMovement;
        
    var terrain = this.app.root.findByName('Terrain');
    this.groundCheckRay = new pc.Vec3(0, -1, 0);
    this.rayEnd = new pc.Vec3();
    this.groundNormal = new pc.Vec3();
    this.onGround = true;
    this.jumping = false;
    
    this.touchInput = new pc.Vec3();
    
    // Touch JoyStick Movement of Player Event
    var onPlayerTouchMove = function (x, z) { // z is really y        
        this.touchInput.set(x,0,z);        
    }.bind(this);
    
    // listen for the player touch move event
    this.entity.script.touch.on('touchPlayerMove', onPlayerTouchMove);    
};

PlayerMovement.prototype.update = function (dt) {
    var app = this.app;

    var forward = this.entity.forward;
    var right = this.entity.right;

    var x = 0;
    var z = 0;
            
    var posForJump = this.entity.getPosition();
    this.rayEnd.add2(posForJump, this.groundCheckRay);

    // Fire a ray straight down to just below the bottom of the rigid body, 
    // if it hits something then the character is standing on something.
    var result = this.app.systems.rigidbody.raycastFirst(posForJump, this.rayEnd);
    this.onGround = !!result;
    if (result) {
        this.groundNormal.copy(result.normal);
    }

    if (app.keyboard.isPressed(pc.KEY_A)) {
        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)) {
         if (this.onGround && !this.jumping && this.entity.children[0].script.playerAnimationHandler.direction == 'Jump') {            
            setTimeout(function () {
                this.entity.rigidbody.applyImpulse(0, 14, 0);
                this.jumping = false;
            }.bind(this), 300);
        }
    }
    
    if (app.keyboard.isPressed(pc.KEY_SHIFT)) {
        // Sprint/Boost
        this.speed = 0.175;
    } else {
        this.speed = 0.085;
    }
    
    if (app.keyboard.isPressed(pc.KEY_TAB)) {
        
    }
    
    if (app.keyboard.isPressed(pc.KEY_OPEN_BRACKET)) {
        //this.entity.parent.findByName('Camera Axis').children[0].camera.fov = 1;
    }
    
    if (app.keyboard.isPressed(pc.KEY_CLOSE_BRACKET)) {
        this.entity.parent.findByName('Camera Axis').children[0].camera.fov = 45;
    }
    
    if (app.keyboard.isPressed(pc.KEY_UP)) {
        // camera move up
        this.cameraScript.eulers.y -= 1.5;
    }

    if (app.keyboard.isPressed(pc.KEY_DOWN)) {
       // camera move down
       this.cameraScript.eulers.y += 1.5;
    }

    if (app.keyboard.isPressed(pc.KEY_LEFT)) {
       // camera move left
       this.cameraScript.eulers.x -= 1.5;
    }

    if (app.keyboard.isPressed(pc.KEY_RIGHT)) {
       // camera move right
       this.cameraScript.eulers.x += 1.5;
    }
    
    // Desktop Movement of Player
    if (x !== 0 || z !== 0) {
        var pos = new pc.Vec3(x * dt, 0, z * dt);
        pos.normalize().scale(this.speed);
        pos.add(this.entity.getPosition());

        var targetY = this.cameraScript.eulers.x + 180;
        var rot = new pc.Vec3(0, targetY, 0);

        this.entity.rigidbody.teleport(pos, rot);
    }
    
    // Left Joystick movement
    if (this.touchInput.x !== 0 || this.touchInput.z !== 0) {
        var touchSpeed = 0.1;
        
        var pos = new pc.Vec3().copy(this.entity.forward);
        pos.x += -this.touchInput.x * dt;
        pos.z += -this.touchInput.z * dt;
        pos.scale(touchSpeed);
        pos.add(this.entity.getPosition());

        var targetY = this.cameraScript.eulers.x + 180;
        var rot = new pc.Vec3(0, targetY, 0);

        this.entity.rigidbody.teleport(pos, rot);
    }    
    
    this.touchInput.copy(pc.Vec3.ZERO);
};

For the animations to work you will have to add the joystick input logic to the PlayerAnimationHandler.js script.

2 Likes