Best way to handle touch buttons for a platfromer?

[noway]

Hi,

I'm building a small mobile platformer game with Phaser. 

Here's my code to make the player move left when I press a button on a touchscreen: 

create: function() {
	this.moveLeft = false;

	var leftButton = game.add.sprite(100, 300, 'leftButton');
	leftButton.inputEnabled = true;
	
	leftButton.events.onInputOver.add(function(){
		this.moveLeft = true;
	}, this);
	leftButton.events.onInputOut.add(function(){
		this.moveLeft = false;
	}, this);
	leftButton.events.onInputDown.add(function(){
		this.moveLeft = true;
	}, this);
	leftButton.events.onInputUp.add(function(){
		this.moveLeft = false;
	}, this);
},

update: function() {
	if (this.moveLeft) {
		// Move the player to the left
	}
},

This works, but:

- I find the code really messy.
- There are some bugs if I start to press one button, then drag my finger on another button and release my finger...

Any idea how to make this code better? Thanks!

[mattstyles]

You can approach this slightly differently (there are plenty of ways of handling this), you can collect each button press during the input phase and then apply them all together in the update phase, kind of similar to what you are already doing.

Say, during the input phase your user hits the left and right buttons, each one is registered, the left applies a force to the left and the right, to the right, but before actually applying these to your entity you can sum them, which would equate to 0 probably so you apply 0 to your movement. At the end of each update phase you can reset the forces acting on entities to 0, or decrease them based on some damping parameter, or apply other forces such as gravity, wind, drag etc etc. Movement comes then from the sum of all the forces acting on the entity each frame.

Actually I might have misread your question, why assign the movement to 4 different users actions? Most of those will be redundant, why not simply apply it to the inputDown event? So that entities move only when the button is pressed/touched?

JS is evented by design so most code that translates user actions into system actions ends up looking a little like this, there are some clever patterns that can mask writing that code and make it DRYer, but underneath they usually end up looking like that to the interpreter. Try writing some helper functions for assigning actions to user intentions, that should help you start to write DRYer and more readable code.