> For the complete documentation index, see [llms.txt](https://doc.playturbo.cn/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://doc.playturbo.cn/playturbo-an-li-jiao-xue-ji-di/ke-wan-zi-you-bian-ji-qi-an-li/xiao-chu-pi-pei-wan-fa-an-li/qi-pan-bu-ju-mu-ban-zi-you-bian-ji.md).

# 棋盘布局-模板自由编辑

## <mark style="color:blue;">一、对比展示</mark>

我们先来看一下使用**棋盘布局**进行模板自由编辑前后的对比：[迭代前](http://tinyurl.com/dft2378n) VS [迭代后](http://tinyurl.com/yzrj25yt)

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

## <mark style="color:blue;">二、迭代内容概括</mark>

本案例使用模板【方正点消】进行迭代，主要展示<mark style="color:red;">如何通过棋盘布局功能调整</mark><mark style="color:red;">**消除玩法**</mark><mark style="color:red;">模板的棋盘与元素布局</mark>

迭代内容主要包含以下步骤：

**1.编辑网格**

即棋盘样式，包含：调整行列数、选择排布形式、是否开启统一格子背景、替换统一格子背景图片

**2.编辑元素**

包含：选用或关闭某元素、替换某元素图片、按权重排版元素

**3.替换棋盘背景图片**

在【玩法模板】替换整个棋盘的背景图片

**4.新增资产**

新增礼盒图片及外发光图片

**5.新增动画**

为新增的礼盒添加通用动画及退场动画

**6.调整事件**

为新增的礼盒增加退场事件

**7.横屏排版**

调整完竖屏，需切换至横屏对排版进行微调

关于"棋盘布局"的功能介绍可查阅 [快捷排版-棋盘布局](/ke-wan-gong-ju-zi-you-bian-ji-qi/zi-you-bian-ji-qi-shi-yong-zhi-nan/te-shu-gong-neng-zu-jian-ku-kuai-jie-pai-ban/kuai-jie-pai-ban-qi-pan-bu-ju.md)

<figure><img src="/files/6LgzGwM76caPJHpfB8tb" alt=""><figcaption></figcaption></figure>

## <mark style="color:blue;">三、迭代步骤详解</mark>

### **1.编辑网格**

点击【快捷排版】，进入棋盘布局

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

* 将行列数由（10 x 10）调整为（8 x 8）
* 排布形式有【行列对齐】【行列错位】两种，在本案例中，我们不做改动，保持【行列对齐】
* 点击替换【统一格子背景】，从本地选择我们提前准备好的格子背景图，完成替换

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

点击上方的【全选】按钮，我们启用全部格子

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

再通过【橡皮擦】，擦除我们不需要的格子

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

这样，棋盘的布局我们就调整好了。

### 2.编辑元素

点击进入【元素】编辑界面，我们依次替换5种元素。同样是从本地选择我们提前准备好的元素图片，完成替换

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

替换完5种元素的图片，我们选中【消除元素1】，然后点击上方的【选择】按钮，在棋盘**已启用的格子上**进行拖动或点击，即可调整**该元素**的布局。然后再依次选中其他消除元素进行布局调整

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

注：若使用【按权重排版】功能，系统将会按照您填写的权重快速随机生成元素布局，在本案例中，我们不使用该功能

<figure><img src="/files/8RKIcUfrk3bw3r4jLq9S" alt=""><figcaption></figcaption></figure>

完成所有元素的布局后，点击【确认】即可保存以上调整

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

### 3.**替换棋盘背景图片**

棋盘属于核心玩法内容，相关资产若不在左侧图层区，则位于【玩法模板】的【玩法编辑】中。我们点击进入【玩法编辑】

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

选中棋盘背景图层【checkboard】，点击【替换】，上传本地图片到【项目资产】内进行图片替换。完成替换后，我们点击左上角【返回项目编辑】

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

### 4.新增资产

* 新增礼盒与外发光图片，并调整其位置和大小
* 为了方便后续横屏排版与动画设置，我们分别为“礼盒”以及“礼盒+外发光图片”进行编组
* 然后将整个组移动至图层最下方

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

### 5.新增动画

选中礼盒图层【box】，添加动画-通用-位移缓动。参数设置如下：

<figure><img src="/files/60yQvSnSNWyqW6EnfYmN" alt=""><figcaption></figcaption></figure>

选中礼盒组图层【Box】，添加动画-退场动画-放大消失。参数设置如下：

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

### 6.调整事件

点击场景1的【事件】，在【奖励反馈】处添加响应事件【从头播放全部动画】，选择组图层【Box】，即礼盒的退场动画

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

### 7.横屏排版

完成以上内容的调整，我们切换至横屏对新增的资产进行排版调整。直接选中大组【group\_box】，点击【复用竖屏位置尺寸配置】按钮即可一键排版

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

## <mark style="color:blue;">**四、演示录屏**</mark> <a href="#ypqot" id="ypqot"></a>

注：本视频为以上图文教程的**演示录屏**，仅有画面内容，未添加配音；

视频详细记录了模板自由制作的迭代过程，演示速度基本没有调整，以方便您可以跟着视频一步步操作（如果已能对某一步骤熟悉操作，可酌情跳过）

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