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

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

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

<div align="left"><figure><img src="https://1964780147-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FwzFOJWic5gvuaiaPmJmc%2Fuploads%2FTERqYTSYF2L4gMlL8RVe%2Fimage.png?alt=media&#x26;token=a93ae767-79bb-42ac-9942-7cd98ab20b7b" 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.横屏排版**

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

关于"棋盘布局"的功能介绍可查阅 [kuai-jie-pai-ban-qi-pan-bu-ju](https://doc.playturbo.cn/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 "mention")

<figure><img src="https://1964780147-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FwzFOJWic5gvuaiaPmJmc%2Fuploads%2FWGgI88qDScw74vvydVBd%2Fimage.png?alt=media&#x26;token=0c6387af-c502-41b0-bc78-8cce954099b1" alt=""><figcaption></figcaption></figure>

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

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

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

<figure><img src="https://1964780147-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FwzFOJWic5gvuaiaPmJmc%2Fuploads%2FFugVvlpZ3UjufDCWsGUE%2Fimage.png?alt=media&#x26;token=ae67ce7b-bfd8-4692-8268-63f27b7e139c" alt=""><figcaption></figcaption></figure>

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

<figure><img src="https://1964780147-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FwzFOJWic5gvuaiaPmJmc%2Fuploads%2FXUSXl0a4OXbZ9nIeuvcR%2Fimage.png?alt=media&#x26;token=27785dc4-f99f-4932-870f-6a65870335a0" alt=""><figcaption></figcaption></figure>

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

<figure><img src="https://1964780147-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FwzFOJWic5gvuaiaPmJmc%2Fuploads%2FJS2zEyUzCPqcHNIZEdxG%2Fimage.png?alt=media&#x26;token=20c197ce-62e1-467b-9949-462c0c372f6c" alt=""><figcaption></figcaption></figure>

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

<figure><img src="https://1964780147-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FwzFOJWic5gvuaiaPmJmc%2Fuploads%2FWIg4O06TNvR6qYU1uCSr%2Fimage.png?alt=media&#x26;token=01a44ebd-6903-4f51-a846-1d26a85c03b4" alt=""><figcaption></figcaption></figure>

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

### 2.编辑元素

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

<figure><img src="https://1964780147-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FwzFOJWic5gvuaiaPmJmc%2Fuploads%2FEWVSJA64LBRig95cadgz%2Fimage.png?alt=media&#x26;token=100aa5fb-94f8-4a94-ab49-70c20b543aab" alt=""><figcaption></figcaption></figure>

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

<figure><img src="https://1964780147-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FwzFOJWic5gvuaiaPmJmc%2Fuploads%2FagRn5WDXRx81gqzdIZYT%2Fimage.png?alt=media&#x26;token=ca105bed-e103-4556-8567-c6f7ad377f52" alt=""><figcaption></figcaption></figure>

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

<figure><img src="https://1964780147-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FwzFOJWic5gvuaiaPmJmc%2Fuploads%2FOlHwZQruPeALjoIGwFjg%2Fimage.png?alt=media&#x26;token=cb9cf52a-a7c7-4f70-a8b6-2962b257f465" alt=""><figcaption></figcaption></figure>

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

<figure><img src="https://1964780147-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FwzFOJWic5gvuaiaPmJmc%2Fuploads%2FuxmxP5TBskPsNQoLA3Vn%2Fimage.png?alt=media&#x26;token=f0accf36-99e8-42f6-abac-ffc9a1b66402" alt=""><figcaption></figcaption></figure>

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

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

<figure><img src="https://1964780147-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FwzFOJWic5gvuaiaPmJmc%2Fuploads%2FyuExDe5zl1gyVX5QAahF%2Fimage.png?alt=media&#x26;token=83c5bc42-4399-4711-9963-2a03c3feda09" alt=""><figcaption></figcaption></figure>

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

<figure><img src="https://1964780147-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FwzFOJWic5gvuaiaPmJmc%2Fuploads%2FykuZZuDXRdqt85aZeQPu%2Fimage.png?alt=media&#x26;token=4ab7e2c9-b72a-4459-8198-4dae078f23ee" alt=""><figcaption></figcaption></figure>

### 4.新增资产

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

<figure><img src="https://1964780147-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FwzFOJWic5gvuaiaPmJmc%2Fuploads%2FqElIH1KlaDcYhGpY5uDl%2Fimage.png?alt=media&#x26;token=4f8bb74a-b3a6-4ff9-9ad2-93e8aeb66e3a" alt=""><figcaption></figcaption></figure>

### 5.新增动画

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

<figure><img src="https://1964780147-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FwzFOJWic5gvuaiaPmJmc%2Fuploads%2FBtL5A6FIesI3XLkxcQ9t%2Fimage.png?alt=media&#x26;token=bdf4f905-f3ed-4c22-a870-7ae460822b09" alt=""><figcaption></figcaption></figure>

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

<figure><img src="https://1964780147-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FwzFOJWic5gvuaiaPmJmc%2Fuploads%2FYed7yDCx98BhOPG0WgCW%2Fimage.png?alt=media&#x26;token=dd3bf06a-b799-4f1f-8f2b-f99532428ed0" alt=""><figcaption></figcaption></figure>

### 6.调整事件

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

<figure><img src="https://1964780147-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FwzFOJWic5gvuaiaPmJmc%2Fuploads%2Fi2eOoYPjBn3QyTaoqMDK%2Fimage.png?alt=media&#x26;token=6c006eb2-870b-4f9d-b8ea-9a91aa181846" alt=""><figcaption></figcaption></figure>

### 7.横屏排版

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

<figure><img src="https://1964780147-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FwzFOJWic5gvuaiaPmJmc%2Fuploads%2FmoQVioPIdoewqbYaswE4%2Fimage.png?alt=media&#x26;token=6179992a-2169-43d2-8759-39a83d1a3b55" 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>" %}