Forum rules - please read before posting.

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

Comments

  • edited September 2022

    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:

    • Created a layer called "EdgeCanvas"
    • Created a second camera (without an AC Camera 2D script)
    • Set the second camera to the "EdgeCanvas" layer.
    • Created a Unity UI canvas and some Unity UI images as child objects. All set to "EdgeCanvas".
    • The Unity UI canvas' render camera is that second camera.
    • I have also unchecked "Render Border Camera".

    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. :)

Sign In or Register to comment.

Howdy, Stranger!

It looks like you're new here. If you want to get involved, click one of these buttons!

Welcome to the official forum for Adventure Creator.