Sponsored By

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.

Jason Seip, Blogger

March 28, 2014

2 Min Read
Game Developer logo in a gray background | Game Developer

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!

Read more about:

Featured Blogs

About the Author

Daily news, dev blogs, and stories from Game Developer straight to your inbox

You May Also Like