Hey!
I'd like to add a UI image to the area outside my 16:9 aspect ratio for wider mobile devices. I've seen this discussed a bit on this forum but I'm not certain if the specificities of my project were covered in previous inquiries.
My project details:
You can see the black bars on my project here on the App Store: https://apps.apple.com/us/app/dexter-stardust/id1601114536
What I'd like to achieve is something like this: https://i.pcmag.com/imagery/articles/06rAveo3oYF12YW1AzQWkhO-1.fit_lim.size_1536x.jpg
I have tried:
I believe the border camera renders the fade-out texture, so technically nothing can be rendered on top of it, right? Is that the reason I can't really do what I'd like to achieve?
Is there anything I can do to keep my AC menus for this particular project, and render an image in that border area outside of the 16:9 aspect ratio?
Thanks for any replies!
It looks like you're new here. If you want to get involved, click one of these buttons!
Comments
Borders are drawn with the MainCamera's Fade texture, yes. This is done in Unity's ImGUI system with a depth of 10. Drawing a custom texture in this region should just be a case of drawing over them with a higher depth - but you'll need to do so using ImGUI as well.
The AC MainCamera's GetPlayableScreenArea function can be used to get the area of the screen that's used to render the game, so comparing this to the actual screen size should give you the area to draw the texture in.
Another approach to this problem might be to remove the border camera, and use a regular Unity UI to draw the borders, place it on a separate layer, and then have a second Camera rendering just that layer, set up to be overlayed with the MainCamera.
Thanks for the reply and for providing several options.
I'm leaning towards the final option (removing the border camera and creating a Unity UI border). I have done this:
In the game view the Unity UI, it looks perfect. In fact, when the scene is fading in, the Unity UI is visible all the while. However, as soon as the game finishes fading in, the black border renders immediately over the
Whoops. It didn't get the last line. Here's what I meant:
"In fact, when I play the game in the editor, when the scene is fading in, the Unity UI is visible all the while. However, as soon as the game finishes fading in, the black border renders immediately over the Unity UI".
It'll be a case of modifying the MainCamera script's DrawBorders function, which renders black borders both to suit the aspect ratio, as well as to fill in outside the "safe area" on mobiles.
Let's first try skipping the function entirely - add "return;" to the top of the function (around line 1039 in the current release).
Hey Chris! Thank you so much. I didn't get a chance to try it out, so I didn't respond. Now that I've played around with it, you're right! It works.
For anyone else that finds this later:
On line 1047, under public void DrawBorders(), I just wrote:
return;
That's it. Then, my Unity UI canvas is nothing special. Just a regular Unity UI canvas set to "Screen Space - Overlay". The images in the Unity UI Canvas are overlayed on top of the black borders when the screen size width is greater than 16:9.
I made the Unity UI a prefab and just pulled it into each scene (that part is a bit tedious, but game dev is tedious work).
Very very much appreciated! Thank you for helping me sort this head-scratched out.