# \ Template Content Creation ## 📒Comparison Showcase Let's first take a look at the before and after comparison of **Content Creation**： | Before | After | | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | | | | [Click to play](https://tinyurl.com/mw43suhn) | [Click to play](https://tinyurl.com/5brmtez7) | #### ## 📒Summary of Iteration Content The changes made after template iteration mainly focus on the following aspects: **1.Key adjustments:** "Parking Layout" (including "Background and Roads," "Layout Elements," and "Set Exit"). For more information on the "Quick layout" feature, please refer to [quick-layout-parking-layout](https://doc.playturbo.com/playable-tools-content-editor/content-editor-user-guide/component-and-quick-layout/quick-layout-parking-layout "mention") 2.Replacement of product information and other assets. 3.Adjustments for landscape adaptation. 4.Adjustments to instructional animations. 5.Adjustments to Gameplay Parameters. Next, we will provide a detailed explanation in the order of operations.
#### ## 📒Detailed Explanation of Iteration Content ### 1.Creating a Project Choose the template "Car parking puzzle v1" - Content Creation. After entering the project name, click "Confirm" to access the project editing page. \*It is recommended to upload all assets into the "Project Assets" after creating the project for easier access and usage in the future.
### 2.Adjusting the Parking Layout **\*This step is the core part of the iteration for Parking Layout gameplay templates** and consists of three sections: "Background and Roads," "Layout Elements," and "Set Exit." | Step1-Background and Roads | Step2-Layout Elements | Step3-Set Exit | | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | | | | First, click on the icon in the top right corner of the canvas to enter the "Quick layout," which corresponds to the Parking Layout.
#### 2.1 Background and Roads This step involves setting up the background and road structure for Parking Layout. 1）Replace the background: Click on the replace icon next to the "road" background to replace it with your desired road image.
2）Modify the row and column numbers: In this case, we adjust the row number to 7, creating a 7x6 grid.
3）You can freely set the row and column numbers based on your intended level layout. The size of the grids can also be determined by the size of the elements (cars). Note: The background and grid should match each other.

Matching background and grid

mismatched background and grid

4）Enable the grid: Select the "Area" and click on the "Select All" icon to enable all grids.
Once you have completed the settings for the "Background and Roads," click on "Next" to proceed to the "Layout Elements" configuration. #### 2.2 Layout Elements This step involves arranging the main elements and obstacles that need to be decrypted in Parking Layout. 1）Replace target element images: In this case, the "Number of Grids Occupations" for the target vehicle is 2, so you only need to replace the images under the \[target\_car2] group.
2）The same applies to non-target elements. Simply replace the images under the corresponding non-target element category.
3）Placing vehicles: Select the main element image and click on the grid to place it. 4）Use the up/down/left/right arrows to move the position of the element. Click the rotation button to rotate the element to the desired angle.
5）Place all elements into the grid one by one. For elements that are not needed, you can delete them or leave them out of the grid.
6）Reverse settings: Select any element and click on the edit button to enter the "Reverse Settings." In this case, we enable the "Reverse Settings" and choose the "Backward" option. Click on "Apply to All" to apply this reverse setting to all elements.
7）Set Obstacle Type: In this case, we chose not to add obstacles, so we can skip this step or turn off "Set Obstacle Type."
With this, we have completed the configuration for "Layout Elements." Click on "Next" to proceed to the "Exits" setup. #### 2.3 Set Exit This step involves designating certain grids in Parking Layout as "exits." When the main element reaches an exit, it will continue moving in the specified direction. 1）Click to select "Area 1" and set the Exit Direction as "Fixed Direction." 2）Click on the exit position in the grid (the gap on the left side of the background) to place the exit, and then click the rotation button to adjust the exit direction to the left.
3）Select the Corresponding Element: In this case, the target elements are only under the \[target\_car2] group. Therefore, for the "Area 1 Exit," we only need to select the \[target\_car2] group.
Click on "Finish" to save the settings for the Quick layout. ### 3.Replacing assets #### 3.1 Global Settings 1）Click on "Global Settings" to replace the background image and persistent information.
2）Adjust the "Screen adaptation" for the logo and the persistent download button to be "Top Left Corner Adaptation" and "Top Right Corner Adaptation," respectively. For more information, please refer to [screen-adaptation](https://doc.playturbo.com/playable-tools-content-editor/content-editor-user-guide/editing-page-module-intro/parameter-setting-area/screen-adaptation "mention") [creation-tips-adaptation](https://doc.playturbo.com/playable-tools-content-editor/content-editor-creation-tips-center/common-creation-tips/creation-tips-adaptation "mention")
#### 3.2 Normal Scenes 1）Enter Scene 1 and click on "Gameplay Template" - "Edit gameplay" to replace the core assets. For more information, please refer to [gameplay-template](https://doc.playturbo.com/playable-tools-content-editor/content-editor-user-guide/editing-page-module-intro/top-asset-library/gameplay-template "mention")
2）Replace the steps panel image and adjust the "RECORD" text.
3）Back to Project, select the guide text \[text\_guide], adjust the text content on the right side, and move it up to a suitable position.
4）Select the guide element image \[car2] and replace it with our target element.
5）As the current "gf\_hand" and "car2" are still in the initial position of template, adjustments are needed. Simply select the guide group \[initial\_guidance] and adjust its position to overlap with the target element.
6）Enter Scene 2, replace the logo image and score panel on the end page, and fine-tune their positions and sizes.
### 4.Adjusting Landscape Adaptation After completing asset replacement and portrait layout, we need to switch to landscape mode and make adjustments for landscape adaptation. 1）Scene 1: Select the guide text \[text\_guide] and guide group \[initial\_guidance] one by one, and adjust them to suitable positions. 2）Scene 2: Select the logo image and click on "Reuse vertical screen position configuration." Fine-tune the position accordingly.
### 5.Adjusting Instruction Animations Since the initial instruction animation in the template moves to the right, but our case requires moving to the left, we need to adjust the motion direction of the instruction animation. Select the guide group \[initial\_guidance] and change the horizontal displacement distance of the "Displacement Easing" from "110" to "-110." No other adjustments are needed.
### 6.Adjusting Gameplay Parameters In the original template, there is a setting for the "Extra redirection timing" with 5 steps. This means that after the player makes 5 valid operations, an extra redirection to the app store will be triggered. After returning, the player can continue playing. In this case, we choose to disable the "Extra redirection timing" by dragging the value to 0.
### 7.Overall Preview It is advisable to preview your work promptly after completing each step in the creation process to check if the settings are correct. Once everything is completed, it is recommended to perform an overall preview on different devices, languages, and orientations to ensure everything is working correctly.
#### ## 📒Assets Provision At the end of the tutorial, we have **provided all the assets used in this case** for you. Click on the compressed file to download it. You can use these assets to follow the tutorial and try to make it, so that you can start using the "Quick layout" function to make such materials as soon as possible. {% file src="" %}