Grid Board Layout - Template Content Creation
#Content Editor #Content Creation #Basic difficulty #Grid Board Layout
Last updated
#Content Editor #Content Creation #Basic difficulty #Grid Board Layout
Last updated
Let's first take a look at the before and after comparison of Template Content Creation：
VS
This case utilizes the template "TAP BLAST" for iteration, primarily demonstrating how to adjust the Grid Board and Element layout of the elimination gameplay template through the Grid Board Layout.
The modifications after Template Content Creation are focused on the following aspects:
1.Grid Editing
Namely,Grid Board layout. It includes：Number of rows and columns / Arrangement / Square BG
2.Element Editing
It includes：select or close a certain element / replace a certain element image / Arrange by weight
3.Grid Board background image replacement
Replace the background image of the entire Grid Board in Gameplay Template.
4.Asset Addition
Add gift box images and external luminous image.
5.Animation Setting
Add universal animation and exit animation to the newly added gift box.
6.Events Setting
Add events to the newly added gift box.
7.Landscape Layout
After adjusting the vertical screen layout, it is necessary to switch to horizontal screen to make minor adjustments to the layout.
The intro to the functions of Grid Board Layout can be viewed through Quick Layout-Grid Board Layout
Next, we will provide a detailed illustration of each step.
Click on [Quick Layout] to enter Grid Board Layout
Adjust Number of rows and columns from (10 x 10) to (8 x 8)
There are two layout options: "Alignment" and "Misalignment." In this case, we will keep "Alignment"
Click on [Replace] at the Square BG and select the pre-prepared square background image from the local directory to complete the replacement
Click the [Select all] button above to enable all squares
Then click the [Eraser] button to erase the unwanted squares
In this way, we have adjusted the layout of Grid Board.
Click to enter the "Element" editing interface, and proceed to replace the 5 types of elements one by one. Similarly, select the pre-prepared element images from the local directory to complete the replacement.
After replacing the images for the 5 types of elements, select "Element 1" and click the "Select" button above. You can then drag or click on the enabled squares on Grid Board to adjust the layout of that element. Repeat this process for the other elimination elements.
Note: If you use the "Arrange by weight" feature, the system will quickly generate element layouts based on the weights you provide. In this case, we will not be using this feature.
Once you have completed the layout for all elements, click "Confirm" to save the adjustments mentioned above.
The Grid Board is a core gameplay element, and related assets that are not in the left-side layer area can be found in the "Gameplay Template" under "Edit gameplay".
Select the Grid Board background layer "checkboard", click "Replace", and upload a local image to replace it with an image in the "Project Assets". After completing the replacement, we click on the top-left corner to "Back to Project".
Add a gift box and an outer glow image, and adjust their positions and sizes.
To facilitate subsequent horizontal layout and animation settings, we group the "gift box" and "gift box&outer glow" separately.
Then, move the entire group to the bottom layer.
Select the gift box layer [box], Add Animation - Universal - Displacement Easing. The parameter settings are as follows:
Select the group layer [Box], Add Animation - Exit - ZoomOut2. The parameter settings are as follows:
Click on [Event] in Scene 1, add a response event [Play all animations from the beginning] in [Reward feedback ], select the group layer [Box], which is the exit animation of the gift box.
After completing the adjustments mentioned above, we switch to landscape mode to make layout adjustments for the newly added assets.
Simply select the group layer "group_box" and click the "Reuse vertical screen position configuration" button to automatically adjust the layout.
Note: This video is a demonstration recording of the tutorial mentioned above. It includes only visual content and does not have audio narration.
The video provides a detailed record of the iterative process of Template Content Creation. The demonstration speed has not been adjusted significantly, allowing you to follow along with the video step by step. If you are already familiar with a particular step, you can skip it as needed.
