informa
2 min read
article

Porting to a Mobile Touch Interface

It’s tempting to think, when porting a “click-and-drag” game from PC to mobile, that your control scheme update will be as simple as hiding the cursor, but the reality is far from it.

In February of this year, we released Let There Be Life, a relaxing, "puzzle-ish" creativity game for the PC. Players use the mouse to place (by dragging and releasing) branches onto a series of trees in order to restore life to them. However, the leaves on the branches cast shadows that take light away from plants on the ground below. The players fails if she deprives any plant of too much light.

Let There Be Life has plants, animals, and the odd mushroom.

We knew from the start that the first major change in moving Let There Be Life to mobile would be that, when selecting a branch for placement, it would need to be offset from the touch position so that the player's finger doesn't obscure the branch itself. This is not just important from a visual standpoint, but essential for being able to see/align each branch's attach point.

What quickly became apparent is that some branches looked too close to the finger, but others not. We realized that branches pointing away from the finger need a greater offset so the attach point at the base is a comfortable distance from the finger.

That was a good start, but we still had work to do.

Looks almost done...it's not!

Looks almost done...it's not!

The next problem to be dealt with was the inability to consistently place certain branches near the tops of the trees without risking the finger leaving the touchable screen area. This was particularly evident when the branch pointed up, such that the attach point was at the bottom.

To combat this, we amplify the branch's current y-position with respect to the finger as the player drags it upward. The amount of this amplification is dependent on both the current position of the finger (increasing the higher the finger moves) and the initial touch position (this establishes the vertical "zero line" at which there is no influence).

No/little vertical change.Note how the branch has moved up.

 

 

 

 

 




Note how the branch has shifted upwards in the right picture.

All these changes have us in a pretty good place. However, while playing the game on a touch screen is already satisfying, there’s still work to be done refining the controls (I’ll probably write a follow-up post about that once we’re done). Nevertheless, it’s already exciting to see the game on mobile and we are super-psyched to introduce Let There Be Life to the mobile arena!

Latest Jobs

Treyarch

Playa Vista, California
6.20.22
Audio Engineer

Digital Extremes

London, Ontario, Canada
6.20.22
Communications Director

High Moon Studios

Carlsbad, California
6.20.22
Senior Producer

Build a Rocket Boy Games

Edinburgh, Scotland
6.20.22
Lead UI Programmer
More Jobs   

CONNECT WITH US

Register for a
Subscribe to
Follow us

Game Developer Account

Game Developer Newsletter

@gamedevdotcom

Register for a

Game Developer Account

Gain full access to resources (events, white paper, webinars, reports, etc)
Single sign-on to all Informa products

Register
Subscribe to

Game Developer Newsletter

Get daily Game Developer top stories every morning straight into your inbox

Subscribe
Follow us

@gamedevdotcom

Follow us @gamedevdotcom to stay up-to-date with the latest news & insider information about events & more