Render image outside of 16:9 aspect ratio for mobile
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:
- All menus are AC menus (not ideal, I know, but what's done is done 🤷
- All UI elements (using AC menus) must conform to the 16:9 aspect ratio. So, as the device's screen gets wider, the menu elements must stay in their relative positions and sizes.
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:
- Unchecking "Render Border Camera". This doesn't seem to do anything.
- Setting Aspect ratio to "None Enforced". This stretches the AC menus.
- Creating a Unity UI Canvas with borders, but the black rendered for the border camera always covers it no matter what sorting layer I set it to.
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!
- Jeremy
Howdy, Stranger!
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.
Hi! Sorry to necro this thread. I'm also hoping to have some kind of texture showing up on the sides for my mobile build (like the Grim Fandango example), my contact has asked if there's any way to not have the black bars showing on the sides of the game, but I made my game 16:9 and some phones have wider aspect ratios.
@Chris - I'm using AC 1.82.2 and Unity 6000.0.58f2 - not sure if there was perhaps a more recent way to get a texture to draw on the left and right sides? I'm not sure I follow DS's instructions clearly (and also DS, in the app store link it looks like the screenshots don't show the left and right custom borders?)
Well, think I managed - in case useful to anyone else. I got help from Google Gemini. I used a new Canvas and repeating texture for the left and right sides, could paste instructions here but they're fairly long. Then I added that Canvas to my PersistentEngine prefab so it always appears.
I changed the MainCamera.cs script to add the 'return' line (literally just adding a single line) so that the black borders on the sides aren't drawn on top of everything.
Result: