Problem with transparency and 2 images

Hello

I think everybody knows the effect that when you make a canvas partly transparent but have 2 images that overlap that you see this overlapping area. And it sucks. And in this case, I have no idea how to fix it.

This is the starting screen before it fades. The image does not fill up the whole space.


The app is developed for different resolutions of course and this is what makes it difficult: on a 4:3 there is no problem at all because I dont need the additional black background. But on wider devices it is needed. But how can I align it exactly at the left border of the background image?

For clarity, I made the canvas behind the starting screen completely yellow and you can see the strip which is the overlapping black background.


I can't wrap my mind around on how to do this

 

Hi,

I really don't get it why this would be problem; if you need to extend some overlay (panel) towards left, in 4:3 you have good deal of it outside of left side of screen edge, but when you change to 16:9, you'd have less or no extended panel left outside left edge of screen. Just make your panel non-stretching and anchor it from right edge?

 

I don't use Panels because I don't see what exactly they are there for
From my understanding it basically means the same as an image here, right?
I don't understand what you mean exactly. Why anchor it to the right edge? The image is anchored at the right edge. The black colored background is supposed to be anchored at the left side of the image (which ends where the dotted line in pic1 is).
Can you maybe make a screenshot of how you mean it? Since I didnt understand yet. Thanks

 

@deLord

Too hard to explain in words - I think this could be quite close what you are after, see this recording / setup I made just now:

UI panel setup

 

That's what I want to achieve, except you used a fixed width and offset for the extra space. So this is not resolution independent

 

@deLord - well, not sure what you exactly want, and I guess you have to DIY... I thought you needed some background image (that keeps it's AR) and it is stuck at right edge of screen, is scaling based on screen size, and then starting from left edge of this image, there is additional extra piece, that can extend under buttons as far as is needed. Well, what I showed does all that, it's not resolution dependent, like you said, and anyway, I think it's best you try to test anchoring a bit more, that way you'll get exactly what you need.

 

maybe I misued my canvas settings. I will have a look into it later.
Thanks for your help

 

So I think it worked. But I am not sure, why. My canvas was not scaling with size but I used the anchors and that always worked out for me except in this case.
Is this the way to go for multiple resolutions? Or does this really depend on the game itself?
Thanks a lot again