Construct 2 Tutorial - 36 Making Touch Controls - Construct 2 Touch Cont...

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.


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:


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!