I have a problem currently with my crosshair. The top and bottom reticles of my crosshair look different to the left and right ones sometimes when I resize the crosshair image. The way I resize the entire crosshair is like this:
Here is the entity hierarchy, as you can see the individual reticles are inside the Crosshair image.
and here are the properties of the top and left reticles. As you can see I have changed them by Width and Height rather than rotation. I don’t know if that is the correct approach but I did it by rotation as well and the same thing happened.
I don’t think the height and width of the element component is also resizing if you set the scale. Apart from that I guess you need different code to scale the horizontal rectangles, because you don’t want to scale on the same axis as your vertical rectangles. Check what it does if you scale it in the editor directly and then you know what you have to do by script.
Here is another image, this time the left and right looks perfect and just how I want it but top and bottom are blurry even though they are all the same size and values. These all change together every time I change the size.
I tried enabling device pixel ratio and that did not do anything.
So when you resize the crosshair does the it look fine on your screen? Is it something to do with the resolution of my screen?
Because I did some further testing today and found that left and right always looks different to top and bottom. I tried lots of things but this is really weird, I tried rotating that made it blurry I tried re-sizing that made it blurry, I tried changing height and width that made it blurry too. I tried deleting the crosshair group and putting it directly on the 2D screen, I tried changing the 2D screen resolution every time the same thing happens. Even when I do not make the top and bottom verticle this still happens:
It’s like the left and right have a completely different resolution to the top and bottom reticles??
What I like to know is how you get and record that result. For example what kind of device do you use and what is the zoom level of the browser. I hope the PlayCanvas team can give you more useful information because they know all the ins and outs.
Below is how the crosshair with a scale of 0.4 looks on my screen.
This is a shame that it will never look 100% clear so I have removed the outlines. It’s nice having the outlines because sometimes you cant see the crosshair when it blends into a similar colour. I used the outline as a counter for this.
Could I somehow make the crosshair colour a bit more vibrant and visible (stand out) without an outline or is this something I must accept.
So I matched the native resolution to the 2D screen reference resolution manually (by changing both values to (1280, 720), and other values just to see the effects but it didn’t really change anything. When changing the crosshair size sometimes it looks good, at other sizes it looks better, at others it looks really bad, it’s like hit or miss.
I noticed you said dynamically change the size of the UI to match the resolution of the display. How would I do that? is it by code? and do you think it would make a difference to the above?