Cave: 游戏用户界面 (Game UI) 系统

在本课中，您将学习如何使用Cave Engine的UI锚定系统。

锚定允许您定义用于屏幕上UI元素的参考点。这在创建需要正确适应不同分辨率、窗口大小和宽高比的界面时非常重要。

到本课结束时，您将理解如何一致地定位UI元素，确保它们在不同屏幕大小下保持在您期望的位置。

1. 创建新的UI元素

创建一个新的UI元素默认。

添加到场景后，选择它并查看属性面板。

在那里，您将找到负责元素位置、缩放、外观和锚定的设置。在本课中，我们将使用这些属性来理解锚定系统的工作原理以及它如何影响接口的行为。

2. 位置

默认情况下，Cave Engine中UI元素的位置是以百分比值来定义的。

这有助于您创建更好适应不同屏幕分辨率的界面。

最初，UI元素锚定在屏幕的中心。因此，当位置值设置为0时，元素正好出现在界面的中心。

3. 缩放

与位置一样，Cave Engine中UI元素的缩放默认也是以百分比值来定义的。

通过更改缩放值，您可以直接在屏幕上增加或减少UI元素的大小。

这使得在保持响应性的同时，轻松调整界面的尺寸。

4. 百分比和绝对像素值

正如我们之前看到的，默认情况下，Cave Engine中UI元素的位置和缩放是使用百分比来定义的。

在大多数情况下，这是推荐的行为，因为它有助于界面保持一致的位置和大小，而不管分辨率或显示器大小。

在这个示例中，我们将UI元素的缩放设置为X和Y轴上的10%。我们还将位置设置为X轴上的25%，对应于水平轴。

通过这种设置，元素相对于其锚点向右移动了25%。

由于值是以百分比定义的，因此这种定位在不同的分辨率或显示器大小下将保持不变，确保界面在不同设备上的一致性。

除了百分比值外，Cave Engine还允许您使用以像素为单位的绝对值。

这种模式在您需要UI元素具有固定大小或固定位置时是非常有用的。

要更改单位类型，请单击您想要修改的定位或缩放轴旁边的锁定图标。

这样一来，值将在百分比(%)和绝对像素(px)之间切换，让您为每种情况选择最合适的单位。

使用绝对像素值时，UI元素将不再按屏幕分辨率成比例地适应。

这意味着，无论游戏是在低分辨率还是高分辨率的显示器上运行，其像素值都将按配置精确应用。

同样的行为适用于位置的Y轴以及缩放的X和Y轴。

当您需要一个元素保持固定大小或固定位置，而不考虑屏幕或其父UI元素的宽度和高度时，推荐使用这种模式。

例如，您可能希望一个图标始终宽度正好为64像素，或者小边距始终距离边界正好为20像素。

5. 位置锚定

位置和缩放属性中可用的锚定图标指示UI元素的锚点。

单击位置锚定图标时，将显示锚点窗口。在那里，您可以查看元素的当前锚点。

默认情况下，新的UI元素锚定在屏幕的中心，由配置窗口中的蓝色圆圈表示。

这个锚点作为在接口中定位元素的参考。从这个点开始，位置值将根据所选锚点应用。

想象一下，您想创建一个小地图，它通常放置在屏幕的左下角。

在这种情况下，保持元素锚定在中心没有多大意义，因为它的位置将从屏幕的中心点进行计算。

对于这种类型的接口，只需将锚点更改为所需的下角即可。

这使得元素使用屏幕的那个区域作为参考，方便定位，并确保它在使用的分辨率下保持正确位置。

当位置值设置为0时，无论使用百分比(%)还是绝对像素(px)，UI元素将完全位于其锚点之上。

换句话说，锚点成为元素位置的参考。

从那一点开始，您只需调整位置值即可将元素移动到期望的方向。

6. 缩放锚定

现在让我们理解缩放锚定的工作原理。

为此，将UI元素的锚点更改回屏幕的中心，并将位置值设置为0，使元素回到中心。

当元素居中时，更容易看到锚定如何影响缩放行为，并理解UI元素将从哪个点进行调整大小。

当缩放锚点设置在中心时，增加或减少元素的缩放将均匀影响两侧。元素将同时向左和向右增长或缩小。

然而，在某些情况下，这并不是所期望的行为。

例如，想象健康条或进度条。在这种情况下，您通常希望该元素仅向一个方向增长或缩小。

要实现这一点，请将缩放锚点更改为所需的一侧。

当您这样做时，将显示一个小光标，指示将应用缩放的点。

现在，当您增加或减少缩放时，元素将仅在锚点的相反方向增长。这使得创建条形和其他动态UI元素变得更容易。

7. 调整锚点和缩放

现在我们理解了缩放锚点如何影响元素的调整大小行为，我们可以根据我们的项目要求配置界面。

将位置锚点恢复到屏幕的左下角，或者选择任何其他对您正在创建的界面更有意义的位置。

您可以对缩放锚点做同样的操作，定义元素将从哪个点进行调整大小。

在这个例子中，我们将使用位置和缩放的X轴的绝对像素值，而对Y轴保持百分比值。

这种设置允许元素在不同屏幕尺寸下保持一个正方形比例，同时在垂直轴上保持响应行为。

此时，您应该对Cave Engine中UI锚定的工作原理有一个好的理解。

锚定是界面创建中最重要的部分之一，因为它们定义了UI元素在屏幕大小变化时的行为。

通过结合位置锚点、缩放锚点、百分比值和像素值，您可以创建既精确又响应的界面。