- Home /
Grid Movement Controls on Mobile - UX Problem
I'm currently working on a mobile-based frogger game. Like classic Frogger, this game will focus on grid-based movement, moving in one of four directions at a time. Currently, I'm having trouble understanding how I want to design the controls.
Below are two points on the screen where a player will touch, A and B:
When A is touched, a check is made to figure out which direction to move in. The frog will move in the direction that has a larger absolute
distance. In the example above, the y destination is further away, so the frog would move up.
However, when B is touched, the x and y distances are about equal. This means the chance of moving up or right is about 50/50.
I have thought of two ideas to solve this problem, but I'm worried that I'm missing some crucial problem within the design.
My first idea was to create "deadzones" where, when pressed, the player will not move in either direction, ensuring the player doesn't make a mistake, but also creates the problem that the player won't move if they are in danger. This seems like the easiest solution, but I'm not sure that it's going to create the best experience.
My alternate solution is that the frog's move direction will be determined by a few different factors:
What is the larger absolute
distance between x and y? If the absolute
distances are about the same, check to see how far away the previous tap was.
In the above example, Touch B is on a border. When we check the player's previous touch, Touch A, we see it was 200px higher on the y axis. Therefore, since there is such a drastic change in the y axis, the frog would move down.
Now, the UX problem: The latter design sounds like it would work, but are there any glaringly obvious reasons why this wouldn't? Is there a movement control design that I am missing? Are there any outstanding examples of grid-based movement on mobile devices that someone could point me towards?
Sorry about the long post, but I really appreciate any of you that have made it this far! :-)