Boris van Schooten

Designing games for a touch screen phone

Touch screen phones are becoming more and more common. Sales trends show that touch screens are really taking off since a year or two. This year we see the introduction of several cheap (€ 200) Android phones: The Samsung Galaxy Apollo and the LG GW620.

For both Android and IPhone, the primary input device is a touch screen. Only some Androids have a QWERTY keyboard, the others hardly have any buttons at all. I never worked with touch screens before, so I decided to try my hand at one.

Instead of buying an Android or some other high-end phone I bought a cheap Java phone that has almost exactly the same specs as the cheap Android phones: namely a resistive touch screen and a 240×400 pixel resolution. It costs a mere €60, for which you also get €15 prepay balance.

– My Vairy Touch II running a touchscreen version of Ogrotron.

My experience with the T-Mobile Vairy Touch II

The biggest problem I have using the Vairy Touch II is that it doesn’t come with a stylus, like the Vairy Touch did. With such small screens it’s hard to point at anything accurately. There are two problems, probably universal to all small touch screen devices:

  • The area of your finger is too large to point accurately, and
  • the finger is in the way when trying to look at the screen.

Most of the user interface is adapted to inaccurate pointing, but some parts are not, such as the scrollbars, the drag-and-drop of the desktop elements, and the supplied “bejeweled” clone. I use a makeshift stylus to control these. Even though most touchscreen phones do not come with a stylus, it appears many people prefer having one, and buy third party styluses for more accurate control. They are also available for the IPhone, which requires a special kind of stylus.

As for the rest of the phone: the user interface looks pretty run-of-the-mill. It has some rough edges, but looks generally solid. Some people might have trouble finding particular features (the manual and bad translation doesn’t help either). But installing Java apps is a breeze, just connect it to your computer with USB, download the Jar (into the “Received” folder for example, which is visible to the file manager), disconnect, go to the file manager, and click on the Jar file you want to install. Try that with an IPhone! Apple will probably sue you if you succeed.

I tried installing some games, but found that almost none of them work! The J2ME compatibility is fine. In fact, it’s relatively fast and the screen is great: it’s bright and low-latency. But… most games assume there’s at least a numeric keyboard or a joystick with four directions and fire. But this phone has none of these. Games will have to be designed for the touch screen.

So, I updated JGame to make use of the touch screen and ported the simplest J2ME game (Ogrotron). The touch screen appears as a one-button mouse, for which you can only track position when the button is pressed. It works just fine, with a stylus you can aim pretty accurately. But the experience is really different from a mouse! I started to wonder how on Earth I was going to control things with this input device.

An overview of (single-) touch screen control methods for games

Since the IPhone, a lot of software has been designed for small touch screens. And by now, you can see a lot of touch user interfaces at work on Youtube.

Four directional control:

Bomberman Touch – tap, then swipe in desired direction

Ms Pacman – either touch inside a circle to indicate direction, or swipe in a direction anywhere on the screen.

Pac-man remix – four buttons

Mr Driller – virtual gamepad

Multidirectional control:

Grand Theft Auto Chinatown Wars, Hero of Sparta 2 – touch inside circle to determine direction (this is very common).

Call of Duty Zombies – touch/drag inside circle to determine direction. Adds strafing controls by swiping anywhere on the screen.

Shrek 3 – Tap where you want to go – a less common control type for a platform game

Limited button type control:

Monster Dash – only two buttons

Blue Bird – left side – go left/up, right side – go right/up.

Shooting:

Zombie bikini babes,Plunderland – slingshot control: swipe (from fixed origin) in reverse direction of where you want to shoot.

Great Tank War – tap in one circle for shoot direction, in another for move direction (requires multitouch)

Battle Shock – drag to shoot at the location where you drag.

Interceptor – tap to aim

Some interesting ideas:

Paper cakes – using touch screen as drawing tool

Tricky Fish – simple but may be worth a try