Comment on page
How to adapt overlays to various screen sizes
This guide shows how to use the Singular adaptive overlays' layout feature. It uses a composition with overlays adapted to three separate aspect ratios:
- 16:9 (landscape mode on phones and typical laptop/desktop screens)
- 4:3 (square aspect ratio on most tablets)
- 9:16 (portrait mode on most phones)
- Navigate to the Dashboard > Templates > Resources and download the Adaptive Overlays for Screen Size template.
The Adaptive Overlays for Screen Size resource
- 1.Open the downloaded composition in Composer.
- 2.Double-click the Lower sub-composition in the composition tree and notice the "16:9 (Landscape Range)," "4:3 (Square Range)," and "9:16 (Portrait Range)" overlays.
These three overlays all present the same information but do so in layouts designed for the specific aspect ratios of various devices.
Opening and inspecting the composition
Since the three overlays have already been already built, all that is left to do is activate the Adaptive feature and assign them a layout (portrait, square, or landscape) so Singular knows which layout to render on various devices.
- 1.Select the 16:9 (Landscape Range) folder.
- 2.In the property panel, select the Adaptive tab.
- 3.In the tab's drop-down menu, choose Layout and click Add.Adding a layout in the Adaptive tab
- 4.Select Landscape to make this specific overlay only visible when a landscape range device views this output.Choosing the layout
If you roll over the selection box, a popup shows the available aspect ratios for each layout. Each layout option covers a range.
Make sure to choose square for the "4:3 (Square Range)" overlays and portrait for the "9:16 (Portrait Range)" overlays.
After you activate the adaptive overlay feature for all three sub-compositions, it's time to check your work in Composer. In this guide, you'll do this for the 9×16 (Portrait Range)" overlay.
To do this, you'll change the output window's Globals - Layout setting.
Navigate to the data interface and control panel and select Globals > Layout > Portrait. The 9×16 (Portrait Range) overlay should be activated in the output window when you animate in the overlays.
This makes only overlays assigned to Portrait Layout visible in the composition tree, which is handy when you're authoring multiple aspect ratios in one composition.
Setting Layout globals
In the top right corner above the output window, change the window size to 1080×1920 (or the portrait resolution of your choice) to view your overlay at the correct aspect ratio.
Changing the output window aspect ratio
Setting up and taking In an overlay in Studio
Your output window is in portrait mode because that was the last mode set in Composer.
The last step is to adjust the output settings so that the overlays adapt to the layout settings defined in Composer.
- 1.Select the three dot button in the top right corner of Studio and select Output URL.
- 2.On the left panel of the pop-up window, select Advanced.
- 3.Choose Responsive in the Render Window Size drop-down menu.Choosing Responsive to render window size
- 4.Select the Adaptation Globals menu option in the left panel.
- 5.In the Layout drop-down menu, choose Automatic.Adding "Layout" adaptive globals
- 6.Copy and paste the App Output URL to a new Chrome browser tab and scale the browser window around the screen. Depending on the aspect ratio, different sized pre-built overlays will be displayed.Testing the Adaptive Globals feature in a browser
To generate multiple locked URL outputs from one instance of Singular Studio
- Add the screen size and layout to the end of an app's output URL.
For example, to lock the output of the app you used in this tutorial to 1920×1080: 16:9, add /
Output?width=1920&height=1080&g_layout=landscapeto the end of its output URL.
See the output here:
Locked 1920×1080 output URL
In a locked output ratio, scaling the output window won't activate the other overlay layouts.