设置用户界面画布

移动设备有许多不同的屏幕尺寸和分辨率。在zepeto世界中，unity的canvas用于表达ui元素，因此unity有相同的限制。 以下指南提供了一个中立的设置，以便在尽可能多的设备上展示您的ui。 因此，尽管无法在所有移动设备上精确表达一个适合的ui，但我们旨在将ui元素放置在大多数设备的相似位置。 垂直屏幕模式下的canvas设置 1\ 竖屏模式下的canvas设置如下。 ui缩放模式：随屏幕大小缩放 参考分辨率： x：750 y：1334 屏幕匹配模式：匹配宽度或高度 匹配宽度 2\ 安全区域设置 创建一个名为 safearea 的对象，作为 canvas 对象的子对象。 在检查器面板中，点击添加组件按钮以添加 zepeto 屏幕安全区域组件。 👍 提示 zepeto 屏幕安全区域组件将被某些终端的缺口区域和主页栏覆盖的 ui 移动到 ios 屏幕的内部。 受 zepeto 屏幕安全区域影响的 ui 对象可以作为子对象包含。 3\ 设置右上角按钮区域 设置右上角的按钮区域，以便在通过布局组添加子对象时自动左对齐和右对齐。 在 safearea 下创建一个新对象，并设置以下组件。 矩形变换 位置x 22, 位置y 22 水平布局组 间距 20 子对齐 左上 内容大小过滤器 水平适应 首选大小 4\ 按钮设置 创建一个按钮对象作为按钮区域的子对象。按钮会自动对齐并应用以下设置。 宽度 62 高度 62 5\ 在设备上检查 现在，如果你构建这个世界并在你的移动设备上检查，你会看到一个位于右上角的按钮，如下图所示。 ❗️ 注意 由于左侧的主页按钮和聊天按钮是在zepeto应用的本地环境中显示的按钮，因此无法通过canvas精确匹配其位置和大小。 6\ 设置左上角的ui 为了在屏幕的左侧区域设置ui元素，只需对第3步中设置的右侧区域进行少量更改。以下是您需要更改的设置。 recttransform posx 22, posy 22 水平布局组 间距 20 子对齐 左上 横屏模式下的画布设置。 1\ 横屏模式的画布设置如下。 ui缩放模式：与屏幕尺寸缩放 参考分辨率：x：750，y：1334 屏幕匹配模式：匹配宽度或高度 匹配宽度 2\ 安全区域设置。 创建一个名为safearea的对象作为canvas对象的子对象。 在检查器面板中，点击添加组件按钮以添加zepeto屏幕安全区域组件。 👍 提示 zepeto屏幕安全区域组件将某些终端的缺口区域和主页条覆盖的ui移动到ios屏幕的内部。 受zepeto屏幕安全区域影响的ui对象可以作为子对象包含。 3\ 设置右上角按钮区域。 设置右上角的按钮区域，以便在通过布局组添加子对象时自动左对齐和右对齐。 在safearea下创建一个新对象并设置以下组件。 矩形变换 posx 22, posy 22 水平布局组 间距：20 子对齐：左上 内容大小过滤器 水平适应：首选大小 4\ 按钮设置 创建一个按钮对象作为按钮区域的子项。按钮会自动对齐并应用以下设置。 宽度 62 高度 62 5\ 设备检查 现在，如果你构建世界并在移动设备上检查，你会看到一个位于右上角的按钮，如下图所示。 ❗️ 注意 由于左侧的主页按钮和聊天按钮是在zepeto应用的本地环境中显示的按钮，因此无法通过canvas精确匹配其位置和大小。 6\ 设置左上角ui 为了在屏幕的左侧区域设置ui元素，只需对第3步中设置的右侧区域进行少量更改。以下是您需要更改的设置。 recttransform posx 22, posy 22 水平布局组 间距 20 子对齐 左上