# Grid Board Layout - Template Content Creation

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

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

[Before](http://tinyurl.com/y89sjza2) VS [After](http://tinyurl.com/mr278nar)

<div align="left"><figure><img src="/files/Xq2lQafSNPD20DCa2GKF" alt=""><figcaption></figcaption></figure></div>

####

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

This case utilizes the template "TAP BLAST" for iteration, primarily demonstrating <mark style="color:red;">how to adjust the Grid Board and Element layout of</mark> <mark style="color:red;"></mark><mark style="color:red;">**the elimination gameplay template**</mark> <mark style="color:red;"></mark><mark style="color:red;">through the Grid Board Layout.</mark>

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&#x20;

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

<mark style="color:red;">The intro to the functions of Grid Board Layout can be viewed through</mark> [Quick Layout-Grid Board Layout](/playable-tools-content-editor/content-editor-user-guide/component-and-quick-layout/quick-layout-grid-board-layout.md)

<figure><img src="/files/HpLhoX37cW1KoVPbXGP9" alt=""><figcaption></figcaption></figure>

####

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

Next, we will provide a detailed illustration of each step.

### **1.**&#x47;rid **Editing**

Click on \[Quick Layout] to enter Grid Board Layout

<figure><img src="/files/ak4L7LcXX8YeLYAAdZwD" alt=""><figcaption></figcaption></figure>

* 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

<figure><img src="/files/ltud9xmRK2nEKW6qAwl1" alt=""><figcaption></figcaption></figure>

Click the \[Select all] button above to enable all squares

<figure><img src="/files/erEe1zfgv5fDKeY63U9c" alt=""><figcaption></figcaption></figure>

Then click the \[Eraser] button to erase the unwanted squares

<figure><img src="/files/LYynOqDtFX8pMz1q44zn" alt=""><figcaption></figcaption></figure>

In this way, we have adjusted the layout of Grid Board.

### **2.Element Editing**

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.&#x20;

<figure><img src="/files/XqtR8AxL9XYmRL9Qr0WA" alt=""><figcaption></figcaption></figure>

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.&#x20;

<figure><img src="/files/XHw24wO4nd4jJVcVYUyk" alt=""><figcaption></figcaption></figure>

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.

<figure><img src="/files/tJUt3kHW86Yv1KuUfKvK" alt=""><figcaption></figcaption></figure>

Once you have completed the layout for all elements, click "Confirm" to save the adjustments mentioned above.

<figure><img src="/files/1ujyEEj2sisaAKCjn7l0" alt=""><figcaption></figcaption></figure>

### **3.**&#x47;rid **Board background image replacement**

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".&#x20;

<figure><img src="/files/oGlWTFcWmMGpZLoIq69c" alt=""><figcaption></figcaption></figure>

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

<figure><img src="/files/JLbiiAk8eq5UGB4OdeeM" alt=""><figcaption></figcaption></figure>

### **4.Asset Addition**

* Add a gift box and an outer glow image, and adjust their positions and sizes.&#x20;
* To facilitate subsequent horizontal layout and animation settings, we group the "gift box" and "gift box\&outer glow" separately.&#x20;
* Then, move the entire group to the bottom layer.

<figure><img src="/files/OqKb8VRaAJShxZMToZf6" alt=""><figcaption></figcaption></figure>

### **5.Animation Setting**

Select the gift box layer \[box], Add Animation - Universal - Displacement Easing. The parameter settings are as follows:

<figure><img src="/files/mJAt7ZMQSl4chTcCiYzy" alt=""><figcaption></figcaption></figure>

Select the group layer \[Box], Add Animation - Exit - ZoomOut2. The parameter settings are as follows:

<figure><img src="/files/M4lUWY4WGQcP47VFWCI3" alt=""><figcaption></figcaption></figure>

### **6.Events Setting**

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.

<figure><img src="/files/jdyqmCFuIfJYrK3Kvtpe" alt=""><figcaption></figcaption></figure>

### **7.Landscape Layout**

After completing the adjustments mentioned above, we switch to landscape mode to make layout adjustments for the newly added assets.&#x20;

Simply select the group layer "group\_box" and click the "Reuse vertical screen position configuration" button to automatically adjust the layout.

<figure><img src="/files/9TO3JtMUyP08L5ZbZYE5" alt=""><figcaption></figcaption></figure>

####

## 📒<mark style="color:blue;">Demo Screen Recording</mark>

Note: This video is a demonstration recording of the tutorial mentioned above. It includes only visual content and does not have audio narration.&#x20;

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.

{% embed url="<https://mmp-cdn.rayjump.com/res_store/2071999/65ba32188d40e.mp4>" %}


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://doc.playturbo.com/playturbo-case-study/playable-content-editor/elimination-and-match-gameplay-cases/grid-board-layout-template-content-creation.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.