> 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/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.md).

# 制作技巧-适配相关

## <mark style="color:blue;">一、适配方向</mark>

在新建空白制作项目时，需要选择适配方向（模板默认为\[横屏&竖屏]）

* 若选择单方向【横屏】或【竖屏】，只需制作当前屏幕方向的排版和适配即可，另一屏幕模式下多余的区域默认填充黑色
* 若选择【横屏&竖屏】，则在制作时需要分别对竖屏和横屏进行排版和适配调整

👉不同适配方向对应的效果可查看: [作品制作-新建指南](/ke-wan-gong-ju-zi-you-bian-ji-qi/zuo-pin-zhi-zuo-xin-jian-zhi-nan.md#step3-xuan-ze-shi-pei-fang-xiang)

<div align="left"><figure><img src="/files/XKb2cDu72sBeZuYST765" alt="" width="351"><figcaption></figcaption></figure></div>

💡 <mark style="color:red;">**Tips：若选择【横屏&竖屏】，排版技巧分享：**</mark>

* 完成竖屏制作后，切换到横屏模式
* 选中**所有最高层级的图层**
* 点击使用【**复用竖屏位置尺寸配置**】功能一键排版
* 若有部分元素超出画布外，可**选中其所在的组**，**调整【位置】和【缩放比例】**&#x5373;可
* 按照以上步骤，依次完成所有场景（包括全局场景）的横屏排版和适配

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

## <mark style="color:blue;">二、适配技巧</mark>

**推荐阅读 - 基础功能介绍:** [屏幕适配方式](/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/ping-mu-shi-pei-fang-shi.md)

💡屏幕排版与适配的底层逻辑说明：<mark style="color:red;">画布的分辨率为 750\*1334，在制作时应保证所有元素最终都能完整呈现在画布内；针对不同设备不同屏幕大小，画布中的内容会自动 等比放大/缩小去适配各设备</mark>。

背景图片需额外注意一下：

### 1.背景图片的设置

无论您是否要在"场景"中添加背景图片，我们都建议您**先在【全局设置】添加背景图片兜底**。因为：

* 在【全局设置】添加的背景图片会自动适配所有机型，无论在多大尺寸屏幕下预览，背景图片都会被拉伸至铺满全屏，不会出现白边
* 如果仅在"场景"下添加图片，当图片尺寸不够大时，在部分机型预览下就会有白边露出
* 在【全局设置】添加的背景图片层级默认位于所有图层最底部，且不可移动，因此不会影响其他图层的排版

所以通常，我们添加背景图片 分两种情况：

🌟A. 背景图片样式简单/与核心玩法相关性小/可以接受适度拉伸变形。此种情况建议：

直接在【全局设置】添加背景图片，无需在"场景"中二次添加

<div><figure><img src="/files/wf0ndZXjT8zUbZdgbW11" alt="" width="188"><figcaption><p>原背景图片</p></figcaption></figure> <figure><img src="/files/fOARZJls0S2gfnUzIWQE" alt="" width="563"><figcaption><p>背景图片加在【全局设置】</p></figcaption></figure> <figure><img src="/files/fpEKJlaAXa4RtkuAyQ5I" alt=""><figcaption><p>整体布局</p></figcaption></figure></div>

🌟B. 背景图片与核心布局有关联/不可以接受拉伸变形。此种情况建议：

先在【全局设置】中添加一张干净/纯色背景图片 或 背景颜色 来兜底，然后再进入"场景"添加该背景图片

<div><figure><img src="/files/EXbZCkKXS9S77YQdr3JD" alt="" width="188"><figcaption><p>原背景图片</p></figcaption></figure> <figure><img src="/files/xSfAr0zCc9eJ0Mw0O9ev" alt="" width="375"><figcaption><p>背景图片加在【场景】</p></figcaption></figure> <figure><img src="/files/F0jL8aU6Yt4tLxf5SVbr" alt="" width="131"><figcaption><p>整体布局</p></figcaption></figure></div>

⚠️需注意：若您未在【全局设置】中添加背景图片/颜色兜底，那么需保证添加在"场景"中的背景图片的尺寸至少应为1800\*1800(拉出画布外)，这样才能保证背景图覆盖所有设备；否则在大尺寸屏幕中，四周会有白边露出，可能会影响玩家的试玩体验。

<figure><img src="/files/7Zi6cDi486RfVzGVLqqu" alt=""><figcaption><p>背景图片相对于画布的位置示意</p></figcaption></figure>

👉相关阅读： [/pages/9HWDkONQxdnOrBwBPouM#id-1.-qie-huan-yu-lan-she-bei-yu-lan](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/pages/9HWDkONQxdnOrBwBPouM#id-1.-qie-huan-yu-lan-she-bei-yu-lan "mention")

### 2.屏幕适配方式建议

各类资产在被添加到画布中时，其屏幕适配方式都默认“水平居中&垂直居中”，即无论在哪种机型下预览素材，该资产都会位于屏幕中心位置

**大部分资产无需调整屏幕适配方式，可自动适配各类机型。**&#x4F1A;有少部分资产，在制作时建议调整屏幕适配方式，以保证在不同机型预览下的最佳视觉效果

<figure><img src="/files/1gzOdLqcn9PF0E69lv2q" alt=""><figcaption></figcaption></figure>

常见需要调整屏幕适配方式的图层有：常驻产品信息、免责声明

#### 1）常驻信息（包含产品信息&下载按钮）

<table><thead><tr><th width="283">建议适配方向</th><th>图示</th><th>屏幕适配方式</th></tr></thead><tbody><tr><td>竖屏：顶部</td><td><img src="/files/tDGHuWZVsH7g7IQsOJcJ" alt="" data-size="original"></td><td><img src="/files/YmDY3NKX3YQxKkNkiOH0" alt="" data-size="original"></td></tr><tr><td>竖屏：底部</td><td><img src="/files/OeTIJHUVfw6ifc9KzWUG" alt="" data-size="original"></td><td><img src="/files/LLvW4T99QLpevzigkWzR" alt="" data-size="original"></td></tr><tr><td>横屏：左上角</td><td><img src="/files/C3ziaDcGi7JhaneLVvaJ" alt="" data-size="original"></td><td><img src="/files/tJiaAN1gSQRleWKBhpRw" alt="" data-size="original"></td></tr></tbody></table>

#### 2）免责声明

免责声明建议居中贴底适配

<table><thead><tr><th width="190">建议适配方向</th><th>图示</th><th>屏幕适配方式</th></tr></thead><tbody><tr><td>横屏/竖屏：底部</td><td><img src="/files/fmEfUR2aXRp7sGwvYtZm" alt="" data-size="original"></td><td><img src="/files/fWOcZjzBon6SW6eKLFeV" alt="" data-size="original"></td></tr></tbody></table>

💡**注：**&#x9ED8;认"\[屏幕适配方式]参数横竖屏拆分"。若图层在横竖屏下的位置不一致，则需分开设置屏幕适配方式；若一致，可取消勾选拆分

### 3.横竖屏排版不同 如何拆分设置

制作素材时，若对横竖屏有不同的排版需求，可结合使用 **【\[显示隐藏参数]横竖屏拆分】**&**【屏幕适配方式】** 功能进行拆分设置。

<mark style="color:red;">⚠️</mark>温馨提示：横竖屏排版拆分设置建议仅用于 **非核心玩法** 相关内容，如产品信息/背景图等。若将核心玩法拆分横竖屏单独设置，不仅制作量会翻倍，在实际试玩时 横竖屏下的试玩进度将不统一，影响试玩体验。

以产品信息为例，展开说明如何拆分设置：

#### 1）竖屏：展示产品信息组，并设置贴底适配

* 对需要分开设置的图层勾选 【\[显示隐藏参数]横竖屏拆分】
* 隐藏掉 仅横屏使用的资产图层
* 选中产品信息组，将其"屏幕适配方式"调整为贴底适配

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

#### 2）横屏：展示其他布局元素，隐藏产品信息组

* 隐藏掉 仅竖屏使用的资产图层，如产品信息组
* 搭建横屏排版所需的资产，并设为"显示"（在此仅用背景图片作为示例，实际可根据自身需求添加所需布局元素）

<figure><img src="/files/5K7pF4Dt9gyuhGVXNNPv" alt=""><figcaption></figcaption></figure>

## <mark style="color:blue;">三、特别说明:视频适配</mark>

因视频的尺寸是固定的，无法像图片一样通过拉伸去适配所有机型。因此在您使用视频制作时，可能会出现"视频在画面中占比过小影响试玩""视觉效果不美观"等问题，所以我们需要通过其他的方法来优化整体的排版与适配，以保证不同机型/横竖屏下的最佳视觉效果。

接下来，将为您详细介绍"竖版"/"方版"/"横版"这些不同尺寸视频的适配技巧，建议搭配[DEMO](https://tinyurl.com/45ddw6rv)食用效果更佳哦！

### <mark style="color:red;">1.竖版视频</mark>

#### 1）效果预览

| 竖屏iPhone                                                            | 竖屏Android                                                           | 竖屏iPad                                                              | 横屏iPhone                                                            | 横屏Android                                                           | 横屏iPad                                                              |
| ------------------------------------------------------------------- | ------------------------------------------------------------------- | ------------------------------------------------------------------- | ------------------------------------------------------------------- | ------------------------------------------------------------------- | ------------------------------------------------------------------- |
| <img src="/files/Qnl5O4woglqFSVG4G3G6" alt="" data-size="original"> | <img src="/files/p2W0eLpHYUeyGBgY7uX0" alt="" data-size="original"> | <img src="/files/1aPsqrFDgUxqoHCiX60S" alt="" data-size="original"> | <img src="/files/hpfh5zJ610FgGXDfn908" alt="" data-size="original"> | <img src="/files/OcKOmXPgK61uqE1GA0AX" alt="" data-size="original"> | <img src="/files/Np5zaF4IgkHRXooqvESv" alt="" data-size="original"> |

#### 2）制作技巧 (参照DEMO场景1)

<mark style="background-color:yellow;">2-1）竖屏</mark>

* 导入竖版视频后，先将视频调整到合适的位置大小
* 建议宽度至少为750，铺满画布；高度调整到合适

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

* 在视频高度小于1800不足以覆盖到所有机型时，我们可在视频的上下两端添加图片进行填充，这样在大尺寸机型下预览时，可以利用这些填充图片来弥补画面的留白
* 建议尽量使用与视频画面一致的图片，来保证衔接处的自然

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

* 添加常驻内容，如产品信息、下载按钮等，并调整位置，进行编组
* 将产品信息组放在画面内留白较多的位置进行填补，如放在画面最下方，然后调整其屏幕适配方式
* 可视情况再添加指引文本

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

<mark style="background-color:yellow;">2-2）横屏</mark>

完成竖屏的调整，我们还需切换至横屏模式进行微调（建议多使用"复制竖屏位置尺寸配置"功能）

* 在横屏状态下，可以看到视频的位置比较靠下，可以不需要下方的填充图片，所以我们选择将其"隐藏"
* 选中该填充图片，勾选右侧的"\[显示隐藏参数]横竖屏拆分"，然后隐藏即可

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

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

* 位于上方的填充图片，我们可以重新调整其位置大小，让图片的宽度和视频的宽度一致，然后将图片拖出画布外，贴紧画布上方
* 可以多多使用[参考线](/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/zuo-pin-yu-lan-qu/can-kao-xian.md)，便于图层快速对齐

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

### <mark style="color:red;">2.方形视频</mark>

#### 1）效果预览

| 竖屏iPhone                                                            | 竖屏Android                                                           | 竖屏iPad                                                              | 横屏iPhone                                                            | 横屏Android                                                           | 横屏iPad                                                              |
| ------------------------------------------------------------------- | ------------------------------------------------------------------- | ------------------------------------------------------------------- | ------------------------------------------------------------------- | ------------------------------------------------------------------- | ------------------------------------------------------------------- |
| <img src="/files/nGzpPAuDz0gER5vaCuXH" alt="" data-size="original"> | <img src="/files/461zLZ2MXiNKpstmRj3V" alt="" data-size="original"> | <img src="/files/zvrE0dCaZBwjdOLcussT" alt="" data-size="original"> | <img src="/files/FKbpXWMhttehW41HjV5a" alt="" data-size="original"> | <img src="/files/71y9k1Ov2LfuMzWhQe4c" alt="" data-size="original"> | <img src="/files/9siMIKRXiaxK59kmWHEN" alt="" data-size="original"> |

#### 2）制作技巧 (参照DEMO场景2)

<mark style="background-color:yellow;">2-1）竖屏</mark>

* 同样，导入方形视频后，先将视频调整到合适的位置大小
* 建议宽度至少为750，铺满画布

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

* 可以看出，此时的画布留白较多，看起来很空，所以需要我们添加一些内容来丰富画面
* 同样地，可以添加产品信息，并将其设置为贴底适配；然后在产品信息之上添加指引文本
* 还可以将视频内的部分元素分离出来，改在自由编辑器内单独制作。如本案例中的金额面板，可以单独添加在画面上方

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

* 设置好"画布内"的内容，我们再导入图片对"画布外"也就是视频的左右两侧进行填充
* 调整图片的位置大小，让图片宽度和视频的宽度一致，然后将图片拖出画布外，贴紧画布的左右

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

<mark style="background-color:yellow;">2-2）横屏</mark>

同样，完成竖屏的调整，我们还需切换至横屏模式进行微调（建议多使用"复制竖屏位置尺寸配置"功能）

* 由于金额面板比较长，不适用于横屏排版，所以我们在横屏下单独添加一张方形的面板图片
* 然后选中方形面板图片，勾选右侧的"\[显示隐藏参数]横竖屏拆分"，将竖屏下的状态设为"隐藏"；同样的方法，将矩形面板图片在横屏状态下设为"隐藏"
* 视排版情况，也可将下载按钮在横屏状态下设为"隐藏"

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

* 然后仅需将左右两侧的填充图片分别移动到画布的上下方，贴紧画布即可
* 可以多多使用[参考线](/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/zuo-pin-yu-lan-qu/can-kao-xian.md)，便于图层快速对齐

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

### <mark style="color:red;">3.横版视频</mark>

#### 1）效果预览

| 竖屏iPhone                                                            | 竖屏Android                                                           | 竖屏iPad                                                              | 横屏iPhone                                                            | 横屏Android                                                           | 横屏iPad                                                              |
| ------------------------------------------------------------------- | ------------------------------------------------------------------- | ------------------------------------------------------------------- | ------------------------------------------------------------------- | ------------------------------------------------------------------- | ------------------------------------------------------------------- |
| <img src="/files/9p7DeRGPV2TVO8zZGbU9" alt="" data-size="original"> | <img src="/files/rz92g4aY9CkUfjCMzX5V" alt="" data-size="original"> | <img src="/files/vdPSG2hWOs9ykUEeV3sI" alt="" data-size="original"> | <img src="/files/3yajDddoHlxs4uHdmpXR" alt="" data-size="original"> | <img src="/files/um8unzVVMmExSWygtHlc" alt="" data-size="original"> | <img src="/files/31u5uryQtOPbTLNsZpbI" alt="" data-size="original"> |

#### 2）制作技巧 (参照DEMO场景3)

横版视频的适配方法和方形视频大体上是相同的

<mark style="background-color:yellow;">2-1）竖屏</mark>

* 导入横版视频后，先将视频调整到合适的位置大小
* 在本案例中，我们需要让核心视觉元素(老虎机)居中，所以视频的位置会比较靠左

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

* 和方形视频的排版与适配相同，我们依次添加产品信息、指引文本、金额面板以及左右两侧的填充图片
* 将各资产调整到合适的位置大小，并合理排序、编组
* 若画布中的部分内容也需要遮挡，可将图片移入画布内

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

<mark style="background-color:yellow;">2-2）横屏</mark>

同样，完成竖屏的调整，我们还需切换至横屏模式进行微调

* 由于视频本身是横版的，在横屏状态下，主要将视频调整到合适的位置大小就可以，尽量铺满画布
* 其他在竖屏状态下添加的内容可以视情况进行隐藏

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

总之，在使用视频制作时，我们应尽量让画面的排版看起来协调、美观。当留白过多时，记得适当添加一些元素来丰富画面；当视频尺寸覆盖不到画布以外的区域时，也记得使用图片进行填充，以保证更佳的视觉效果！

### <mark style="color:orange;">4.视频适配-特殊需求</mark>

**用视频资源制作素材，有些图片的层级想在视频之上，有些在视频之下，怎么处理？**

一般资产的层级默认都在视频之上，且不可调整，仅【全局设置】中的背景图片和背景颜色的层级能够置于视频之下。因此：

* **想要视频层级在下：**&#x5728;普通场景或全局场景中，直接上传其他资产即可
* **想要视频层级在上：**&#x2460;在【全局设置】上传背景图片或背景颜色； ②若图片不是作为背景，可先在本地将该图片进行裁剪镂空处理，预留出视频的位置，再导入自由编辑器，将视频放置于镂空处