Synchronizing weapon spread with the spread circle in the UI

Godot Version

v4.7.1.stable.official

How to synchronize the spread of weapons with the spread circle in the UI?

I am developing my own 3D FPS shooter and want to implement a mechanic where bullets deviate from the main direction by a certain adjustable angle. It also needs to be synchronized with the user interface (UI) — a dynamic spread circle in the center of the screen. I don’t quite understand the principle of implementing this mechanic.

How can I calculate the required size of the circle depending on the given spread angle, considering that each player may have a different screen resolution and field of view (FOV)? Please explain the general principle. It would be useful to see an example of the code.

Earlier, I tried to implement a similar mechanic in a 2D project. There, the spread angle depended on the UI: a random point in the spread circle was selected, towards which the projectile was directed. This was inconvenient because the circle had to be enlarged and reduced depending on the distance to the player, there was no uniform distribution of bullets, and, most importantly, the UI controlled the game logic, which was incorrect.

I would like to note that the spread angle should change dynamically, so it should not be tied to constants.

What would the circle radius represent in the 3d world?

If it represents the spread angle, then just divide the spread angle by the camera fov angle to get the percentage. Multiply that by the viewport size and that’s your circle diameter.

Turns out it was that simple. Thank you very much. :clap:

Note that for mathematically correct value you actually need to use tan(spread) / tan(fov). But using just spread / fov is a good enough approximation for this.