Quick Layout-Parking Layout
#Content Editor #Template Content Creation
Last updated
#Content Editor #Template Content Creation
Last updated
✨Entrance 1 of Template Content Creation：Gameplay Template>>>Quick layout
✨Entrance 2 of Template Content Creation：Simply click on the "Quick layout" icon next to the canvas.
Related case tutorial can refer to <Car parking puzzle v1> Template Content Creation
The current "Parking Layout" only supports gameplay with a pure top-down perspective.
Note: "Quick layout" is currently only available in the "Content Creation" of the car parking puzzle gameplay template.
By adjusting parameters such as "Background and Roads," "Layout Elements," and "Exit" in the Quick layout, you can create parking layouts of different difficulties and styles, completing your creative content output.
Tips: In the "Playable Templates" interface, click "Quick layout" to quickly filter templates that support Quick layout functionality!
The "Parking Layout" is suitable for gameplay types such as 'Parking Puzzle' and 'Farm Puzzle', where multiple elements are moved to release target elements or plan the best route to clear the path. Currently, it is only used in the car parking puzzle template.
The parameters that can be adjusted in the "Quick layout" feature are divided into three sections: "Background and Roads," "Layout Elements," and "Set Exit." These settings need to be configured sequentially.
This step involves setting up the background image and road layout for the parking layout.
There are three adjustments available for the background: Replace Background, Set Background Appearance, and Delete Background.
1）Replace Background：Click on the replace button to select an image from your personal asset library or the public asset library as the background.
2）Set Background Appearance
Click on the settings button to perform actions like clipping, resetting, adjusting dimensions, and scaling the background.
Note that currently, the feature does not support separate settings for dimensions and scaling in portrait and landscape mode. This means that the background appearance set in one screen orientation will be applied synchronously to the other screen mode.
3）Delete Background: Click on the delete button to remove the background.
Enter the number of rows and columns for the grid, and the width and height of each cell, to generate an m*n grid at the center of the Background, which will serve as the game map.
Set some or all of the grids as "roads."
1）Setting method
Click the "Select" button, choose the "Area" option, and then click or swipe on the grid to mark the desired grids as "roads."
Supports "erasing" selected grids.
Supports one-click "Select All" or "Clear All" grids.
Supports undo and redo actions.
2）Element placement rules (this functionality cannot be modified in the "Car parking puzzle v1" template)
If "Elements can only be placed on roads" is selected, the subsequent "Layout Elements" can only be placed on enabled grids.
If "Elements cannot be placed on roads" is selected, the subsequent "Layout Elements" can only be placed on disabled grids.
After completing the setup for "Background and Roads," click on "Next" to proceed with the "Layout Elements" configuration.
This step involves placing the main elements and obstacles that need to be solved in the parking layout.
The template already includes multiple categories of main elements, with each category displaying the corresponding "Number of Grids Occupations."
*The "Number of Grids Occupations" determines the number of grids occupied by each element. For example, if the occupancy count is 2, the elements in that category will occupy a rectangular space of size 1x2 within the grid.
1）Adding Main Elements：Under each category, you can upload multiple images.
Click the "+" button to select and upload images from your personal asset library or the public asset library.
⚠️⚠️⚠️NOTE：Please add an image with the head of the element facing upward as the main element (If the orientation of element tops is inconsistent, it is recommended to first adjust them externally to have all "Tops Facing Up" before importing them into the project! Then, use the "Rotate" function for each element to adjust their orientations within the layout.).
2）Replacing Main Elements: Click the replace button to select an image from your personal asset library or the public asset library to replace the current main element.
3）Copying Main Elements: Click the copy button to duplicate an identical main element.
4）Deleting Main Elements: Click the delete button to remove the selected main element.
5）Setting Main Element Appearance: Click the settings button to clip, reset, adjust filters, and scale the main element image.
Note that scaling does not support separate settings for portrait and landscape modes.
Arrow Anchor (this functionality cannot be modified in the "Car parking puzzle v1" template): The green dot represents the arrow, and you can adjust its position by moving the green dot.
1）Adding Main Elements to the Grid
Select the main element and click the "Select" button. Then, click on the desired grid to place the element in the grid.
Supports "erasing" added main elements.
Supports one-click "Delete" to remove all added main elements.
Supports undo and redo actions.
2）Adjusting Main Element Parameters
After adding a main element to the grid, select the element. You can then "rotate" it and move it "up, down, left, or right." (Note: When rotating elements, the system assumes the initial top orientation of the elements is facing up.)
Click the edit button to enable the "Reverse Settings" option. Enabling this option allows the main element to move in the opposite direction, while disabling it restricts movement to the default direction.
U-turn: The element turns 180 degrees before continuing forward.
Backward: The element moves in the opposite direction indicated by the arrow without turning.
Clicking "Apply to All" applies the "Reverse Settings" to all main elements.
1）Enabling Movement Direction
You can choose whether to enable "Movement Direction." If enabled, the elements' movement direction supports five selectable directions. If disabled, only straight movement in one direction is supported.
2）Setting Arrows
Click the "+" icon to open the asset library window and select images from your personal asset library or the public asset library to upload.
Upload the arrow images for each required direction sequentially (with the default direction for straight movement being "up").
Click the replace button to select images from your personal asset library or the public asset library to replace the current arrow image.
Click the settings button to clip, reset, and adjust the scale of the arrow image (scaling does not support separate settings for portrait and landscape modes).
Supports applying the current appearance parameters of the arrow to all arrows.
Supports one-click "Show/Hide" for all arrows.
1）Enabling "Set Obstacle Type"
You can choose whether to enable this feature. If enabled, you can set some grids as obstacles that will block the movement of main elements.
2）Setting Obstacles
Add Obstacle Type: When enabled, click the grouping button to create a new obstacle group.
Enter the category name and the number of grids occupied by obstacles in that category.
Click "Add Custom Element Type" to create multiple obstacle groups with the same or different numbers of grids.
Replacing/Copying/Setting Appearance/Deleting Obstacles: The operations are the same as for main elements.
Adding/Editing/Deleting Obstacles on the grids: The operations are the same as for main elements.
After completing the setup for "Layout Elements," click on "Next" to proceed with setting up the "Exit."
This step is to set some grids in the parking layout as "exits" where main elements will continue moving out of the canvas upon reaching the exits.
Currently, there are two types of exits available, and you can choose either one for the setup:
Image: Add the selected image to the grid, and the exit will display the chosen image.
Area: Add the selected area to the grid, and the area itself will serve as the exit (For ease of adjustment, the area is displayed in a semi-transparent state during editing but won't be visible or change the grid style during actual gameplay).
Replacing/Deleting "Image Type Exits": The operations are the same as for main elements.
Adjusting the preview color of "Area Type Exits": Click the color palette button to select a color (solely for preview style during creation).
Adding/Editing/Deleting Exits on the canvas: The operations are the same as for main elements.
"Exit Direction" represents the movement direction after the main element reaches the exit. Two direction options are supported:
Any Direction: The element continues moving in the original direction upon reaching the exit.
Fixed Direction: The element changes direction upon reaching the exit and moves according to the specified exit direction.
1）Each group of exits corresponds to one or more main elements, and this correspondence is set in the "Corresponding Element."
Taking the "Car parking puzzle v1" template as an example, the corresponding element [target_car2] can exit through the red area.
2）Multiple selections are supported for Corresponding Element.
Once adjustments have been made in all three sections, click "Finish," and the "Quick layout" will take effect.
Sample1 -
Sample2 -
Sample3 -
Next, we will use the example of the templateto provide a detailed explanation of how to use the "Quick layout" feature.
