Trouble with UI resizing to different size/aspect ratio

General TouchDesigner Discussion
1

I’m having more trouble than I feel like I should, trying to get my UI to adapt to displays with slightly different aspect ratios…here’s the situation:

  • UI is built inside a root container with a resolution of 1080x1920 (HD in portrait)
  • Client also wants it to work on similar portrait-but-not-HD resolutions/aspect ratios like 768x1024, 800x1280, etc.
  • Setting the Container as the Window Op, it will scale and display properly (i.e. akin to “Fit Best” with all content visible and aspect ratio locked), and display black bars in the negative space

Here’s my goal: instead of empty black space, I’d like to be able to extend my background image and header background (whether color or image) instead of having black content.

As a first step, I’ve tried making my UI Container a child of another Container with the size set to the screen size and setting Children > Fit to Fit Best, but this mangles the layout.

Any thoughts on where I’m going wrong?

Project files attached below. Here are some screenshots:

UI displaying correctly/natively in an HD window:

ui_native_aspect
ui_native_aspect409×757 46.8 KB

window_setup_fill_with_black
window_setup_fill_with_black1345×679 71.4 KB

UI “fitting best” (filling height, letterboxing the width) when the window has a 1:1 aspect ratio:

ui_locked_aspect_when_filling_window
ui_locked_aspect_when_filling_window573×603 37.8 KB

UI having issues when an added parent Container with size 768x1024 is set to “Fit Best”

ui_inside_container_with_fit_best
ui_inside_container_with_fit_best376×697 25 KB

window_setup_container_with_fit_best
window_setup_container_with_fit_best1664×681 69.3 KB

Project:

UI_Project.zip (1.5 MB)

2

That Children Fit parameter can make some incorrect assumptions. Better to use layout settings on the children than try to get the parent to auto lay them out correctly.

I recommend building your layout using Layout>Vertical and Horizontal Modes of the children with fills and (if necessary) anchors.

For background images, the Look>Background TOP par works for simple stuff. For more complicated stuff, the Layout>Parent Alignment parameter is your friend. On your background comp, set that to ignore and set the V and H Modes to fill and you should be good to go.