Quick Layout-Parking Layout

#Content Editor #Template Content Creation

✨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

📒Parking Layout Intro

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!

📒Parking Layout Sample Cases

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.

📒Parking Layout Instruction

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.

1.Background and Roads

This step involves setting up the background image and road layout for the parking layout.

1.1 Set Background

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.

1.2 Set Grid

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.

1.3 Set Roads

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.

2.Layout Elements

This step involves placing the main elements and obstacles that need to be solved in the parking layout.

2.1 Editing Main Elements

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.

2.2 Editing the main elements in the grid

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.

2.3 Editing Movement Direction (This functionality is not currently available or modifiable in the Car parking puzzle v1 template)

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.

2.4 Set Obstacle Type

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."

3.Set 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.

3.1 Setting Exit Types

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).

3.2 Editing Exits

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.

3.3 Setting Exit Direction

"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.