How big should an analogue stick be on a mobile game?

Question

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

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.

2. 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.

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

4. 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.

Answer 1

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!

Answer 2

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).

Answer 3

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.