I have the following issue:
I have a background image, with several “heat points”. Those are basically objects that I want to interact with (like animate, or do some stuff).
My canvas is set to Scale with Screen Size, and the referenced ratio is 1280x720.
The background is set to stretch on width, while height is set to 720. This is because I do not want to show blanks on the sides, while on top and bottom I don’t mind showing blanks, or even missing some data.
The background is behaving as I want (I care only for landscape orientation).
My problem is with setting the other image. When I put it where it should go, it changes with the resolution.
Ideally, I want the user to think it is one image only, I want them to scale the same.
I have “Preserve Aspect” on both, because I don’t want the image itself to change.
How should I set the values to get my desired behavior?
Here are some example pics. Notice how the shape only overlap in one resolution, while I want it to be the same in all resolutions.
I’ve tried playing with anchors, stretches and stuff, but nothing worked so far.



