创造你的世界
用户界面
设置用户界面画布
17 分
移动设备有许多不同的屏幕尺寸和分辨率。在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 子对齐 左上