Add Border/Overlay Around Viewport?

Is there anyway to add an overlay to the black border on the screen or maybe create a material to mask out the viewport?

I’m trying to do this dynamically since the viewport size will change and I’d still like to have that border regardless of the size of the viewport.

Something like this is what I’m going for.

Any help would be appreciated thank you!

Just make a widget with some images and set this material as the image.

Don’t forget to anchor the images to the screen in the way I have done. I didn’t get a chance to test it with different resolutions, this method will ensure the image doesn’t stretch out but it will start looping at the border of your image.

Let me know if you are having problems or the result is not satisfactory.

Hey thanks for the help so far, currently it scales perfectly on the Y but it doesn’t have the offset on the X, I tried playing around with adding a left/right offset but it didn’t seem to work.

Is it because of the borders? Look at how I changed the anchor.

That doesn’t change anything for me, the problem is that its not scaling to the edge of the viewport so there’s still the black space that isn’t being filled.

Can you rephrase the problem? It works fine for me so I probably don’t understand the issue. Is it that the image is stretching? or the borders are closing/opening?

I want to fill the black areas on the screen with a border but I want the border to scale with the viewport.

Currently your method scales on the Y axis so I can stretch the viewport up and down but if you see the second picture there is still some black space left, what I’d like is for the border to scale so that it fits the rest of that space too.

I could just scale it to fit the viewport but since I want it to be dynamic I need to find another method as just scaling it on the x axis will either overlap the viewport or not fill the space depending on the size of the viewport like how it is in the second picture I put.

Please tell me I got it :smiley:

340151-capture15.png

You will just need to add 2 more if statements for the y axis, and you can adjust the 0.3 and 0.7 value to change the % of the screen it takes up. I think the problem now is that the image stretches.

Thank you so much for the help, you went above and beyond, sadly it seems like the post processing isn’t applying outside of the camera.

I appreciate all the help though.

I think if there’s a way to calculate the black space somehow there should be a way to scale the images in the widget if a post process material isn’t able to render outside the camera bounds.

Ok, I can’t figure it out but I almost have it. There is a hardcoded number for how many pixels there are in an aspect ratio amount, I can’t figure out how to get the true number of pixels in the amount of screen the black bars have.

I think you have a constrained aspect ratio right? Maybe you could free the aspect ratio and use 3D geometry around the center of the screen.

Yeah I think freeing the aspect ratio is the way to go! thank you for that idea its definitely a much cleaner way of doing things.

Is there anyway to mask out what’s overlapping that material, I’m going to have enemies spawning off screen and moving into the play area, but since the aspect ratio is back to normal they player will be able to see the enemy spawn on top of the border.

I’ll mark the question as answered in the meantime thank you for all the help! You’re amazing :slight_smile:

Why not just move the 3D mesh upwards and spawn the enemies behind it, or keep the mesh right in front of the camera up close.

I think making an enemy that’s in front of the 3D mesh invisible through a material would be quite complicated, and you would need to have opacity turned on for the enemy. I could look into it for tomorrow if you need it, it would probably have something to do with custom depth:

If I were to move the mesh above it would just block the level since its not masking that area out.

I was able to create a post process material using the custom depth pass, I masked out the level so it gives me the effect I was looking for thank you again for all the help!

Wow, I didn’t know the material could be so simple, you answered my question now haha. All the best!