How to make floating joystick using rexrainbow's Joystick Plugin?

Phaser 3
1

I’m trying to make it so that the joystick starts wherever the user clicks on the screen. This is what I have done so far:

this.input.on('pointerdown', function(pointer){
    var touchX = pointer.x;
    var touchY = pointer.y;
    this.movementJoyStick.base.x = touchX;
    this.movementJoyStick.base.y = touchY;
    this.movementJoyStick.thumb.x = touchX;
    this.movementJoyStick.thumb.y = touchY;
}.bind(this));

Using this the joystick moves to the touch point but it doesn’t get activated, the user has to click again for the joystick to get activated. I want the joystick to move to the touch point and get activated in one click.

2 
this.input.on('pointerdown', function (pointer) {
    this.movementJoyStick.setPosition(pointer.x, pointer.y);
}, this)

See this demo, line 33-35

1 Like