Touch buttons to move character

Help & Support
1

Hi friends, I’m trying to move a character or object in two directions, left and right, plus a jump, since it will start always running forward, yes, a typical endless runner, my idea is simpler because I plan to use buttons and not calculate where the player is touching the screen, I don’t need it to be so refined.

I have this code:

Movement.prototype.update = function(dt) {

     var keyboard = this.app.keyboard;
    var left  = keyboard.isPressed(pc.KEY_LEFT);
    var right = keyboard.isPressed(pc.KEY_RIGHT);
    var up    = keyboard.isPressed(pc.KEY_UP);
    var down  = keyboard.isPressed(pc.KEY_DOWN);

    // move this entity based on which keys are pressed
    // dt is the time in seconds since the last frame and stands for 'delta time'
    if (left) {
        this.entity.translate(-dt, 0, 0);
    }
    if (right) {
        this.entity.translate(dt, 0, 0);
    }
    if (up) {
        this.entity.translate(0, 0, -dt);
    }
    if (down) {
        this.entity.translate(0, 0, dt);
    }

};

But of course, I need to change the events so that the buttons (touch in mobiles) do the movement. I’ve been looking for a lot of documentation, but nothing seems to be as simple as this, they always seem to get complicated, can you help me?

I have a good base of Javascript, but it is still difficult for me to adapt to the PlayCanvas environment.

2

Hi @joseromero,

It may be a bit more complex than what you are asking for here, but the following tutorials shows quite nicely how to create touch based movement:

https://developer.playcanvas.com/en/tutorials/touch-joypad/