4

I am developing a mobile game, for fun, and am adding an analogue stick to control the main character. It looks something like this:

enter image description here

I am hoping to get some advice on the appropriate size and position.

Key considerations:

  1. When the user scrolls the analogue stick the centre portion moves outside its bounding circle meaning that the larger the stick the further it could potentially run off the screen.

enter image description here

  1. If the user's finger runs off the screen by mistake then the analogue stick will return to centre stopping the players motion - this could be crucial in a tense part of the game.

  2. The larger the analogue stick the more fine control the user has but also the more real estate the stick takes up.

  3. For older devices we have much less pixel space. An 100 pixel analogue stick suddenly takes up over a third of the screen once we factor in padding.

Ideally there will be an additional analogue stick on the bottom right corner but this might be more of an action button to interact with item, object etc.

I know that touch screen devices are not as tactile as a real controller but this is why I want to ensure my controls feel as natural as possible. Primarily looking at size of the analogue stick (diameter) and position in the bottom left corner.

4
  • Hi @simon_smiley, thanks for your contribution to UXSE. I think you have already answered most of your questions because there are a number of different factors that have to be weighed up to work out the optimal size. I have to say that I haven't seen it positioned in the corner with the games I have tried myself, and also that often an alternative control style (e.g. tilt and wipe) is also provided. Is this game also for tablets or only smart phones?
    – Michael Lai
    Aug 1, 2019 at 7:04
  • You will have to draw a line on what devices, what OS and which versions for full gaming experience.
    – Ren
    Aug 1, 2019 at 10:38
  • This is currently only planned for smartphones. But on a tablet I would assume the position would need to be similar as the device would be held in the same configuration. Devices would be from iPhone 5 onwards. Objectively this means we get less space but with the game being screen centred it should work almost as well. OS - 11 onwards to capture the majority of devices
    – sam_smith
    Aug 1, 2019 at 23:19
  • You can take a good stab at it by looking at what other games do but the gameplay is also a factor. You really should test with users to understand what works best for them in your particular game. Mar 24 at 20:22

3 Answers 3

0

I see many games let the player customize the joystick (size, position and even behaviors like tap delay). I think it is the best to let the player decide. It gives them control and also, you don't need to overplan!

0

Frame challenge: An on-screen analog stick is not a good control mechanism for a mobile game. There are better options available to control the movement of a character, like tapping to tell the character where to go or dragging the character to set a movement path.

In any case, very little should be sized directly in pixels because, as you point out, different screens are different sizes and also have different pixel densities. UI sizes should almost always be sized as a fraction of the screen size or a "real unit" size (e.g. millimeters or inches).

0

According to this article, the minimum size of a button should be 9x9mm or 34x34px.

I've always known the preferred to be 52x52px, and I'm close. 'cause this article on the best sizes for buttons states that we should try using between 42px and 72px. Which sounds reasonable. Personally, especially for mobile games, this sounds too small.

So try using these values as the radius and see what feels most comfortable.

If you go by what some of the answers suggest, e.g. letting users pick their preferred size, then remember to attach an analytics tracker to help you better setup the analogue stick.

Now as for your issue with the spacing. You want the distance between the left/right edge of the screen and the large circle analog to be minimum large circle radius + smallCircleRadius and then limit the small circle to never go beyond the large circle's radius.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.