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 choose "Horizontal & Vertical screen," you will need to design and layout separately for both portrait and landscape orientations (it is recommended to switch to landscape mode after completing the layout for each scene in portrait mode. You can greatly improve efficiency by using the "Reuse vertical screen position configuration" button).
If you choose a single direction, either "Landscape" or "Portrait," you only need to create assets for the selected screen orientation and there is no need to switch between landscape and portrait. You can view the effects of different orientation adaptations at Work Creation-Create a New Project
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, so it won't affect the layout of other layers.
Therefore, typically, we add background image in two scenarios:
Simple background image style or less relevance to core gameplay: In this case, you can directly add the background image in the "Global Settings" and don't need to add it again within the scene.
Background image with useful content or closely related to core gameplay: In this case, you can first add a blurred/solid color background image as a fallback in the "Global Settings," and then add the specific background image within the scene.
Tips: Usually, we make the background image size larger when adding it within a scene. We extend it beyond the canvas during production to accommodate preview on different devices.
With an image size of 1800x1800, you can generally cover most device sizes.
For a detailed introduction to Screen adaptation, please refer to the Screen adaptation
The default screen adaptation for all layers is "Horizontal Center & Vertical Center," which means the layer will be positioned at the center of the screen regardless of the device used for preview.
However, for certain layers, we may need to adjust their screen adaptation to ensure the desired visual effects across different devices during preview.
Commonly adjusted screen adaptation for specific layers include: persistent Information / disclaimer.
Persistent Information (containing product information and download buttons)
Adaptation Orientation | Illustration | Screen adaptation |
---|---|---|
Portrait: Center&Top | ||
Portrait: Center&Bottom | ||
Landscape: Left&Top |
Disclaimer
The disclaimer is set by default to adapt at the center-bottom position.
Adaptation Orientation | Illustration | Screen adaptation |
---|---|---|
Portrait/Landscape: Center&Bottom |
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]. Split for Portrait and Landscape and Screen Adaptation Method to set them up separately. The following examples illustrate this:
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.
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 DEMO for a better understanding!
Vertical iPhone | Vertical Android | Vertical iPad | Horizontal iPhone | Horizontal Android | Horizontal iPad |
---|---|---|---|---|---|
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.
It is recommended to use reference lines more often to facilitate quick alignment of layers.
Vertical iPhone | Vertical Android | Vertical iPad | Horizontal iPhone | Horizontal Android | Horizontal iPad |
---|---|---|---|---|---|
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.
It is recommended to use reference lines more often to facilitate quick alignment of layers.
Vertical iPhone | Vertical Android | Vertical iPad | Horizontal iPhone | Horizontal Android | Horizontal iPad |
---|---|---|---|---|---|
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.