Touch controls and a trick to detect input method

Favourite 269 favourites
Tutorial written by AshleyOriginally published on 22nd, December 2011 - 5 revisions

These days it's naïve to assume everyone on the web has a mouse and keyboard. On the modern web, many people are now browsing via touchscreen devices like iPhone, iPad and Android phones. If your game can only be controlled by mouse and/or keyboard, users on these devices will be unable to play your game!

However, it's easy to have on-screen touch controls - and there's a clever and simple trick to detect whether the user has a touchscreen device, too.

Mouse input for touch

First of all, if you're designing a game specifically for touchscreen devices, or your game only uses mouse clicks, use the Touch object. Set its Use mouse input property to Yes (it's No by default). Now mouse clicks fire touch events like On touch start and Is in touch. Obviously you can only simulate single-touch input by mouse clicks - holding the left button down represents touching, and releasing it represents not touching. So a click-and-drag represents a swipe by touch.

That easily allows for both mouse and touch input, which for simple games is enough on its own.

On-screen touch controls

For many other games, on-screen buttons are necessary for controls. These can be made with Sprite objects.

First, if you don't have one already, make a non-scrolling layer (you don't want the buttons to move off the screen as you scroll through the level!). Add a new layer and set its Parallax to 0, 0. This prevents any objects on that layer from scrolling - they'll always appear in the same place on-screen.

Now, make sure that layer is selected. The dotted outline in the top-left of the layout view shows the size of the window. Add some Sprites representing your on-screen controls somewhere within the window area. An example of on-screen arrow keys in the bottom-right corner of the window is shown below.

Touch controls
Remember big buttons are easier to touch! You may also want to tweak the collision polygons in the image editor to make their area slightly bigger and therefore easier to touch.

Now you can use the Touch object's Is touching object actions to call a behavior's Simulate control action, such as below:

Touch control event
Now you have on-screen controls that always stay the same place in the window and can control the game.

If your game uses simple left-right controls you can use variations, like large invisible sprites to detect if the user is touching either the left side or the right side of the screen. Remember, the bigger the area they can touch, the easier it is to control the game.

Alternative touch controls

There are lots of different ways to control games on touchscreen devices. You don't have to have on-screen controls, and sometimes alternatives are easier and more fun to use. Here are two other suggestions:

1. Touch around the player to move them, instead of having on-screen arrow keys. For example, in Space Blaster, the space ship could move to wherever you are currently touching. Other buttons on screen can then give alternative actions, like firing rockets.

2. Use the device accelerometer to control movement. In the Touch object, you can retrieve these as the Alpha, Beta and Gamma expressions. This allows you to detect the device tilt along different axes, which can then drive some movement.

Finally, you may wish to adapt controls to be easier for touch devices. Touch controls can be more difficult to use than a keyboard and mouse, so simplifying the controls can make the game more fun. For example, the player most hold spacebar to fire the main laser in Space Blaster. Changing the laser to automatically fire while enemies are on-screen made the game more fun than having to press a separate 'fire' button. It also makes it a little easier, but surely the main aim is to make it fun and not frustrating to control!

Detecting input method

So now you have on-screen touch controls. What if the user is on a desktop computer with a mouse and keyboard? There's no point showing big on-screen buttons in that case. Fortunately, there's a really simple way to detect if the user is using touch input: have a title screen.

It's really that simple. On the title screen, have a message like Press anything to continue. Then, if Keyboard's On any key pressed or Mouse's On any click event fires on the title screen, you know the user is on a desktop. If Touch's On touch start event fires on the title screen, you know the user is on a touchscreen device. You can then set a global variable indicating if the user is on a touchscreen and proceed to the first level. If the global variable is set, show the on-screen touch controls; otherwise, make them invisible. You'll automatically be using the right control system, and the user did not have to do anything!

That's all there is to it!

Further reading

Touchscreen devices often have different screen sizes, so you might want to read Supporting multiple screen sizes as well.

Testing on mobiles and tablets is a lot easier with previewing on a local network.

Unlock your full gamedev potential

Upgrade to the Personal Edition of Construct 2, it has way more features and won't holding back from making money and using your full creativity like the free edition does. It's a one off payment and all Construct 2 editor updates are free for life!

View deals

Plus, it's got a lot of additional features that will help you save time and make more impressive games!

Congratulations on finishing this tutorial!

Did you learn a lot from it? Share it now with your friends!

Share and Copy this Tutorial

You are free to copy, distribute, transmit and adapt this work with correct attribution. Click for more info.

Comments

12
DoubleElite 3,880 rep

Thanks for this great read, really insightful! I'll definitely try to implement this into further projects.

Thursday, December 22, 2011 at 3:41:59 AM
11
gammabeam 13.3k rep

Great tutorial Ashley!
The platform recognition is trick is great!

Thursday, December 22, 2011 at 10:25:14 AM
5
Kyatric 87.5k rep

Nice tricks ;)

Thursday, December 22, 2011 at 1:22:18 PM
7
Zeth 3,406 rep

Simple and elegant solution! Nice work :)

Friday, December 23, 2011 at 5:20:18 AM
3
Aron 4,318 rep

Using a title screen to detect user input support, genius!

Saturday, December 24, 2011 at 11:42:21 PM
3
Tibiacity 4,619 rep

Could we get the sprites for the touch controls?

Monday, December 26, 2011 at 12:42:02 PM
3
studiogami 3,925 rep

Well written and very useful!

Monday, January 02, 2012 at 5:37:16 AM
4
Bigheti 15.8k rep

I was thinking to myself how I would do this ... and "browsing" in Scirra's site I found this great tutorial that teaches you to solve the touch controls on the screen! This Tutorials section is very useful! Again: Thank you Ashley!

Tuesday, January 10, 2012 at 8:23:25 AM
2
Chuck Glenn 2,810 rep

Great idea and great tutorial. But when it got to the "Detecting input method" I got lost. Could you expand on that part of the tutorial? maybe give an example of setting up the global variables? thanks!

Tuesday, February 21, 2012 at 3:09:26 PM
6
bk1 2,445 rep

i solved it by making the controls visible on first touch, without putting a detection screen in front

Friday, February 24, 2012 at 12:36:29 AM
3
Chuck Glenn 2,810 rep

Thanks BK, that sounds like a perfect solution. I'll try that.

Friday, February 24, 2012 at 5:10:51 AM
2
carminielloz 8,643 rep

where can we find nice sprites for commands ( arrows or joypads , joystick like images ? ) thank you

Tuesday, May 08, 2012 at 8:04:39 AM
2
carminielloz 8,643 rep

found sprites ? I try the game on ipad and iphone t he sounds doesn t come through . Any ideas why ? thank you

Saturday, May 12, 2012 at 2:14:57 PM
2
Ashley 192.1k rep

@carminielloz best post to the forum for help. For iOS you need to package with PhoneGap or appMobi to get sound to work, Safari on iOS doesn't support audio.

Saturday, May 12, 2012 at 2:19:17 PM
1
carminielloz 8,643 rep

thank you Ashley so it s Safari s fault .
Could you please be more specific , what do you mean package with PhoneGap or appMobi ?
thank you

Saturday, May 12, 2012 at 2:25:50 PM

Leave a comment

Everyone is welcome to leave their thoughts! Register a new account or login.