# 《左右选择跑酷》模板自由制作

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

我们先来看一下使用**模板自由制作**前后的对比：[迭代前](http://tinyurl.com/yc7c3hh8) VS [迭代后](http://tinyurl.com/4wtn5nap)

<figure><img src="https://1964780147-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FwzFOJWic5gvuaiaPmJmc%2Fuploads%2F6FeuByhd0IlX8rSt90Qf%2Fimage.png?alt=media&#x26;token=242fba1e-cc2e-4f62-a1b2-5d9e8ad6c0be" alt=""><figcaption></figcaption></figure>

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

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

#### 1.资产替换与新增 <a href="#yjysk" id="yjysk"></a>

1）替换资产——序列帧/静帧图片/文本

2）隐藏资产——原模板为网赚类型，迭代后我们隐藏了网赚相关元素

3）新增资产——场景1新增光芒图片；场景2新增一个跳转按钮

#### 2.动画设置 <a href="#hndzz" id="hndzz"></a>

新增动画——为第二个序列帧球和光芒图片增加退场动画；为场景2的跳转按钮增加缩放动画

#### 3.事件设置 <a href="#ylidl" id="ylidl"></a>

新增事件——在场景1原有事件下新增第二个序列帧球消失的响应事件；为场景2的跳转按钮增加跳转事件

#### 4.多语言翻译 <a href="#cs5zi" id="cs5zi"></a>

将修改及新增后的文本翻译为多语言版本，并微调格式

#### 5.横屏适配 <a href="#gqxtf" id="gqxtf"></a>

对新增资产的横屏排版适配进行调整

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

接下来，我们将配图详细介绍每一个步骤

### 1.资产替换与新增 <a href="#aqu3j" id="aqu3j"></a>

#### 1）替换资产

注：【替换资产】这一步骤有两种方式可以选择，具体可查看[#id-1.-zi-chan-ti-huan-ji-qiao](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#id-1.-zi-chan-ti-huan-ji-qiao "mention")

在本案例中，我们选择先使用【换肤编辑器】完成所有资产的替换，再【复制到自由制作】完成后续迭代。首先，选中模板，选择【换肤制作】 - 【普通制作】

<div align="left"><figure><img src="https://1964780147-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FwzFOJWic5gvuaiaPmJmc%2Fuploads%2FFuuPD35ooeqNkT1wvzYE%2Fimage.png?alt=media&#x26;token=ede1fd03-2629-4de0-a65f-489fd9b43959" alt="" width="563"><figcaption></figcaption></figure></div>

<mark style="background-color:red;">1-1）图片资产</mark>

* 鼠标悬浮在【+】号图标处，可查看当前图片资产坑位的尺寸要求，按照规定尺寸上传资产可以更好地适配模板哦！

<div align="left"><figure><img src="https://1964780147-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FwzFOJWic5gvuaiaPmJmc%2Fuploads%2FlF5Ywad47JBJBuYSxzmX%2Fimage.png?alt=media&#x26;token=23beacfc-8863-4748-befe-0f8181b39bb9" alt=""><figcaption></figcaption></figure></div>

* 以背景图为例，点击【替换】
* 选择【我的资产库】-【本地上传】，导入我们提前准备好的背景图片
* 点击图片右下角的【+】号，在弹出的图片裁剪窗口确认无误后，点击【确定】即可成功替换

<figure><img src="https://1964780147-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FwzFOJWic5gvuaiaPmJmc%2Fuploads%2Fc1vZtmALSs18JzWOfrEw%2Fimage.png?alt=media&#x26;token=6e1ffe86-7f40-4078-bf0d-b225f829e840" alt=""><figcaption></figcaption></figure>

* 对于不需要的图片(如福利卡坑位)，可以选择隐藏或替换为透明图片

<div align="left"><figure><img src="https://1964780147-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FwzFOJWic5gvuaiaPmJmc%2Fuploads%2FY1W8mxqoFQH3JsyEpZ6m%2Fimage.png?alt=media&#x26;token=728b364f-545f-4dc3-b7f7-6796664acccf" alt=""><figcaption></figcaption></figure></div>

<mark style="background-color:red;">1-2）文本资产</mark>

* 对于不需要的文本(如免责声明)，可以选择隐藏或直接清除文本内容

<div align="left"><figure><img src="https://1964780147-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FwzFOJWic5gvuaiaPmJmc%2Fuploads%2FVkJtr6jTlPtrRMlACuM7%2Fimage.png?alt=media&#x26;token=4720b4ec-ee2a-45c8-a4c1-a267773113cf" 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%2FdMxaXWkrZ2P3NtzVhU1F%2Fimage.png?alt=media&#x26;token=cb54769f-0d66-4b51-953a-4feb59c0bffb" alt="" width="563"><figcaption></figcaption></figure></div>

本案例需要替换的资产类型主要是图片及文本，按照以上操作方法，依次替换所有资产即可。

完成替换后，我们点击右上方的【···】，选择【复制到自由制作】，点击确认后即可进入自由编辑器进行后续内容的制作

<figure><img src="https://1964780147-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FwzFOJWic5gvuaiaPmJmc%2Fuploads%2Fnw2gIc3fCiOMVPe1T3tU%2Fimage.png?alt=media&#x26;token=63023523-0d0a-4c52-ba65-f3d1537685c4" alt=""><figcaption></figcaption></figure>

需要注意：【左右选择跑酷】模板是基于21点玩法制作的，在【换肤编辑器】中的卡牌坑位有重叠，导致“X8”和“X32”无法同时替换，需要进入自由编辑器对其中一个图片坑位另做替换

* 点击【玩法模板】 - 【玩法编辑】
* 选中【Level\_2】组下的图层【6】，点击【替换】，完成“X32”图片的替换
* 然后【返回项目编辑】即可

<figure><img src="https://1964780147-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FwzFOJWic5gvuaiaPmJmc%2Fuploads%2FambpsJ59op4naaDNZue4%2Fimage.png?alt=media&#x26;token=d19878f5-4ca8-48be-9ce5-21de948e5719" alt=""><figcaption></figcaption></figure>

<figure><img src="https://1964780147-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FwzFOJWic5gvuaiaPmJmc%2Fuploads%2F6cKmwaZkZc3e5WZjkZdK%2Fimage.png?alt=media&#x26;token=6e4b4b99-30ea-4002-bf01-9cd6977c6ab0" alt=""><figcaption></figcaption></figure>

#### **2）新增资产**

**2-1）场景1新增资产：光芒过渡图片**

* 选中原有图层\[player\_card\_light]，删除其"透明度缓动"动画
* 复制该图层到图层\[xlz\_Player\_card\_5]之下，然后隐藏原图层

<figure><img src="https://1964780147-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FwzFOJWic5gvuaiaPmJmc%2Fuploads%2FbUB1L1bjBZGEx805MvTS%2Fimage.png?alt=media&#x26;token=90a17abc-f42b-41ef-b8c1-71bbef1b2d05" alt=""><figcaption></figcaption></figure>

**2-2）场景2新增资产：跳转按钮**

* 点击打开【项目资产】窗口，上传跳转按钮图片
* 添加到场景2中，并调整位置及大小
* 新增文本“DOWNLOAD”，并在右侧调整其内容和样式
* 将新增按钮编组，并拖拽放置于\[pop-ups]组内

<div align="left"><figure><img src="https://1964780147-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FwzFOJWic5gvuaiaPmJmc%2Fuploads%2FbJ3cPpyuVPSSoXVEGbak%2Fimage.png?alt=media&#x26;token=5d1c1d39-7a78-4700-b39c-9400516407e5" alt=""><figcaption></figcaption></figure></div>

### 2.动画设置 <a href="#ssrbm" id="ssrbm"></a>

#### 1）为第二个序列帧球和光芒图片增加退场动画

* 选中场景1中的图层\[xlz\_Player\_card\_5]，添加动画-退场动画-淡出。参数设置如下：

<figure><img src="https://1964780147-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FwzFOJWic5gvuaiaPmJmc%2Fuploads%2FkeO1Uzc5NWWTtEpzrzPS%2Fimage.png?alt=media&#x26;token=828bae2e-05f0-4abc-a454-8784727aa323" alt=""><figcaption></figcaption></figure>

* 选中刚刚复制出来的图层\[player\_card\_light\_end]，添加动画-退场动画-淡入淡出。参数设置如下：

<figure><img src="https://1964780147-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FwzFOJWic5gvuaiaPmJmc%2Fuploads%2FDhui6qCmSC3FikQrvgLC%2Fimage.png?alt=media&#x26;token=6738a30b-b3a0-4bce-8d3f-440862d22e51" alt=""><figcaption></figcaption></figure>

#### 2）为场景2新增的跳转按钮增加动画

* 选中原有按钮组\[btn\_last]，点击上方复制按钮
* 再选中新增按钮组\[btn\_download]，点击上方粘贴按钮，选择【仅粘贴图层动画】，即可快速完成动画的设置

<figure><img src="https://1964780147-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FwzFOJWic5gvuaiaPmJmc%2Fuploads%2FNcJxXoUOku1PEB15qCRF%2Fimage.png?alt=media&#x26;token=216b89e3-7dce-48b6-88f4-4eb23323b6f2" alt=""><figcaption></figcaption></figure>

* 因我们想实现两组按钮交替缩放的动画效果，可通过调整其中一个按钮组的“脉冲向前”动画来实现
* 如将新增按钮组\[btn\_download]的起始比例由“1”调整为“1.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%2FC6Sm0cggcuftozMxuDYR%2Fimage.png?alt=media&#x26;token=705e8f02-2903-4842-9554-187ab1bdcf7c" alt=""><figcaption></figcaption></figure></div>

### 3.事件设置 <a href="#xhudq" id="xhudq"></a>

#### 1）场景1新增响应事件

* 点击场景1的【事件】
* 在【第2次奖励反馈】下添加响应事件-从头播放全部动画，依次选择图层\[xlz\_Player\_card\_5]和\[player\_card\_light\_end]即可

<figure><img src="https://1964780147-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FwzFOJWic5gvuaiaPmJmc%2Fuploads%2Frkvdwen2vlpSUkBki75O%2Fimage.png?alt=media&#x26;token=a7051b71-be81-4bc5-954b-936390f880b7" alt=""><figcaption></figcaption></figure>

#### 2）场景2新增跳转事件

* 同动画，可通过\[复制-粘贴]功能快速完成
* 上一步骤，我们已经复制了按钮组\[btn\_last]，所以直接选中\[btn\_download]，点击粘贴按钮，选择【仅粘贴图层事件】，即可快速完成事件的设置

<figure><img src="https://1964780147-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FwzFOJWic5gvuaiaPmJmc%2Fuploads%2FoiGun9u5ZlyO1yu7lzUr%2Fimage.png?alt=media&#x26;token=8b1df0b8-d1b2-4e55-a97e-ac97dc2a24ca" alt=""><figcaption></figcaption></figure>

### 4.多语言翻译 <a href="#fgprf" id="fgprf"></a>

完成以上内容的调整后，我们可对有修改及新增的文本进行多语言翻译

* 点击【全局设置】，在【默认语言】处点击笔刷图标，调起文本翻译窗口
* 选择目标语言英语，在此只勾选有修改和新增的文本即可，然后点击【翻译】按钮进行智能翻译
* 若对翻译结果不满意，可直接在文本框内进行微调，调整完毕后点击【提交】，多语言翻译即生效
* 选中文本图层，在右侧参数设置区可微调文本样式

<figure><img src="https://1964780147-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FwzFOJWic5gvuaiaPmJmc%2Fuploads%2FlcF1grE2asF7brGzJcyO%2Fimage.png?alt=media&#x26;token=b6001688-db25-4b4b-b5e0-9d8032a4ff33" alt=""><figcaption></figcaption></figure>

* 若想新增语言，点击【添加语言】即可
* 翻译步骤同上

<div align="left"><figure><img src="https://1964780147-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FwzFOJWic5gvuaiaPmJmc%2Fuploads%2FALDLiWVHsClPSEx4FPfC%2Fimage.png?alt=media&#x26;token=ef1a93c5-a4cc-4d02-ba84-cc730294186e" alt=""><figcaption></figcaption></figure></div>

### 5.横屏适配 <a href="#sl2ai" id="sl2ai"></a>

对新增资产的横屏排版适配进行调整

* 选中新增按钮组\[btn\_download]，点击右侧【复用竖屏位置尺寸配置】，一键调整
* 然后分别调整两个按钮组到适当位置即可

<figure><img src="https://1964780147-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FwzFOJWic5gvuaiaPmJmc%2Fuploads%2FPxtwXOPoRrwUaAhUU5iz%2Fimage.png?alt=media&#x26;token=3827acd8-8412-4295-9eb8-18775b846ca5" alt=""><figcaption></figcaption></figure>

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

全部调整完成后，我们对不同机型/不同语言/横竖屏进行整体预览试玩

<figure><img src="https://1964780147-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FwzFOJWic5gvuaiaPmJmc%2Fuploads%2FU6uKPsCjktXOEZxIBI6M%2Fimage.png?alt=media&#x26;token=b7544cef-18f8-4288-9b76-bdf7c5870022" alt=""><figcaption></figcaption></figure>