# 制作技巧-适配相关

## <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;在【全局设置】上传背景图片或背景颜色； ②若图片不是作为背景，可先在本地将该图片进行裁剪镂空处理，预留出视频的位置，再导入自由编辑器，将视频放置于镂空处


---

# 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/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?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.