制作技巧-适配相关
#自由编辑器
最后更新于
#自由编辑器
最后更新于
在新建空白制作项目时，需要选择适配方向（模板默认为[横屏&竖屏]）
若选择单方向【横屏】或【竖屏】，只需制作当前屏幕方向的排版和适配即可，另一屏幕模式下多余的区域默认填充黑色
若选择【横屏&竖屏】，则在制作时需要分别对竖屏和横屏进行排版和适配调整
👉不同适配方向对应的效果可查看:
💡 Tips：若选择【横屏&竖屏】，排版技巧分享：
完成竖屏制作后，切换到横屏模式
选中所有最高层级的图层
点击使用【复用竖屏位置尺寸配置】功能一键排版
若有部分元素超出画布外，可选中其所在的组，调整【位置】和【缩放比例】即可
按照以上步骤，依次完成所有场景（包括全局场景）的横屏排版和适配
推荐阅读 - 基础功能介绍: 屏幕适配方式
💡屏幕排版与适配的底层逻辑说明：画布的分辨率为 750*1334，在制作时应保证所有元素最终都能完整呈现在画布内；针对不同设备不同屏幕大小，画布中的内容会自动 等比放大/缩小去适配各设备。
背景图片需额外注意一下：
无论您是否要在"场景"中添加背景图片，我们都建议您先在【全局设置】添加背景图片兜底。因为：
在【全局设置】添加的背景图片会自动适配所有机型，无论在多大尺寸屏幕下预览，背景图片都会被拉伸至铺满全屏，不会出现白边
如果仅在"场景"下添加图片，当图片尺寸不够大时，在部分机型预览下就会有白边露出
在【全局设置】添加的背景图片层级默认位于所有图层最底部，且不可移动，因此不会影响其他图层的排版
所以通常，我们添加背景图片 分两种情况：
🌟A. 背景图片样式简单/与核心玩法相关性小/可以接受适度拉伸变形。此种情况建议：
直接在【全局设置】添加背景图片，无需在"场景"中二次添加
🌟B. 背景图片与核心布局有关联/不可以接受拉伸变形。此种情况建议：
先在【全局设置】中添加一张干净/纯色背景图片 或 背景颜色 来兜底，然后再进入"场景"添加该背景图片
⚠️需注意：若您未在【全局设置】中添加背景图片/颜色兜底，那么需保证添加在"场景"中的背景图片的尺寸至少应为1800*1800(拉出画布外)，这样才能保证背景图覆盖所有设备；否则在大尺寸屏幕中，四周会有白边露出，可能会影响玩家的试玩体验。
各类资产在被添加到画布中时，其屏幕适配方式都默认“水平居中&垂直居中”，即无论在哪种机型下预览素材，该资产都会位于屏幕中心位置
大部分资产无需调整屏幕适配方式，可自动适配各类机型。会有少部分资产，在制作时建议调整屏幕适配方式，以保证在不同机型预览下的最佳视觉效果
常见需要调整屏幕适配方式的图层有：常驻产品信息、免责声明
竖屏：顶部
竖屏：底部
横屏：左上角
免责声明建议居中贴底适配
横屏/竖屏：底部
💡注：默认"[屏幕适配方式]参数横竖屏拆分"。若图层在横竖屏下的位置不一致，则需分开设置屏幕适配方式；若一致，可取消勾选拆分
制作素材时，若对横竖屏有不同的排版需求，可结合使用 【[显示隐藏参数]横竖屏拆分】&【屏幕适配方式】 功能进行拆分设置。
⚠️温馨提示：横竖屏排版拆分设置建议仅用于 非核心玩法 相关内容，如产品信息/背景图等。若将核心玩法拆分横竖屏单独设置，不仅制作量会翻倍，在实际试玩时 横竖屏下的试玩进度将不统一，影响试玩体验。
以产品信息为例，展开说明如何拆分设置：
对需要分开设置的图层勾选 【[显示隐藏参数]横竖屏拆分】
隐藏掉 仅横屏使用的资产图层
选中产品信息组，将其"屏幕适配方式"调整为贴底适配
隐藏掉 仅竖屏使用的资产图层，如产品信息组
搭建横屏排版所需的资产，并设为"显示"（在此仅用背景图片作为示例，实际可根据自身需求添加所需布局元素）
因视频的尺寸是固定的，无法像图片一样通过拉伸去适配所有机型。因此在您使用视频制作时，可能会出现"视频在画面中占比过小影响试玩""视觉效果不美观"等问题，所以我们需要通过其他的方法来优化整体的排版与适配，以保证不同机型/横竖屏下的最佳视觉效果。
2-1）竖屏
导入竖版视频后，先将视频调整到合适的位置大小
建议宽度至少为750，铺满画布；高度调整到合适
在视频高度小于1800不足以覆盖到所有机型时，我们可在视频的上下两端添加图片进行填充，这样在大尺寸机型下预览时，可以利用这些填充图片来弥补画面的留白
建议尽量使用与视频画面一致的图片，来保证衔接处的自然
添加常驻内容，如产品信息、下载按钮等，并调整位置，进行编组
将产品信息组放在画面内留白较多的位置进行填补，如放在画面最下方，然后调整其屏幕适配方式
可视情况再添加指引文本
2-2）横屏
完成竖屏的调整，我们还需切换至横屏模式进行微调（建议多使用"复制竖屏位置尺寸配置"功能）
在横屏状态下，可以看到视频的位置比较靠下，可以不需要下方的填充图片，所以我们选择将其"隐藏"
选中该填充图片，勾选右侧的"[显示隐藏参数]横竖屏拆分"，然后隐藏即可
位于上方的填充图片，我们可以重新调整其位置大小，让图片的宽度和视频的宽度一致，然后将图片拖出画布外，贴紧画布上方
2-1）竖屏
同样，导入方形视频后，先将视频调整到合适的位置大小
建议宽度至少为750，铺满画布
可以看出，此时的画布留白较多，看起来很空，所以需要我们添加一些内容来丰富画面
同样地，可以添加产品信息，并将其设置为贴底适配；然后在产品信息之上添加指引文本
还可以将视频内的部分元素分离出来，改在自由编辑器内单独制作。如本案例中的金额面板，可以单独添加在画面上方
设置好"画布内"的内容，我们再导入图片对"画布外"也就是视频的左右两侧进行填充
调整图片的位置大小，让图片宽度和视频的宽度一致，然后将图片拖出画布外，贴紧画布的左右
2-2）横屏
同样，完成竖屏的调整，我们还需切换至横屏模式进行微调（建议多使用"复制竖屏位置尺寸配置"功能）
由于金额面板比较长，不适用于横屏排版，所以我们在横屏下单独添加一张方形的面板图片
然后选中方形面板图片，勾选右侧的"[显示隐藏参数]横竖屏拆分"，将竖屏下的状态设为"隐藏"；同样的方法，将矩形面板图片在横屏状态下设为"隐藏"
视排版情况，也可将下载按钮在横屏状态下设为"隐藏"
然后仅需将左右两侧的填充图片分别移动到画布的上下方，贴紧画布即可
横版视频的适配方法和方形视频大体上是相同的
2-1）竖屏
导入横版视频后，先将视频调整到合适的位置大小
在本案例中，我们需要让核心视觉元素(老虎机)居中，所以视频的位置会比较靠左
和方形视频的排版与适配相同，我们依次添加产品信息、指引文本、金额面板以及左右两侧的填充图片
将各资产调整到合适的位置大小，并合理排序、编组
若画布中的部分内容也需要遮挡，可将图片移入画布内
2-2）横屏
同样，完成竖屏的调整，我们还需切换至横屏模式进行微调
由于视频本身是横版的，在横屏状态下，主要将视频调整到合适的位置大小就可以，尽量铺满画布
其他在竖屏状态下添加的内容可以视情况进行隐藏
总之，在使用视频制作时，我们应尽量让画面的排版看起来协调、美观。当留白过多时，记得适当添加一些元素来丰富画面；当视频尺寸覆盖不到画布以外的区域时，也记得使用图片进行填充，以保证更佳的视觉效果！
用视频资源制作素材，有些图片的层级想在视频之上，有些在视频之下，怎么处理？
一般资产的层级默认都在视频之上，且不可调整，仅【全局设置】中的背景图片和背景颜色的层级能够置于视频之下。因此：
想要视频层级在下：在普通场景或全局场景中，直接上传其他资产即可
想要视频层级在上：①在【全局设置】上传背景图片或背景颜色； ②若图片不是作为背景，可先在本地将该图片进行裁剪镂空处理，预留出视频的位置，再导入自由编辑器，将视频放置于镂空处
👉相关阅读：
接下来，将为您详细介绍"竖版"/"方版"/"横版"这些不同尺寸视频的适配技巧，建议搭配食用效果更佳哦！
可以多多使用，便于图层快速对齐
可以多多使用，便于图层快速对齐
