How to make all crosshair reticles look the same resolution

Hello

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:

initialize() {
   this.crosshair = this.app.root.findByName('Crosshair');
}


Crosshair.prototype.crosshairSize = function() {
    // changes crosshair size
    this.crosshair.setLocalScale(this.crosshair_size, this.crosshair_size, 1);
};

Here is the entity hierarchy, as you can see the individual reticles are inside the Crosshair image.

1

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.

and here is the final result. As you can see the left and right reticles look different to the top and bottom even though they are the exact same size.

2

I want the left and right to look the same as the top and bottom. You can see that they look different. Even the colour of the left and right look off too.

Thanks

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.

1 Like

I will test this out

It looks fine in the editor when I manually scale it.

The problem is if I change the overall size to 0.4 the left and right reticles look off, then when I change it to 0.5 then the left and right look fine but the top and bottom look off.

Look now the top and bottom are different:

1

This is very weird, I am wondering if the problem is the Crosshair group or the 2D screen that may be causing it.

1

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.

Can you share a project link please?

Feel free to use this as you like: https://playcanvas.com/project/825548/overview/tween2

I checked your project and found that what I said earlier is incorrect. My suggestions are no longer valid.

Other than that, I can’t see the problem. Maybe only when I record the screen and play it in slow motion, but I think this effect is inevitable and also depends on the quality of your screen.

1 Like

You could try to enable Device Pixel Ratio of your project settings.

1 Like

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:

1

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.

image

image

This is what it looks like to me:

Bear in mind that the images are scaled by the size of the Screen reference resolution and then again by the browser window size.

What it looks like to me is that you are seeing the effects of an image being scaled down so it’s never going to look right or perfect depend because it’s not on a 1:1 pixel reference.

A pixel on the image element may be positioned on two pixels on the monitor for example.

1 Like

As cross hairs tend to be quite small, you may have noticed that most crosshairs in games tend to use a single colour and not have pixel precise outlines.

1 Like

Thanks for the tips @yaustar this makes sense.

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.

Have you tried to use a thicker outline? Either that, or dynamically change the size of the UI to match the resolution of the display so that 1 pixel on monitor == 1 pixel in the UI

2 Likes

I tried a thicker outline, I could manually change the outline through an attribute but even then it looked bad unless the outline was REALLY thick but that ruined the crosshair.

When you mean dynamically change the size of the UI to match the resolution of the display do you mean changing the resolution of the 2D screen relative to the rendering display?

1

2

Yes. The reference resolution would match the native resolution of the rendering window of the browser.

1 Like

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?

Thanks

Also to mention: the smaller and thinner the crosshair gets the worse it looks. So having a really tiny crosshair kind of looks bad.

Something like this: https://playcanvas.com/project/831336/overview/crosshairs

How does this look to you?

1 Like