Creation Tips - Adaptation
#Content Editor
Last updated
#Content Editor
Last updated
When creating a Blank Canvas project, you need to choose the orientation adaptation (the template defaults to [Horizontal & Vertical screen]).
If you select a single orientation "Landscape" or "Portrait," you only need to design the layout and adaptation for the selected orientation. The extra area in the other orientation will be automatically filled with black.
If you select "Horizontal & Vertical screen," you will need to separately design the layout and adaptations for both orientations during the creation process.
πYou can check the effects of different adaptation orientations here:
π‘ Layout tips for "Horizontal & Vertical screen" mode:
Complete the layout in Portrait mode. Switch to Landscape mode.
Select all top-level layers.
Use the "Reuse vertical screen position configuration" function to automatically adjust the layout
If some elements extend beyond the canvas, select their groups and adjust their Position and Scale as needed.
Follow these steps to complete the layout and adaptation for all scenes (including Global scene) in both orientations.
Recommended Reading - Intro to Basic Features: Screen adaptation
π‘ Logical description of screen layout and adaptation:
The canvas resolution is set to 750Γ1334. During creation, ensure all elements can be fully displayed within the canvas. For different devices and screen sizes, the content on the canvas will automatically scale proportionally to fit each device.
Special notes for background images:
Regardless of whether you want to add a background image in "scenes", we recommend adding a background image as a fallback in the "Global Settings." Here's why:
The background image added in the "Global Settings" will automatically adapt to all device sizes. It will stretch to fill the entire screen without any white borders, regardless of the preview on different-sized screens.
If you only add an image within a "scene" and its dimensions are not large enough, white borders may appear when previewing on certain devices.
The background image added in the "Global Settings" is set to the bottommost layer by default and cannot be moved, so it won't affect the layout of other layers.
So usually, we add background images in two situations:
πA. Simple Background Style / Minimal Relevance to Core Gameplay / Acceptable Stretching. In this case, we recommend:
Add the background image directly in [Global Settings] without needing to re-add it in the "Scene."
πB. Background Related to Core Layout / Stretching Not Acceptable. In this case, we recommend:
First, add a clean/solid color background image or background color in [Global Settings] as a fallback. Then, enter the "Scene" and add the actual background image.
β οΈAdditional Notes:
If you choose not to add a fallback background image/color in [Global Settings], ensure the background image added in the "Scene" has dimensions of at least 1800Γ1800 (extending beyond the canvas). This ensures the background covers all device sizes. Otherwise, on larger screens, white edges may appear around the image, potentially affecting the userβs gameplay experience.
For a detailed introduction to Screen adaptation, please refer to the Screen adaptation
When various assets are added to a project, their Screen adaptation mode is set to "Horizontally Centered & Vertically Centered" by default. This means that regardless of the device model used for previewing, the asset will always be positioned at the center of the screen.
π‘ Most assets do not require adjustments to their Screen adaptation and can automatically adapt to different devices. However, for a small number of assets, it is recommended to adjust their Screen adaptation during production to ensure optimal visual effects across various devices.
Commonly adjusted Screen adaptation for specific layers include: persistent Information / disclaimer.
Persistent Information (containing product information and download buttons)
Portrait: Center&Top
Portrait: Center&Bottom
Landscape: Left&Top
Disclaimer
The disclaimer is set by default to adapt at the center-bottom position.
Portrait/Landscape: Center&Bottom
π‘ Please Note: The parameters of "Screen adaptation" are set separately for landscape and portrait orientations by default. If the layer's position differs between landscape and portrait, you need to separately set the screen adaptation mode. If the positions are the same, you can uncheck the split option.
When producing materials, if there are different layout requirements for portrait and landscape screens, you can use the functions of[[Show&Hide] Separate Setting] & [Screen adaptation].
β οΈFriendly Reminder: The recommendation for splitting horizontal and vertical screen layouts should only be applied to non-core gameplay elements, such as product information or background images. If core gameplay elements are split and set separately, not only will the production workload double, but the gameplay progress across both orientations will also become inconsistent, affecting the overall user experience during the trail.
To better illustrate, let's take product information as an example to show how to split and set it properly.
Check [Show&Hide] Separate Setting] Split for Portrait and Landscape for layers that need to be set separately.
Hide asset layers used only in landscape mode.
Select the product information group and adjust its "Screen adaptation" to bottom-adaptive.
Hide asset layers used only in portrait mode, such as the product information group.
Build the necessary assets for the landscape layout and set them to "Show" (here, a background image is used as an example; you can add the required layout elements according to your needs).
Video sizes are fixed and cannot be stretched like images to fit all device models. Therefore, when using videos in your production, you may encounter issues such as "videos appearing too small and affecting gameplay" or "unsightly visual effects". To optimize overall layout and adaptation for different devices and screen orientations, we need to employ other methods to ensure the best visual experience.
2-1) Vertical
After importing the vertical video, adjust its position and size accordingly.
We recommend a width of at least 750 pixels to fill the canvas, and adjust the height accordingly.
If the video's height is not sufficient to cover all device models (less than 1800 pixels), you can add images at the top and bottom of the video to fill the space. This way, when previewing on larger devices, these filler images can compensate for the blank areas.
It is advisable to use images that match the visuals of the video to ensure a seamless transition.
Add persistent content such as product information, download buttons, etc., and adjust their positions and group them.
Place the product information group in areas with more blank space within the frame, such as at the bottom, and adjust its screen adaptation accordingly.
Consider adding guiding text if necessary.
2-2) Horizontal
After completing the adjustments for the vertical layout, we need to switch to horizontal mode for fine-tuning (it is recommended to use the "Reuse vertical screen position configuration" function more often).
In the horizontal orientation, you may notice that the video is positioned lower, and there may be no need for bottom filler images. In this case, we can choose to "Hide" them.
Select the filler image, check the "[Show&Hide] Separate Setting" on the right side, and then hide it.
For the top filler image, we can readjust its position and size to match the width of the video. Then, drag the image outside of the canvas and align it closely to the top of the canvas.
2-1) Vertical
Similarly, after importing the square video, adjust its position and size accordingly.
We recommend a width of at least 750 pixels to fill the canvas.
You may notice that there is a lot of blank space in the canvas, making it look empty. To enrich the composition, we need to add some content.
Similarly, you can add product information and set it to adapt to the bottom. Then, add guiding text above the product information.
You can also separate certain elements from the video and create them separately in Content editor. For example, in this case, the amount panel can be added separately above the frame.
After setting up the "in-canvas" content, we can import images to fill the "out-of-canvas" area on the left and right sides of the video.
Adjust the position and size of the images to match the width of the video. Then, drag the images outside of the canvas and align them closely with the left and right edges.
2-2) Horizontal
Similarly, after completing the adjustments for the vertical layout, we need to switch to horizontal mode for fine-tuning (it is recommended to use the "Reuse vertical screen position configuration" function more often).
Since the amount panel is too long and not suitable for horizontal layout, we can add a separate square panel image for the horizontal orientation.
Then, select the square panel image, check the "[Show&Hide] Separate Setting" on the right side, and set its status to "Hidden" for the vertical orientation. Similarly, hide the rectangular panel image for the horizontal orientation.
Depending on the layout, you can also hide the download button for the horizontal orientation.
Finally, simply move the filler images from the left and right sides to the top and bottom of the canvas, aligning them closely with the canvas edges.
The adaptation methods for landscape videos are generally similar to square videos.
2-1) Vertical
After importing the landscape video, adjust its position and size accordingly.
In this case, we need to center the core visual element (slot machine), so the video will be positioned more towards the left.
The layout and adaptation process for landscape videos are similar to square videos. We add product information, guiding text, amount panel, and filler images on the left and right sides in sequence.
Adjust each asset to the appropriate position and size, and sort and group them logically.
If there is a need to cover certain content within the canvas, you can move the image into the canvas.
2-2) Horizontal
Similarly, after completing the adjustments for the vertical layout, we need to switch to horizontal mode for fine-tuning.
Since the video itself is in landscape format, in the horizontal orientation, we mainiy need to adjust the video's position and size, trying to fill the canvas as much as possible.
Other content added in the vertical orientation can be hidden as needed.
β¨Overall, when working with video production materials, it is important to strive for a harmonious and aesthetically pleasing layout. If there is too much blank space, remember to add elements to enrich the composition. Similarly, if the video size doesn't cover the area outside the canvas, use images to fill the gaps for better visual effects!
When using video assets to create materials, you may want some images layered above the video and others below it. Here's how to handle this:
By default, general assets are layered above videos and cannot be adjusted; only background images and colors in [Global Settings] can be layered below the video.
If you want the video to be layered below: In a normal scene or global scene, simply upload other assets directly.
If you want the video to be layered above: β Upload a background image or color in [Global Settings] οΌβ‘If the image is not intended as a background, crop and mask the image locally to create a hollow space for the video. Then import it into the Content Editor and place the video in the hollowed-out area.
πRelated Reading:
Next, we will provide you with detailed tips for adapting videos of different sizes, including "vertical," "square," and "horizontal" formats. It is recommended to try the for a better understanding!
It is recommended to use more often to facilitate quick alignment of layers.
It is recommended to use more often to facilitate quick alignment of layers.
