Jump to content

Best way to handle touch buttons for a platfromer?


Recommended Posts

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!

Link to post
Share on other sites

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.

Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...
  • Recently Browsing   0 members

    No registered users viewing this page.

×
×
  • Create New...