How to make all crosshair reticles look the same resolution

#21

Your project looks fine for me, and works perfect with resizing the page. Unfortunately the issue with the left and right reticles looking different to the top and bottom is still happening though. It’s really weird that the top and bottom have the same resolution as each other and the left and right have a completely different one even though they are all the same. It’s like they are linked in some way.

This is the code I use to re-size the actual crosshair, although I do not think this makes a difference really. If you manually change the size of the reticles in the editor the same thing happens. In some sizes the left and right glitch out, and others the top and bottom glitch out.

this.crosshair.setLocalScale(this.crosshair_size, this.crosshair_size, 1);

I also did the same as you and created a custom reticle using paint and used that as a texture but even then it happens again…

Here is a quick screen cap of the crosshair (small) without an outline:

1

As you can see top and bottom look really bad compared to left and right, even though I followed all your tips. This is really weird.

#22

I wouldn’t resize the image by scaling as now it makes one pixel on the image to not be one pixel on the monitor.

Why do you need to scale it? In games like CS:GO, the cross hair moves outwards and inwards, not scale up and down.

1 Like
#23

I want to scale it to make the crosshair bigger/smaller. I already have an attribute for changing the gap size as well. I was hoping to be able to change the overall size too.

I don’t think the issue is the scaling because I have tried manually changing the size of the reticles in the editor without scaling and even then it looks like same.

Whatever I do the left/right, top/bottom always looks different in size or colour. I have tried changing the reference resolution of the 2D screen to a million different combinations. Even putting in a jpeg/png causes the same issue no matter what. It’s really annoying.

#24

Yeah, that’s not going to work well for pixel perfect crosshairs. You will have to either use multiple image elements (one for the outline and one for the white body) and increase the size on the element components by 1 pixel increments or have what you have now with imperfect crosshairs

2 Likes
#25

Eg https://playcanvas.com/editor/scene/1231882

1 Like