In-game control buttons on a Phaser game - opinions please?

[owen]

Hi all

 

OK so I have just started to think about making my Phaser game usable on mobile devices (without keyboard) and I am looking for some opinions on the best way to tackle this.

 

Here is the game so far - it only works on desktop browsers because it only uses keyboard input at the moment.

http://www.owensouthwood.com/mrgoggles

 

Now keep in mind that my game is a platformer with the following controls:  LEFT, RIGHT, CROUCH, JUMP, FIRE.  With a keyboard, this is easy for a user to control.  But for touch screen I fear the combination of keypresses will prove problematic.  I obviously will need some kind of on-screen buttons to allow this to be used on touchscreen devices.  But - thinking about the physical positions in which you can put your fingers and thumbs on a screen - it might be tricky for a user to hold down the FIRE button at the same time as say, LEFT and JUMP.

 

And then we have the question of whether or not to try and detect touch screen and only display the buttons where required. This article got me thinking.... You apparently cannot 100% reliably detect touch screen in a browser.  You can only detect if the browser supports touch API.

http://www.stucox.com/blog/you-cant-detect-a-touchscreen/

 

So what I'm now thinking is that I should not even attempt to detect touch capability at all, just have a menu screen that says 'Keyboard users press SPACE to start / Touch users click this button [ *boink* ]'  - and then either display in-game buttons or don't, depending how they started the game.  Is that a reasonable approach or do you think it would be annoying to the users?

 

What I don't want to do is display needless in-game buttons for PC/Desktop users who are keyboard users.  But also I do not want to make the game unusable for touch screen users.  So I think that I will need buttons if the user chooses to show them.

 

Assuming I have buttons on touch screen, is there a preferred layout or position for them?  I was thinking to arrange the buttons in pairs - LEFT & RIGHT on the bottom left of the screen, JUMP & CROUCH on the bottom-right, but then where to put FIRE?  It's tricky because I want FIRE to be held down in combination with other buttons.  (Perhaps have 2 x FIRE buttons, one on each side of the screen?) Perhaps my only option is an AUTO-FIRE but this would detract from the logic of the game (there is limited ammo which runs out when you fire).

 

I would welcome any thoughts or suggestions or ways in which Phaser could help with touch events.

 

Thanks!

Owen

[Heppell08]

You wouldn't need to ask the user if they are desktop or mobile to show the onscreen touch keys you would be adding because phaser has device code in there.

If you're using states like boot and menu etc then you can decide if touchscreen is on or not via the boot with a simple if().

if(this.game.device.desktop === true) { return; }

else { // load touch buttons here }

I'm on mobile at the minute so that is psuedo code but look up device code in phaser. It is like the code above that can sit in the boot and either load or not load them buttons for you.

The main change would really be to add a button on your menu rather than a key input because then the user is non the wiser to being a desktop or mobile user. Also look at using gamecontroller js as thats got so very nice stuff for platformers and stuff. I used that too with some custom swipe controls and the onscreen game controller buttons. Check phaser examples for the run down on it.