Touch controls & detecting input method

49

Stats

18,679 visits, 24,507 views

Tools

Translations

This tutorial hasn't been translated.

License

This tutorial is licensed under CC BY 4.0. Please refer to the license text if you wish to reuse, share or remix the content contained within this tutorial.

This tutorial is recommended by the Construct team! This means it contains useful, high quality information that will help grow you as a game developer.
Published on 4 Oct, 2017. Last updated 4 Mar, 2019

Often you'll develop a game with a keyboard and a mouse, but these days many devices have a touchscreen with neither a mouse nor a keyboard. 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. Its Use mouse input property is enabled by default. This means 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. It also helps you test your game on a desktop system using your mouse as single-touch input.

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 x 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.

Sprites used as on-screen 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 condition to call a behavior's Simulate control action, such as below:

Event for controlling behavior by touch

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 moves 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 could 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! You might want to provide an option in your game so users can change it, since it's also possible to have mixed-input devices like laptops with touchscreen displays or tablets with a keyboard and mouse attached. You could also dynamically hide and show the on-screen touch controls depending on if they last used keyboard/mouse or touch input. However going by the user's first input is generally a very good guess as to how they want to control the game.

  • 8 Comments

  • Order by
Want to leave a comment? Login or Register an account!
  • I tried this and had the problem that the "on any touch start" seemed to register as a mousclick too. I changed it to "on any touch end" and it worked.

    Ashley

  • nice but I wish I knew about touch a point to move rather than putting sprites on the UI

  • i tried this but the buttons stick in position and not on the screen. if i continue to move, maybe i cannot see the buttons anymore.

  • This is exactly what i needed thanks I appreciate it.

  • Dude, i love you! you are amazing! Thanks bro,thanks very much!

  • Load more comments (3 replies)