How to create circle crosshair ui that can scale properly

Hey, so I’m looking to create an in-game crosshair that changes in size depending on the spread of the weapon that you’re using.

The problem, is that I’m also hoping to have many different types of crosshairs in the game. Sure, I can create a simple “+” crosshair out of 4 frames and just spread them apart, but what about circular crosshairs?

Basically, I don’t think I can.

I’ve tried using a sprite, but of course when I scale that it also increases the thickness of the border, which is a problem. There’s also the problem of blurriness at different sizes.

I’ve also tried just making a crosshair out of a bunch of frames, but the problem there is that at certain sizes the crosshair has issues keeping the frames at the same relative position and size.

If it matters, this was created by placing a bunch of frames with scaled size and position inside of a larger frame, which is then resized. Maybe this is causing some of the issue, lmk if you think so.

An example:
Crosshair at full size -
Notice that the top left and top right frames are thicker than the bottom left and bottom right frames?

Crosshair at quarter size -
Now, notice that the bottom right frame is thicker, and also slightly out of place?

This causes a pretty inconsistent, non professional look.

Anyways. I’m looking for any suggestions or ideas on the matter. Do you guys think it’s possible to create this sort of ui, or should I just stick with a normal “+” crosshair?

1 Like

From the perspective of combat, it really depends on what is expected. If you are trying to make a Third-Person-Shooter game, then you probably should not have spread, it makes it much for difficult. Stick to a normal crosshair that has no spread, and you can also reduce the accuracy of the bullet if you want to.

If you are aiming towards a First-Person-Shooter game, then go ahead and use spread. You can spread the top, bottom, left, and right crosshairs by constantly manipulating their X and Y values. For the arrows that are on the side, you could set their AnchorPoint to a special value that you know will always recenter it, then just have it spread out using both X and Y values at the same time.

Just use one circle, (or whatever you are using) then you can size it up using something like TweenService or TweenSize to size it up. Although you may need to use TweenSizeAndPosition for tween size. It’s up to your preference.
Personally, I would use TweenSizeAndPosition since it’s simple to use.

Hmm. I think you guys misunderstand a bit - I don’t have any issue on the programming side with tweening the ui, and I’m not asking if my game would be better with spread or not. I’m simply asking if it’s possible to create a circular crosshair that can change in size without blurring or distorting in any way.

Here’s an example of the desired look taken from the last of us - Image from Gyazo

You can then just have your circular image size be tweened to be bigger or smaller. I don’t see a problem with it and it should only blur if your circular crosshair is low res.

Are you using an image or frames?