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

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

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

<figure><img src="/files/Ziil5aFvsV4tXLMdli3O" 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）替换资产

注：【替换资产】这一步骤有两种方式可以选择，具体可查看[/pages/uHxCxmIowjNVmk0rKxsz#id-1.-zi-chan-ti-huan-ji-qiao](https://doc.playturbo.cn/playturbo-an-li-jiao-xue-ji-di/ke-wan-zi-you-bian-ji-qi-an-li/pao-ku-wan-fa-an-li/pages/uHxCxmIowjNVmk0rKxsz#id-1.-zi-chan-ti-huan-ji-qiao "mention")

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

<div align="left"><figure><img src="/files/Tu7aETYxqBmKyEPHDoNb" alt="" width="563"><figcaption></figcaption></figure></div>

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

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

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

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

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

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

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

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

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

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

* 对于需要调整的文本，可直接在文本框修改文本内容
* 点击文本旁的笔刷图标，可微调该文本的样式

<div align="left"><figure><img src="/files/XIKxaKJTohyrXip59DyW" alt="" width="563"><figcaption></figcaption></figure></div>

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

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

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

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

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

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

<figure><img src="/files/7BIoz0aPzi4IzG48C05F" alt=""><figcaption></figcaption></figure>

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

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

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

<figure><img src="/files/7d339V8lVamkRvLiZGcg" alt=""><figcaption></figcaption></figure>

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

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

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

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

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

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

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

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

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

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

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

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

* 因我们想实现两组按钮交替缩放的动画效果，可通过调整其中一个按钮组的“脉冲向前”动画来实现
* 如将新增按钮组\[btn\_download]的起始比例由“1”调整为“1.1”，结束比例由“1.1”调整为“1”即可

<div align="left"><figure><img src="/files/qrk5XJ1NjRz10XVIqTLx" 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="/files/mf8queKLlTFCeCrpQadE" alt=""><figcaption></figcaption></figure>

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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


---

# 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.cn/playturbo-an-li-jiao-xue-ji-di/ke-wan-zi-you-bian-ji-qi-an-li/pao-ku-wan-fa-an-li/zuo-you-xuan-ze-pao-ku-mu-ban-zi-you-zhi-zuo.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.