多种屏幕尺寸和设备 | hyperPad Documentation
Logo
Documentation主编辑器多种屏幕尺寸和设备
主编辑器

多种屏幕尺寸和设备

Published 2016年5月31日

使用 hyperPad,您可以为多种设备和屏幕尺寸创建项目。要支持不同设备,项目分为两种类型:设备专用项目和通用项目。

设备专用项目: 为要支持的每个平台分别创建一个项目版本。创建项目时,请为项目指定一台设备。例如,如果您只想制作 iPad 游戏,请在创建项目时选择仅限 iPad (4:3)。

通用项目: 使用一个项目支持多种设备。创建项目时,请选择多个目标设备。这样,同一个项目就能同时在 iPhone 和 iPad 上运行,无需创建两个不同版本。

这两种方式各有优缺点。如果项目需要完全控制屏幕内容,并确保特定内容始终可见,那么设备专用方式可能更合适。不过,这意味着每支持一个新平台,都需要重新创建游戏或项目。

通用项目的好处是只需创建一次游戏或 App。不过,您对屏幕上显示的内容控制较少。例如,在屏幕较宽的设备上,可能会看到原本不太明显的更多内容。hyperPad 提供了一些工具和行为,可用于控制某些元素,但有时您确实需要完全掌控屏幕内容,这时设备专用项目会更合适。

本文主要介绍通用项目,因为这类项目需要适配多种宽高比和设备。对于设备专用项目,只需确保内容适合画布上的绿色区域即可。

创建通用项目

创建新项目时,系统会提示您选择要支持的设备。默认情况下,只会选择 iPad (4:3)。您可以轻点其他设备,以启用对它们的支持。如果选择了多台设备,您的项目就属于“通用项目”。

切换设备

选择支持多台设备后,您需要确保项目内容在每台设备和每种宽高比下都能完整显示在屏幕内。

画布上的绿色矩形区域是可见屏幕区域。放在可见屏幕区域内的内容会在项目运行时显示出来。请注意,创建项目时启用的每台设备都有各自的可见屏幕区域。

若要确保内容在每种设备上都能适应可见屏幕区域,请轻点工具栏中的切换设备图标。

请记住,有些设备(例如 iPhone)拥有多种屏幕尺寸和宽高比。如果您要为这些设备开发项目,并且希望支持较旧版本的 iOS,就必须确保内容在该设备的每个版本上都能正常显示。因此,如果您选择 iPhone,就必须确保内容适合 iPhone 4 的屏幕区域 (3:2),以及 iPhone 5、6、6+ 的屏幕区域 (16:9)。

为多种设备设计项目

通常,在开发游戏或 App 时,您会希望避免为每个项目重复制作所有内容。使用通用项目时,可以通过巧妙的设计减少重复工作。

hyperPad 会将所有屏幕尺寸的左下角对齐,然后针对较大的设备向上、向右缩放。牢记这一点,许多游戏只需制作一次即可。

设计场景时,让主要内容适应最小的设备,并让背景适应最大的设备。创建项目时,最大尺寸会标记为“设计分辨率”。采用这种方式后,许多项目无需额外调整,就能在所有设备上呈现良好效果。

例如,假设您想制作一款同时适用于 iPhone 和 iPad 的平台游戏。您可以将主要关卡内容(地面、障碍物等)设计为适合最小的 iPhone 屏幕(16:9 宽高比),然后让背景适合最大的设备(iPad)。在最小的 iPhone 上,游戏会完全按照您的设计显示。在较大的设备上(iPad 4:3 或桌面设备 16:10),游戏顶部会显示更多垂直方向的内容。由于背景适应了最大的尺寸,因此屏幕上始终会有内容,不会留下空白的黑色区域。

切换不同设备时,您会发现可见屏幕区域的宽度不会改变。hyperPad 使用自定义分辨率,使所有设备的宽度保持一致。只有高度会变化,因此垂直方向上显示的内容会有所增减。

下表列出了不同设备的宽高比和分辨率。

宽高比图标设备设计分辨率
4:3 iPad、iPad Pro 2048 px x 1536 px
16:9 iPhone 5、iPhone 5S、iPhone 6、iPhone 6 plus、iPhone 6S、iPhone 6S Plus、iPod 第五代、iPod 第六代 2048 px x 1158 px
3:2 iPhone 3GS、iPhone 4、iPhone 4S、iPod 第四代 2046 px x 1364 px
16:10 桌面电脑2048 px x 1280 px

关于较旧 iPhone 的说明(3GS、iPhone 4、4S 和 iPod 第四代):这些设备使用 3:2 宽高比。为了让所有设备的宽度保持一致,3:2 设备的可见屏幕区域实际上会比机身更大的 iPhone 5、6+ (16:9) 更高。如果您要为 iPhone 开发,并支持 iOS 9 及更早版本,就必须确保项目也适合 3:2 屏幕区域。

如果您只想支持 iOS 10 及更新版本,就不必担心内容是否适合 3:2 屏幕区域。

导入素材

hyperPad 会自动缩放项目,让它在所有设备上都呈现良好效果。为了确保项目在所有设备上都能保持良好的显示效果,您应始终导入与设计分辨率相匹配的图像。设计分辨率以 Retina 分辨率为准,因此导入图像时,系统会自动为您生成非 Retina 版本。

例如,如果您导入一张 512x512 像素的图像,系统会为您生成一张 256x256 像素的图像。

另请注意,设计分辨率以像素为单位。在实际设备上,所有内容都以点为单位。因此,在 Retina 设备上,2048x1536 像素实际上相当于 1024x768 点。

绝对位置和相对位置

在 hyperPad 中,放置对象有两种方式:绝对位置和相对位置。绝对位置会将对象放置在画布上的特定像素位置,并以米为单位进行测量。相对位置则根据可见屏幕区域的百分比来放置对象。

使用绝对位置时,对象可能会在较小的设备上出现在屏幕之外。这是因为坐标系不会因设备而改变(1 米在 iPhone、iPad 或其他设备上都相同)。

使用相对位置时,无论使用哪种设备,对象都会出现在相同的相对位置。例如,如果将对象放在屏幕中央,那么它在 iPhone、iPad 以及电视或电脑等更大设备上都会位于屏幕中央。

默认情况下,放在普通图层上的对象使用绝对位置,而放在 UI 图层上的对象则使用百分比位置。这样一来,您就不必担心按钮、生命值条或操纵杆会在不同设备上显示到屏幕之外。

在下面的 GIF 中,您可以看到相对位置的效果。“Tap”标志和手部图像使用相对位置,因此在每台设备上都始终位于屏幕中央。

若要更改对象的位置类型,请选择该对象,然后在对象属性中切换到变换选项卡,并轻点位置字段中的“%”图标。这样会将当前位置转换为屏幕百分比。

在工具栏中切换所支持的设备时,您可以看到相对位置的对象始终位于可见屏幕区域内。

若要让对象完全居中,X 和 Y 位置都应设为 50%。

根据屏幕尺寸执行自定义操作

有时,您可能希望项目在不同设备上的外观和体验略有不同。例如,您可能只希望按钮在 iPad 上可用,而不在 iPhone 上显示。

为此,您可以使用“获取屏幕”行为来获取当前屏幕的尺寸,并结合 IF 行为,在 iPhone 上隐藏该按钮。

在上面的示例中,您可以使用“获取屏幕”行为,将宽高比输出到 IF 行为中,并检查屏幕是否为 iPhone (16:9)。

然后使用隐藏图形行为,在屏幕尺寸为 16:9 时隐藏按钮。