# \<Tile Games> Template Content Creation

Please Note：This tutorial uses the template **"**&#x54;ile Game&#x73;**"** as a case study to explain **the specific operations and possibilities of template iteration**. It is recommended to use it alongside the DEMO and the [Guidelines for Template Content Creation](https://doc.playturbo.com/playable-tools-content-editor/content-editor-creation-tips-center/guidelines-for-template-content-creation) for better results!\
\&#xNAN;*\*If you need the DEMO, please contact your AM to have it pushed to your Playturbo account.*

####

## 📒<mark style="color:blue;">Comparison Showcase</mark>

Let's first take a look at the before and after comparison of **Content Creation**：

| Before                                                                                                                                                                                                                                                         | After                                                                                                                                                                                                                                                          |
| -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| <img src="https://695199083-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F4PyzU9CRLR4XKbxmIEid%2Fuploads%2FkzR6ZHR4kegLcu7yXapu%2FAnimation1.gif?alt=media&#x26;token=ba885e6f-0b80-4419-b7d6-b6d3539dcd02" alt="" data-size="original"> | <img src="https://695199083-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F4PyzU9CRLR4XKbxmIEid%2Fuploads%2FWE06nFpKFd52zN3M41Ex%2FAnimation2.gif?alt=media&#x26;token=093400cc-9aca-48b4-b1e9-92053b1ebe47" alt="" data-size="original"> |
| [Click to play](https://tinyurl.com/5fduk3h9)                                                                                                                                                                                                                  | [Click to play](https://tinyurl.com/3nbjepyh)                                                                                                                                                                                                                  |

####

## 📒<mark style="color:blue;">Summary of Iteration Content</mark>

The changes after template iteration mainly focus on the following aspects:

1. **Adjust Gameplay Parameters**\
   Adjust the preset "gameplay parameters" in the "Feature Creation" section according to your creative needs.
2. **Replace & Hide Assets**\
   Replace the original assets in the template, such as product information, box-props, and collect props background;\
   Hide unnecessary assets, such as online earning elements and box-prop base plate.
3. **Add New Scenes & Assets**\
   After "copying the project to Content Editor", complete the subsequent operations.\
   Add a new scene 1 and an end scene, then add the required assets and adjust their positions, sizes, and layouts.
4. **Adjust Landscape Layout**\
   Switch to landscape mode to adjust the layout for the two newly added scenes and their assets.
5. **Set Animations**\
   Add guidance animations in scene 1 and the end scene.
6. **Set Events**\
   Adjust the events from the original template;\
   Set redirect events in scene 1 and the end scene.
7. **Adjust Multi-language Translation**\
   Translate the newly added text into other languages and fine-tune the formatting;\
   You can also delete or add additional multilingual versions according to your needs.

Next, we will provide a detailed explanation in the order of operations.

####

## 📒<mark style="color:blue;">Detailed Explanation of Iteration Content</mark>

Use the **"**&#x54;ile Game&#x73;**"** template to create a "Feature Creation" project, and prepare the required assets according to the size recommendations from the image placeholders.

### **1.Adjust Gameplay Parameters**

* Set the "Eliminable number of times" to 3 times.
* Change the level to B level: random squares, shuffle cards in dead games.

<div align="left"><figure><img src="https://695199083-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F4PyzU9CRLR4XKbxmIEid%2Fuploads%2FMegb5C5zkzyueYAhe7K5%2Fimage.png?alt=media&#x26;token=c61c8336-444c-4de3-93ed-d6268f3f7b89" alt=""><figcaption></figcaption></figure></div>

### 2.Replace & Hide Assets

1）Enter **Common Assets**:

* Replace product information, background images, background music, etc.
* Hide unnecessary online earning elements: DISCLAIMER.

<div align="left"><figure><img src="https://695199083-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F4PyzU9CRLR4XKbxmIEid%2Fuploads%2F9Utye2syVXhpgyTNTP44%2Fimage.png?alt=media&#x26;token=a44da833-8a07-49ef-9e9f-6435f5f0dbbb" alt="" width="527"><figcaption></figcaption></figure></div>

2）Enter **scene\_play**:

* Sequentially replace assets in order: Guide hand, Box-Prop 1-8, Collect props background, Progress bar content, Progress bar background, Box Elimination Particle.
* Hide unnecessary assets: Box-prop base plate, Collect prop bar, Progress bar ending text, Progress bar starting\&ending point icon.

<div align="left"><figure><img src="https://695199083-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F4PyzU9CRLR4XKbxmIEid%2Fuploads%2FHg146n5W0pUv911TC5mf%2Fimage.png?alt=media&#x26;token=3c517f20-2678-4e4e-9d73-2fe22a247325" alt="" width="552"><figcaption></figcaption></figure></div>

<div align="left"><figure><img src="https://695199083-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F4PyzU9CRLR4XKbxmIEid%2Fuploads%2FtTypQUdxTSK2DznBMti9%2Fimage.png?alt=media&#x26;token=13df2064-837c-467e-a6d9-81357869e3de" alt="" width="243"><figcaption></figcaption></figure></div>

3）Since the original template "scene\_end" is not being used, and a new end scene is added instead, no replacement or editing of assets within scene\_end will be done.

4）After completing the above operations, click **Copy to Content Editor** to further iterate on the template.

<div align="left"><figure><img src="https://695199083-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F4PyzU9CRLR4XKbxmIEid%2Fuploads%2FgRZ1nVBLysN1i2LQIypG%2Fimage.png?alt=media&#x26;token=8fc96b50-d305-4cc3-b50d-51e6794b32c4" alt=""><figcaption></figcaption></figure></div>

### 3.Add New Scenes & Assets

1）Continue hiding assets: After entering Content Creation, click "Gameplay Template" - "Edit gameplay", and hide the layer group \[storey3] (props on the third layer), keeping only the items on the first and second layers.&#x20;

Save and back to project editing.

<div align="left"><figure><img src="https://695199083-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F4PyzU9CRLR4XKbxmIEid%2Fuploads%2FFCY9JT2P0pQ3Mu19po4y%2Fimage.png?alt=media&#x26;token=77d44067-7084-4740-a8c3-e6cd44c86fe6" alt=""><figcaption></figcaption></figure></div>

2）Add new assets: In scene\_play, add victory sound effects and transition sound effects.

<div align="left"><figure><img src="https://695199083-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F4PyzU9CRLR4XKbxmIEid%2Fuploads%2FIIYW1L4QrRToVB80Svdg%2Fimage.png?alt=media&#x26;token=abac3a09-a4c3-4035-8e0b-ddac32038f39" alt=""><figcaption></figcaption></figure></div>

3）Add Scene 1:

* Click the "+" icon in the scene area to create Scene 1.
* Drag Scene 1 to the top.
* Add the required assets into Scene 1, adjusting their positions, sizes, and grouping.

<div align="left"><figure><img src="https://695199083-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F4PyzU9CRLR4XKbxmIEid%2Fuploads%2FS0sUqvbIQIjOtQXh3TAP%2Fimage.png?alt=media&#x26;token=401283d9-43b3-4421-a847-472e01a9c525" alt=""><figcaption></figcaption></figure></div>

4）Add an end scene:

* Create Scene 3, placing it between scene\_play and scene\_end.
* Check Scene 3 as the "Ending Scene".
* The original template's scene\_end cannot be deleted; otherwise, it may cause template errors—just place it at the end without adjustments.
* Add the required assets for the end scene and adjust their positions, sizes, and grouping.

<div align="left"><figure><img src="https://695199083-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F4PyzU9CRLR4XKbxmIEid%2Fuploads%2FXJuFMZYlbUSOdqa5JSwC%2Fimage.png?alt=media&#x26;token=12b8a7b7-a0b8-4f37-aa6a-494e0dabcdaa" alt=""><figcaption></figcaption></figure></div>

### 4.Adjust Landscape Layout

* Switch to landscape mode and sequentially adjust the layout for the two scenes.
* Select multiple top-level layers and click "**Reuse vertical screen position configuration**" to reuse the portrait layout with one click.
* Then select each layer individually to fine-tune their positions.

👉Related content： [creation-tips-adaptation](https://doc.playturbo.com/playable-tools-content-editor/content-editor-creation-tips-center/common-creation-tips/creation-tips-adaptation "mention")

<div align="left"><figure><img src="https://695199083-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F4PyzU9CRLR4XKbxmIEid%2Fuploads%2Fr5uxAqYUe3Vhq4OlaFPa%2Fimage.png?alt=media&#x26;token=9242f6aa-f57e-47fa-84e4-3ddff76baf83" alt=""><figcaption></figcaption></figure></div>

<div align="left"><figure><img src="https://695199083-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F4PyzU9CRLR4XKbxmIEid%2Fuploads%2FTzxNO2lN4EdrK7pe9Zmw%2Fimage.png?alt=media&#x26;token=63e617ce-2529-4458-b2a5-79cc5b3413ca" alt=""><figcaption></figcaption></figure></div>

### 5.Set Animations

1）Scene 1: Guidance Animation

* The guidance animation in Scene 1 is a commonly used four-choice option, which can be directly reused from the [Presets Library](https://doc.playturbo.com/playable-tools-content-editor/content-editor-user-guide/editing-page-module-intro/top-asset-library/presets-library).
* Select Presets Library - Guidance - Choose, and add the four-choice preset.

<div align="left"><figure><img src="https://695199083-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F4PyzU9CRLR4XKbxmIEid%2Fuploads%2FS1UmAZINt9pzXDTBife5%2Fimage.png?alt=media&#x26;token=00896058-1d09-4609-90a2-7830b466e478" alt=""><figcaption></figcaption></figure></div>

* Copy Animation: Select the finger image \[gf\_hand] in the preset scene and click "Copy."
* Select the finger image in Scene 1, then click "Paste" - "Paste the layer animation only."
* Similarly, reuse the animations for the following layers: \[group\_gf\_hand], \[options\_A], \[options\_B], \[options\_C], \[options\_D].

<figure><img src="https://695199083-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F4PyzU9CRLR4XKbxmIEid%2Fuploads%2FP8hK4wWHW75GTVMT5ZzH%2Fimage.png?alt=media&#x26;token=198c0198-1429-478c-acb4-709cddd26a2d" alt=""><figcaption></figcaption></figure>

<figure><img src="https://695199083-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F4PyzU9CRLR4XKbxmIEid%2Fuploads%2Fy9hGNCqc7QWsKmd9KVR9%2Fimage.png?alt=media&#x26;token=be6c98c8-6268-44e1-b2d6-16296b643688" alt=""><figcaption></figcaption></figure>

* Adjust the displacement distances of the two "Displacement Easing" animations for the finger based on the spacing of the images (after adjustments, switch to landscape mode to see if any further adjustments to the displacement distances are needed).
* After completing the above operations, delete the preset scene.

<div align="left"><figure><img src="https://695199083-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F4PyzU9CRLR4XKbxmIEid%2Fuploads%2FfIS6PnVjDrrwalwc4hQx%2Fimage.png?alt=media&#x26;token=42d86b3f-42e5-49b4-93e0-29b54369cab7" alt="" width="563"><figcaption></figcaption></figure></div>

2）End Scene: Guidance Animation & Transition Animation

* Add "Fadeln" and "Spin Easing" animations to the guiding finger.

<div align="left"><figure><img src="https://695199083-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F4PyzU9CRLR4XKbxmIEid%2Fuploads%2FwUSCjKHWmiLRS4gP74zB%2Fimage.png?alt=media&#x26;token=de1fe4e1-7958-4301-b2e3-1ae09679e071" alt=""><figcaption></figcaption></figure></div>

* Add a "FadeOut" animation to the white image for the transition effect.

<figure><img src="https://695199083-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F4PyzU9CRLR4XKbxmIEid%2Fuploads%2Fh1tIP9F5hVU1e8Xi4dVC%2Fimage.png?alt=media&#x26;token=7bb528c0-9ea0-49ee-bbe8-ca8fafb57e27" alt=""><figcaption></figcaption></figure>

### 6.Set Events

1）Adjust original template events:

* Enter scene\_play, and click "Event".
* Under the last Custom Event, add response events:
  * After a delay of 0.5 seconds, play the victory sound effect once and play the transition sound effect once.
  * Then, after another delay of 0.5 seconds, redirect to the next scene.

<div align="left"><figure><img src="https://695199083-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F4PyzU9CRLR4XKbxmIEid%2Fuploads%2FYFDJpAZB5Eb1NHWuFKMC%2Fimage.png?alt=media&#x26;token=692f6fd8-e5ee-40f3-adc1-5fc94576d4bf" alt=""><figcaption><p>before</p></figcaption></figure></div>

<figure><img src="https://695199083-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F4PyzU9CRLR4XKbxmIEid%2Fuploads%2Fu85XQzmLS1Sht6yUIxkP%2Fimage.png?alt=media&#x26;token=cdfcdb5f-734c-4930-9b5a-d6ad7e7bbcfc" alt=""><figcaption><p>after</p></figcaption></figure>

2）Add new events:

* Enter Scene 1 and **Add Event - Press**.
* Add response events: **redirect to the next scene**, play the click sound effect once.

<figure><img src="https://695199083-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F4PyzU9CRLR4XKbxmIEid%2Fuploads%2FPrAFiMMFE2cp2tCna6Us%2Fimage.png?alt=media&#x26;token=25e21248-4ecb-4dba-83dc-d5f448195667" alt=""><figcaption></figcaption></figure>

* Enter Scene 3 (End Scene), and **Add Event - Press.**
* Add response events: **redirect to app store**, play the click sound effect once.

<figure><img src="https://695199083-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F4PyzU9CRLR4XKbxmIEid%2Fuploads%2Fy05MtbTlbBx05krnDc68%2Fimage.png?alt=media&#x26;token=996c5971-53f8-4f63-9f5e-a7be34ab2930" alt=""><figcaption></figcaption></figure>

### 7.Adjust **Multi-language Translation**

After completing the above operations, the iteration of this case is basically complete.

If there are multilingual requirements, remember to translate the newly added text into other languages and fine-tune the formatting; you can also delete or add additional language versions.

For specific operations, please refer to  [multi-language-configuration-and-translation](https://doc.playturbo.com/playable-tools-content-editor/content-editor-user-guide/editing-page-module-intro/parameter-setting-area/global-settings/multi-language-configuration-and-translation "mention")

<div align="left"><figure><img src="https://695199083-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F4PyzU9CRLR4XKbxmIEid%2Fuploads%2FKTOjIRUXkQwMhbQyQClP%2Fimage.png?alt=media&#x26;token=f1f2e650-5f2f-49b6-88ff-782ec3e526ee" alt=""><figcaption></figcaption></figure></div>

### 8.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.

<div align="left"><figure><img src="https://695199083-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F4PyzU9CRLR4XKbxmIEid%2Fuploads%2FkVeNCBrS3Fr6jSa5RukZ%2Fimage.png?alt=media&#x26;token=6781268a-622d-49b0-b2ad-176e47b90466" alt=""><figcaption></figcaption></figure></div>

####

## 📒<mark style="color:blue;">Assets Provision</mark>

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 try using these assets to follow the tutorial and quickly master deep iterations of the template.

{% file src="<https://695199083-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F4PyzU9CRLR4XKbxmIEid%2Fuploads%2FotdFNs3n9ShZOpvha7UV%2FTile%20Games%20Template%20Content%20Creation_assets.zip?alt=media&token=842dc170-d401-4d24-8c48-13a16d2ed2bf>" %}
