支持多种设备形态和屏幕尺寸

Android 设备有多种屏幕尺寸和形状规格。常见类别包括

  • 手机
  • 平板电脑
  • 电视和电视机顶盒
  • 带有 Android 运行时 for Chrome 的笔记本电脑

这种多样性意味着您的游戏将遇到各种不同的屏幕分辨率，通常具有不同的纵横比。例如

  • 横向模式的手机，纵横比为 19:9 (2280x1080)
  • 横向模式的另一部手机，纵横比为 20:9 (3200x1400)
  • 纵横比为 16:9 的 1080p 高清电视 (1920x1080)
  • 纵横比为 4:3 的平板电脑 (2048x1536)

游戏的设计应考虑到这些差异，以确保无论设备的屏幕分辨率和纵横比如何，都能正确显示。

Defold 投影模式

Defold 项目具有可配置的基础分辨率。此分辨率在game.project文件中使用**显示**类别中的**宽度**和**高度**字段设置。

Defold project display settings
图 1. 显示项目设置

Defold 的默认行为是在基础分辨率下进行渲染，然后将生成的图像缩放至目标设备的实际分辨率。Defold 将此模式称为*拉伸投影*。拉伸投影不会保留原始纵横比。对于某些游戏，此默认值在视觉上可能是可以接受的。标准 Defold 渲染脚本包含两个其他保留基础纵横比的投影选项：*固定适配投影*和*固定投影*。

以下示例显示了一个围绕 480x272 的基础分辨率设计的示例项目，在 Defold 编辑器中显示。

在此示例中

  • 使用瓦片地图对象绘制基础分辨率边框周围的框架。
  • 两个精灵对象和一个文本对象位于基础分辨率的边界内。
  • 有四个精灵对象位于基础分辨率的边界之外，分别位于上方、下方、左侧和右侧。
Example project object layout
图 2. 示例项目对象布局

当以 960x544（正好是基础分辨率的 2 倍）的显示分辨率运行时，项目显示如下

Example project at 2x base resolution using the default stretch projection
图 3. 使用默认拉伸投影的 2 倍基础分辨率示例项目

拉伸投影

以下示例显示了使用默认拉伸投影调整窗口大小时的结果，其中未保留纵横比

Example project squashed horizontally using stretch projection
图 4. 使用拉伸投影时水平压缩的示例项目
Example project stretched horizontally using stretch projection
图 5. 使用拉伸投影时水平拉伸的示例项目

固定适配投影

*固定适配*投影模式保持基础分辨率的纵横比。由于保留了纵横比，因此将有额外的屏幕区域未被缩放的基础分辨率覆盖。根据纵横比差异的主轴，此额外区域存在于基础分辨率的顶部和底部或左侧和右侧。固定适配投影将修改基础分辨率以考虑此区域。此修改导致基础分辨率区域之外的游戏场景的附加区域被渲染。然后将生成的图像缩放至显示分辨率。

以下示例演示了将固定适配投影渲染到与 480x272 基础分辨率具有不同纵横比的显示分辨率

Example project in a wider aspect ratio using fixed-fit projection
图 6. 使用固定适配投影时，在具有比基础纵横比更高的纵横比的显示器上的示例项目
Example project in a taller aspect ratio using fixed-fit projection
图 7. 使用固定适配投影时，在具有比基础纵横比更宽的纵横比的显示器上的示例项目

固定投影

*固定投影*模式保持基础分辨率的纵横比，并按指定的缩放系数缩放基础分辨率。根据显示分辨率和缩放系数，可能会显示基础分辨率区域的子集或超集。

以下示例演示了使用 644x408 的屏幕分辨率和分别为 1 倍和 2 倍缩放系数的固定投影模式

Example project at 644x408 with a 1x zoom using fixed projection
图 8. 使用 1 倍缩放系数的固定投影时，在 644x408 显示分辨率下的示例项目
Example project at 644x408 with a 2x zoom using fixed projection
图 9. 使用 2 倍缩放系数的固定投影时，在 644x408 显示分辨率下的示例项目

更改投影模式

可以通过向渲染器发送相应的消息来在运行时切换活动投影模式。这些消息使用标准 Defold 消息系统发送。所有投影模式消息都包含指定近平面和远平面 Z 值的参数。

-- Change to stretch projection mode
msg.post("@render:", "use_stretch_projection", { near = -1, far = 1 })

-- Change to fixed fit projection mode
msg.post("@render:", "use_fixed_fit_projection", { near = -1, far = 1 })

-- Change to fixed projection mode
msg.post("@render:", "use_fixed_projection", { near = -1, far = 1, zoom = 2 })

Defold 渲染脚本

Defold 渲染行为由称为渲染脚本的特殊脚本文件控制。与其他 Defold Engine 脚本一样，渲染脚本是用 Lua 编程语言编写的。项目创建时包含默认渲染脚本，但您也可以将其替换为自定义渲染脚本。

拉伸、固定适配和固定投影模式是默认渲染脚本的功能。使用这些模式之一时，渲染脚本会生成一个用于渲染游戏对象的 2D 正交投影矩阵。此矩阵的配置因所使用的投影模式而异。

