# 《方块消除》模板自由制作

温馨提示：本篇教程以模板【方块消除】为案例，讲解**模板迭代的具体操作和可能性**，建议搭配DEMO和[模板自由制作需知文档](https://doc.playturbo.cn/ke-wan-gong-ju-zi-you-bian-ji-qi/zi-you-bian-ji-qi-zhi-zuo-ji-qiao-zhong-xin/mu-ban-zi-you-bian-ji-xu-zhi)食用效果更佳哦！

*\*如需DEMO，可联系您的创意顾问 推到您的Playturbo账号中*

## <mark style="color:blue;">**一、对比展示**</mark> <a href="#aluje" id="aluje"></a>

我们先来看一下使用**模板自由制作**前后的对比

| 迭代前                                                                                                                                                                                                                                                             | 迭代后                                                                                                                                                                                                                                                             |
| --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| <img src="https://1964780147-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FwzFOJWic5gvuaiaPmJmc%2Fuploads%2FmcsgwcPbQWl1kXEDJRXs%2FAnimation1.gif?alt=media&#x26;token=225e200e-beb7-4f9d-a3a2-32fcfbc0a769" alt="" data-size="original"> | <img src="https://1964780147-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FwzFOJWic5gvuaiaPmJmc%2Fuploads%2FjnOrm8tt9ChNdMwoQY4T%2FAnimation2.gif?alt=media&#x26;token=8e4c5a82-b7fd-47e6-bc90-2ce08f527067" alt="" data-size="original"> |
| [点击试玩](https://tinyurl.com/5fduk3h9)                                                                                                                                                                                                                            | [点击试玩](https://tinyurl.com/3nbjepyh)                                                                                                                                                                                                                            |

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

模板迭代后的改动，主要在以下几方面：

**1.调整玩法参数**

结合自身创意需求，在【换肤制作】内对模板预设的【玩法参数】进行调整；

**2.替换&隐藏 资产**

替换模板原有资产，如产品信息、消除道具、收取道具背景；

隐藏不需要的资产，如网赚元素、道具底板；

**3.新增 场景&资产**

将项目【复制至自由制作】完成后续操作。

新增场景1和结束场景，并添加所需资产，调整资产的位置大小与布局；

**4.调整横屏排版**

对两个新增的场景及其资产，还需切换至横屏调整排版；

**5.设置动效**

在场景1和结束场景内 新增指引动画；

**6.设置事件**

调整原模板事件；

在场景1和结束场景内 设置跳转事件；

**7.调整多语言**

将新增的文本翻译为其他语言，并微调格式；

也可根据自身需求，删减或新增多语言版本。

接下来，我们按照操作顺序详细介绍。

## <mark style="color:blue;">**三、迭代内容详解**</mark> <a href="#ypqot" id="ypqot"></a>

使用【方块消除】模板，创建【换肤制作】项目；并根据图片坑位建议的尺寸，准备好所需资产

### 1.**调整玩法参数** <a href="#aqu3j" id="aqu3j"></a>

* 将"可消除次数"调整为3次
* 将关卡调整为B关卡：随机方块，死局时洗牌

<div align="left"><figure><img src="https://1964780147-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FwzFOJWic5gvuaiaPmJmc%2Fuploads%2FfmAiRuVgkFIbnQrVFVQy%2Fimage.png?alt=media&#x26;token=8abf1a93-4aab-4f4e-81b1-1eeccde34785" alt=""><figcaption></figcaption></figure></div>

### 2.替换&隐藏资产

1）进入【常驻元素】：

* 替换产品信息、背景图、背景音乐等
* 隐藏不需要的网赚元素：组\_免责声明

<div align="left"><figure><img src="https://1964780147-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FwzFOJWic5gvuaiaPmJmc%2Fuploads%2FXljW4oNnwsPfBK7bS5CN%2Fimage.png?alt=media&#x26;token=ac1826da-1ddd-4eed-862c-87c05ac4f3d5" alt="" width="522"><figcaption></figcaption></figure></div>

2）进入场景【scene\_play】：

* 按照顺序依次替换资产：指引手、方块-道具1-8、收取道具背景、进度条内容、进度条背景、方块消除粒子
* 隐藏不需要的资产：方块-道具底板、收取道具背景、进度条终点文本、进度条起点&终点icon

<div align="left"><figure><img src="https://1964780147-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FwzFOJWic5gvuaiaPmJmc%2Fuploads%2Fza5aNGrkfuhIFV6RAYHo%2Fimage.png?alt=media&#x26;token=c2712db8-bcc1-467a-9095-ecabb66d2530" alt="" width="506"><figcaption></figcaption></figure></div>

<div align="left"><figure><img src="https://1964780147-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FwzFOJWic5gvuaiaPmJmc%2Fuploads%2FNXoVp30FasdxW3yZNhMS%2Fimage.png?alt=media&#x26;token=b5900378-c865-4919-bc3f-4140452f7cee" alt="" width="242"><figcaption></figcaption></figure></div>

3）因选择不使用模板原场景【scene\_end】，改为新增结束场景，所以在此不对【scene\_end】内的资产进行替换和编辑

4）完成以上操作，即可点击【复制至自由制作】，对模板进行进一步的迭代

<div align="left"><figure><img src="https://1964780147-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FwzFOJWic5gvuaiaPmJmc%2Fuploads%2FFRvEGFRNSXArDkZFxZVi%2Fimage.png?alt=media&#x26;token=21b80e61-6b57-4808-b11c-7cb5ef91a2cc" alt=""><figcaption></figcaption></figure></div>

### 3.新增场景&资产

1）继续隐藏资产：进入自由制作后，点击【玩法模板】-【玩法编辑】，隐藏图层组\[storey3]（第三层的道具），仅保留第一层和第二层的道具。保存后返回项目编辑

<div align="left"><figure><img src="https://1964780147-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FwzFOJWic5gvuaiaPmJmc%2Fuploads%2FlDeMVq4yAMo0v0PEh4Hn%2Fimage.png?alt=media&#x26;token=e21f308e-5b39-4f7f-9122-ac024bcdad35" alt=""><figcaption></figcaption></figure></div>

2）新增资产：在场景【scene\_play】内新增胜利音效、转场音效

<div align="left"><figure><img src="https://1964780147-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FwzFOJWic5gvuaiaPmJmc%2Fuploads%2FVtK1oqQuz4giDs0Yg4Ci%2Fimage.png?alt=media&#x26;token=dd9df10b-c673-4136-a28c-0a6487db68ef" alt=""><figcaption></figcaption></figure></div>

3）新增场景1：

* 在场景区点击"+"号新建场景1
* 将场景1拖拽至最上方
* 将所需资产添加进场景1内，并调整位置大小、编组

<div align="left"><figure><img src="https://1964780147-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FwzFOJWic5gvuaiaPmJmc%2Fuploads%2FzHQcV7HkiXcPhFnMk25h%2Fimage.png?alt=media&#x26;token=9f27fb6d-3505-4158-a344-695cbc92f600" alt=""><figcaption></figcaption></figure></div>

4）新增结束场景：

* 继续新建场景3，并将该场景放置于【scene\_play】和【scene\_end】之间
* 将场景3勾选为【结束场景】
* 原模板的【scene\_end】不可删除，否则可能引发模板报错，放置于最后不作调整即可

<div align="left"><figure><img src="https://1964780147-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FwzFOJWic5gvuaiaPmJmc%2Fuploads%2FL9eDnm6IkEFXruku9vwP%2Fimage.png?alt=media&#x26;token=6ce3ee57-a249-4a97-93aa-d503359e2d1a" alt=""><figcaption></figcaption></figure></div>

* 将结束场景所需的资产添加进场景内，并调整位置大小、编组

<div align="left"><figure><img src="https://1964780147-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FwzFOJWic5gvuaiaPmJmc%2Fuploads%2FthTk00zQIMmmZUSIJsrD%2Fimage.png?alt=media&#x26;token=e4953f83-32bf-4e49-b543-2d7571cdd2f1" alt=""><figcaption></figcaption></figure></div>

### 4.调整横屏排版

* 切换至横屏模式，依次调整两个场景的排版
* 选中多个最高层级的图层，点击【复用竖屏位置尺寸配置】，一键复用竖屏排版
* 再分别选中各图层，微调位置即可

👉相关阅读：[zhi-zuo-ji-qiao-shi-pei-xiang-guan](https://doc.playturbo.cn/ke-wan-gong-ju-zi-you-bian-ji-qi/zi-you-bian-ji-qi-zhi-zuo-ji-qiao-zhong-xin/tong-yong-zhi-zuo-ji-qiao/zhi-zuo-ji-qiao-shi-pei-xiang-guan "mention")

<figure><img src="https://1964780147-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FwzFOJWic5gvuaiaPmJmc%2Fuploads%2Fio8hlfwnTGYZRq4Ek7A6%2Fimage.png?alt=media&#x26;token=03a7b5ca-649f-4f35-aa96-01c4020bc7fe" alt=""><figcaption></figcaption></figure>

<figure><img src="https://1964780147-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FwzFOJWic5gvuaiaPmJmc%2Fuploads%2F7RyohDrxJC6gee6AwsEZ%2Fimage.png?alt=media&#x26;token=459671f4-a42c-4b3d-aef9-51e385fc818c" alt=""><figcaption></figcaption></figure>

### 5.**设置动效**

1）场景1：指引动画

* 因场景1的指引动画是常用的四选一，可从[预设库](https://doc.playturbo.cn/ke-wan-gong-ju-zi-you-bian-ji-qi/zi-you-bian-ji-qi-shi-yong-zhi-nan/bian-ji-ye-mian-fen-qu-jie-shao/ding-bu-zi-chan-ku/yu-she-ku)中直接复用
* 选择【预设库】 - 【操作指引】 - 【选择】，添加四选一预设

<div align="left"><figure><img src="https://1964780147-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FwzFOJWic5gvuaiaPmJmc%2Fuploads%2FjaBANyxBFl9YyMPglvXP%2Fimage.png?alt=media&#x26;token=73ff80b5-09ae-4698-b79b-bc65059286d9" alt=""><figcaption></figcaption></figure></div>

* 复制动画：选中预设场景中的手指图片\[gf\_hand]，点击"复制"；
* 选中场景1中的手指图片，点击"粘贴"-"仅粘贴图层动画"
* 同理，再依次对以下图层的动画进行复用：\[group\_gf\_hand]、\[options\_A]、\[options\_B]、\[options\_C]、\[options\_D]

<figure><img src="https://1964780147-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FwzFOJWic5gvuaiaPmJmc%2Fuploads%2FutVLzkFz0ZRaRzkYG1bg%2Fimage.png?alt=media&#x26;token=fa6449f8-521a-4f66-9866-c328ee17d2e0" alt=""><figcaption></figcaption></figure>

<figure><img src="https://1964780147-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FwzFOJWic5gvuaiaPmJmc%2Fuploads%2Ft6BA73884WaWeUR1bQ8f%2Fimage.png?alt=media&#x26;token=ffe761d4-1a6e-4791-baa2-3272b401c325" alt=""><figcaption></figcaption></figure>

* 根据图片的间距，对手指的两个"位移缓动"动画的位移距离进行微调（调整后，需切换至横屏查看位移距离是否也要调整）
* 完成以上操作后，删除预设场景

2）结束场景：指引动画&转场动画

* 为指引手指添加"淡入"&"旋转缓动"动画

<div align="left"><figure><img src="https://1964780147-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FwzFOJWic5gvuaiaPmJmc%2Fuploads%2FnIdtQNXB0K5ho3RTt416%2Fimage.png?alt=media&#x26;token=22f4c64e-4aaa-4da1-867c-23811c0967c4" alt=""><figcaption></figcaption></figure></div>

* 为白色图片添加"淡出"动画，用做转场

<div align="left"><figure><img src="https://1964780147-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FwzFOJWic5gvuaiaPmJmc%2Fuploads%2FWuHy0Od7xP9MoNxyIIT6%2Fimage.png?alt=media&#x26;token=682968e2-131f-42b6-9ce7-e5dbcf91099f" alt=""><figcaption></figcaption></figure></div>

### 6.设置事件 <a href="#ozdcc" id="ozdcc"></a>

1）调整原模板事件：

* 进入场景【scene\_play】，点击【事件】
* 在【进入下一场景】事件下，添加响应事件：
  * 执行延迟0.5s后，播放1次胜利音效，播放1次转场音效
  * 再执行延迟0.5s后，跳转到下一场景

<div align="left"><figure><img src="https://1964780147-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FwzFOJWic5gvuaiaPmJmc%2Fuploads%2FK8I9TaiDmcw2J08fnREg%2Fimage.png?alt=media&#x26;token=6c536bbc-6254-4b2a-862b-c6270944544a" alt=""><figcaption><p>调整前</p></figcaption></figure></div>

<div align="left"><figure><img src="https://1964780147-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FwzFOJWic5gvuaiaPmJmc%2Fuploads%2FUeekvLNvIUXZyPs1gDX7%2Fimage.png?alt=media&#x26;token=0e3863e1-c7d1-485d-b839-6f00dc5ef3e3" alt=""><figcaption><p>调整后</p></figcaption></figure></div>

2）新增事件：

* 进入场景1，添加事件 - 按下
* 添加响应事件：跳转到下一场景、播放1次点击音效

<div align="left"><figure><img src="https://1964780147-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FwzFOJWic5gvuaiaPmJmc%2Fuploads%2FasWiNbQMSVc97VXLVYjB%2Fimage.png?alt=media&#x26;token=e856304d-6caf-4c3b-b4f6-241b1faa93d4" alt=""><figcaption></figcaption></figure></div>

* 进入场景3(结束场景)，添加事件 - 按下
* 添加响应事件：跳转应用商店、播放1次点击音效

<div align="left"><figure><img src="https://1964780147-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FwzFOJWic5gvuaiaPmJmc%2Fuploads%2FnP8MXP5NutT4F51CI5ka%2Fimage.png?alt=media&#x26;token=e1289df5-b8a6-4214-8124-40928175ed1f" alt=""><figcaption></figcaption></figure></div>

### 7.调整多语言 <a href="#ozdcc" id="ozdcc"></a>

完成以上操作，本案例的迭代就基本完成了。

若有多语言需求，记得将新增的文本翻译为其他语言，并微调格式；也可删减/新增语言版本；

具体操作见 [duo-yu-yan-pei-zhi-yu-zhi-neng-fan-yi](https://doc.playturbo.cn/ke-wan-gong-ju-zi-you-bian-ji-qi/zi-you-bian-ji-qi-shi-yong-zhi-nan/bian-ji-ye-mian-fen-qu-jie-shao/can-shu-she-zhi-qu/quan-ju-she-zhi/duo-yu-yan-pei-zhi-yu-zhi-neng-fan-yi "mention")

<div align="left"><figure><img src="https://1964780147-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FwzFOJWic5gvuaiaPmJmc%2Fuploads%2FJJz2H8SQ9UbmSGjbvW5y%2Fimage.png?alt=media&#x26;token=be6d35d5-bc70-42ed-8047-70b64f4f5c54" alt=""><figcaption></figcaption></figure></div>

### 8.**整体预览** <a href="#ozdcc" id="ozdcc"></a>

建议在制作过程中，每完成一部分操作，就及时预览，检查设置是否正确

全部制作完成后，可对不同机型/不同语言/横竖屏进行整体预览，确认无误

<div align="left"><figure><img src="https://1964780147-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FwzFOJWic5gvuaiaPmJmc%2Fuploads%2FzGMZD9Y8DfxP0J9CLU1j%2Fimage.png?alt=media&#x26;token=c8697932-1a8b-4b8f-9ef9-23182d54aaca" alt=""><figcaption></figcaption></figure></div>

## <mark style="color:blue;">四、资源提供</mark>

在教程最后，我们为您**提供了本案例所使用到的全部资源，点击压缩包即可下载**。您可尝试用此资源跟着教程制作，以便尽快掌握对模板的深度迭代

{% file src="<https://1964780147-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FwzFOJWic5gvuaiaPmJmc%2Fuploads%2F1JuogXPvNGFsE9qG9dDZ%2F%E6%96%B9%E5%9D%97%E6%B6%88%E9%99%A4_%E6%A8%A1%E6%9D%BF%E8%87%AA%E7%94%B1%E5%88%B6%E4%BD%9C_%E8%B5%84%E6%BA%90.zip?alt=media&token=fac0abb6-a69a-4cf4-a0b7-f4ffe7968d09>" %}
