Urban Terror Forums: HappyDay - Viewing Profile - Urban Terror Forums

I'm Looking at You - Crosshairs and Weapon Spread

There are plenty of features I'm working on for the new Urban Terror, but not many are that interesting or visual. That, combined with the fact that writing blog posts takes quite a bit of time, is the reason why you see me so rarely post updates of the progress I'm doing on the game. Recently, I've implemented the crosshairs for Resurgence and that is something worth writing about.

So, let's consider the situation in the game when shooting a bullet. The player has a marker in the middle of the screen - the crosshair, which he/she can point in any direction to help direct the bullets from the gun into the target (preferably the enemy's head). Since we want the game to require a bit more skill than to simply click when your crosshair is on a target, there is a feature called spread.

The faster you move and the more shots you fire in quick succession, the larger the spread value. Instead of drawing a line from the player to where the center of the screen is, we calculate a cone and pick a random line inside that cone as the bullet's trajectory. The spread value is used as the angle of the cone. This is what a cone with 20° angle looks like.

The idea is to control your movement and shooting patterns to control the randomness of your shots. Simply holding down your mouse button to fire as quickly as possible (called spray and praying) will increase the spread and the bullets will likely miss when the target is far away. Instead, you want to fire 2-3 bullets and wait a short time for the spread to decrease again before firing another couple of bullets. Crouching will decrease the spread making your shots more accurate, but at the same time making you a more or less stationary target.

Interestingly enough, a cone from the player's view will end up being a circle with constant radius on the screen, no matter how long the cone is. That is because the view of the player is a frustum (a chopped off pyramid), starting at the same point. The radius of the circle on the screen is determined by the angle of the cone, the screen resolution and the field of view. With a bit of trigonometry involved to calculate the size of the crosshair on the screen, it is possible to have the crosshair exactly match the circle described by the spread cone. That means the crosshair can accurately show the player exactly in which area the shots are going to hit. This also ensures you can reliably compare the spread of the weapons by observing the crosshair.

Many games use a single image file as crosshair, which gets scaled up or down. The problem with that approach is that the resolution of the texture determines how big you can scale it before it starts to look pixelated. Also, features like the width of a circle get wider with scale. More advanced crosshairs could use 5 images, one for the center and 4 for the sides, which get moved away from the center as the spread increases. That lessens the problems a bit, but you're limited in the shapes you can use. We chose a different approach. All our crosshairs are 100% procedurally generated, without any image files.

I'll explain a bit how that works in Unreal Engine 4. The basic idea is to do math on the UV coordinates of the material to create geometric shapes. The U coordinates are a simple linear gradient from 0 to 1 in horizontal direction. The same is true for the V coordinates in vertical direction.

Multiplying will scale the gradient, adding and subtracting will move the gradient. With other functions like clamping or taking the absolute, you can easily create a simple line.

With more advanced math like using polar coordinates, it's possible to create all kinds of circular shapes. Combining a bunch of shapes can result in really interesting crosshairs. I've made extensive use of a library of complex functions I created about a year ago, which I'm also selling on the UE4 marketplace (shameless self-promotion detected). Check it out if you're interested in this sort of thing. The most awesome thing about this math-based approach is that all the values for scale, width, radius, length, color, opacity, number of lines, etc. can be adjusted in real time.

Here's a preview of the 20 crosshairs I've created so far and how they scale with the spread value between 0 and 1.

And here's a quick preview in-game.

We haven't built a menu yet to select a crosshair or to adjust all the values. That's something I will do at some later point in time. Also note, there's a second feature called recoil, which moves your view a bit upwards when shooting, which I haven't mentioned here because it's unrelated to the crosshairs.

Each weapon has 4 values related to spread, which we can adjust. The formula used to calculate the spread is different from Urban Terror 4, so we can't (and don't really want to) copy the values from the old game. We are going to change these parameters a lot during development, especially once we enter more extensive private and public testing.

That's it. I hope you enjoyed reading this and maybe learned a thing or two in the process. I enjoyed working on this feature a lot and I'm really excited to have this in the game.

And as always,
Have a happy day! :)

---

link to original Blogs #55