您可以使用自定义渲染脚本来扩展或更改投影矩阵的配置。默认脚本不支持的功能（例如不同纵横比的信箱或支柱箱）也可以通过自定义渲染脚本实现。

开源开发者创建了渲染脚本和相机包，这些包提供了比默认 Defold 脚本更多的功能。两个常用的包是 RenderCam 和 Defold-Orthographic。

Defold GUI 系统

Defold 包含一个基于 GUI 场景文件概念的 GUI 系统。GUI 场景文件包含称为节点的对象，这些对象定义单个 UI 元素，例如图像或文本。

GUI 场景文件可以作为组件添加到 Defold 游戏对象中。GUI 场景及其包含的节点是单独渲染的，其工作方式与普通游戏对象略有不同。由于这些差异，使用 GUI 场景支持多种显示分辨率需要考虑 GUI 系统坐标、GUI 节点枢轴和锚点等额外因素。

GUI 系统坐标

普通的 Defold 游戏对象使用世界坐标指定其坐标。摄像机对象将世界坐标转换为屏幕坐标，并显示落在摄像机当前虚拟视图内的游戏对象。GUI 系统使用它自己独立的摄像机。属于 GUI 场景的节点使用屏幕坐标而不是世界坐标。当显示分辨率与用于布局 GUI 节点的项目基础分辨率不同时，这可能会导致节点相对于屏幕边缘或父节点边缘的边距不同。Defold 提供多种选项来进行 GUI 布局调整，以应对显示分辨率的差异。

GUI 节点枢轴和锚点

GUI 节点可以使用**X 锚点**和**Y 锚点**属性锚定到垂直和/或水平边缘。

  • 如果节点具有父节点，则锚点位于父节点的边缘。
  • 如果节点没有父节点，则锚点位于屏幕的边缘。

下图显示了一个示例场景，其中包含两个 GUI 节点，即左下角和右上角的控制器图标。这两个节点的**X 锚点**和**Y 锚点**都设置为None

A sample scene with GUI elements
图 10.包含 GUI 元素的示例场景

当显示器大小调整且没有锚点时，控制器图标会保持其相对于基础分辨率的位置。

The resized sample scene with GUI elements that have anchors set to none
图 11.调整大小后的示例场景，其 GUI 元素的锚点设置为None

当左下角节点的**Y 锚点**设置为Bottom，而右上角节点的**Y 锚点**设置为Top时，GUI 节点将锚定到相应的屏幕边缘。

The resized sample scene with GUI elements that have anchors set to edges
图 12.调整大小后的示例场景，其 GUI 元素的锚点设置为Edges

GUI 节点的**枢轴**属性指定节点边界矩形上与屏幕空间坐标**位置**属性对应的点。GUI 节点默认为Center设置，将其**位置**点放置在边界矩形的正中心。其他可能的**枢轴**设置包括四个基点方向加上四个对角线方向。**枢轴**属性与**X 锚点**和**Y 锚点**属性结合使用时，可以简化边距空间的指定。

在以下示例中，左下角的控制器图标 GUI 节点的**位置**为0,0，**枢轴**设置为Center。

A GUI node with Pivot set to Center
图 13.**枢轴**设置为Center的 GUI 节点

将**枢轴**更改为South West会导致以下调整。

A GUI node with Pivot set to South West
图 14.**枢轴**设置为South West的 GUI 节点

GUI 节点调整模式

当显示分辨率与项目基础分辨率不同时，GUI 节点的大小可能会发生调整。**调整模式**属性控制节点内容的缩放行为。**调整模式**具有三个设置：Fit、Zoom和Stretch。

Fit

Fit设置保留节点内容的纵横比。内容将缩放以匹配节点调整大小后的边界矩形的宽度或高度。选择的轴是差异较小的那个轴。这确保内容以其原始纵横比适应边界矩形。

Zoom

Zoom设置也保留节点内容的纵横比。与Fit设置一样，Zoom将内容缩放以匹配节点调整大小后的边界矩形的宽度或高度。与Fit不同，Zoom使用与原始大小差异较大的轴作为匹配目标。这意味着缩放后的内容可能会超出边界矩形。

下图显示了两个具有不同**调整模式**设置的 GUI 节点的示例。左下角的控制器图标的**调整模式**为Fit，而右上角的控制器图标的**调整模式**为Zoom。

Two GUI nodes with different Adjust Mode settings
图 15.两个具有不同调整模式设置的 GUI 节点

Stretch

Stretch设置将节点内容缩放以完全匹配节点调整大小后的边界矩形。不会保留原始纵横比。

GUI 布局

Defold 提供了一种替代方法来使 GUI 布局适应不同的屏幕分辨率：布局。可以将布局添加到 GUI 场景以覆盖默认的 GUI 节点属性。布局与特定的屏幕分辨率相关联。当有多个布局可用时，Defold 将选择最接近实际屏幕分辨率的布局。GUI 节点使用的默认位置、大小、缩放比例或图形资源都可以由布局覆盖。

其他资源