Hello!
I’m having trouble creating the player’s movement arrows in the MOBILE environment, in the DESKTOP environment, I can move the player with the arrow keys and everything is working perfectly the way I want.
The problem with the arrows in the mobile environment is that sometimes when I press an arrow and then stop pressing, even so the arrow is activated, that is, the player keeps moving, even if I am not pressing any buttons.
This problem does not always happen, it only occurs when I spend more time pressing one of the keys, see the image:
In this case I was moving the player up and stopped pressing the key, but it was still activated and the player continued to move upwards.
Now see a part of my code:
- Within the function create:
if(!this.sys.game.device.os.desktop){
//Button goUp
this.goUp = this.add.image(120, 75, 'goUp').setInteractive();
this.goUp.setAlpha(0.5);
//Button goDown
this.goDown = this.add.image(120, 155, 'goDown').setInteractive();
this.goDown.setAlpha(0.5);
//Button goLeft
this.goLeft = this.add.image(75, 115, 'goLeft').setInteractive();
this.goLeft.setAlpha(0.5);
//Button goRight
this.goRight = this.add.image(165, 115, 'goRight').setInteractive();
this.goRight.setAlpha(0.5);
}
- Within the function update:
if(!this.sys.game.device.os.desktop){
//By clicking the button goUp
this.goUp.on('pointerdown', function (pointer){
this.goUp.setAlpha(1);
this.key.up.isDown = true;
},this);
//stop clicking the button goUp
this.goUp.on('pointerup', function (pointer){
this.goUp.setAlpha(0.5);
this.key.up.isDown = false;
},this);
//By clicking the button goDown
this.goDown.on('pointerdown', function (pointer){
this.goDown.setAlpha(1);
this.key.down.isDown = true;
},this);
//stop clicking the button goDown
this.goDown.on('pointerup', function (pointer){
this.goDown.setAlpha(0.5);
this.key.down.isDown = false;
},this);
//By clicking the button goLeft
this.goLeft.on('pointerdown', function (pointer){
this.goLeft.setAlpha(1);
this.key.left.isDown = true;
},this);
//stop clicking the button goLeft
this.goLeft.on('pointerup', function (pointer){
this.goLeft.setAlpha(0.5);
this.key.left.isDown = false;
},this);
//By clicking the button goRight
this.goRight.on('pointerdown', function (pointer){
this.goRight.setAlpha(1);
this.key.right.isDown = true;
},this);
//stop clicking the button goRight
this.goRight.on('pointerup', function (pointer){
this.goRight.setAlpha(0.5);
this.key.right.isDown = false;
},this);
}