什么是锚点

你的图像锚定在屏幕中央，但什么是锚点呢？在选择图像后，观察 Scene 视图：

 

 

 

Select image to expand

 

 

屏幕中央的十字就是图像的锚点。这是计算对象位置时的起点（由绿色箭头显示，从图像的锚点到图像的轴心（即小蓝色圆圈））。

 

 

因此，在调整屏幕大小时，该位置将保持不变，并且图像不会随着屏幕边框移动。

 

 

要解决此问题，你需要将图像锚定到一个角。这样，如果由于调整了屏幕大小而移动了该角，则图像将保持在相同的距离内并随之移动。

 

 

要将图像锚定到角，请执行以下操作：

 

 

1.你可以使用 Rect Transform 直接移动锚点，但是 RectTransform 允许我们直接将锚点锚定到一个角上。

 

 

2.单击 Rect Transform 左上角的正方形，然后选择左上角的选项。

 

 

 

 

Select image to expand

 

 

你可以在 Scene 视图中看到锚点已经移动到这个角。

 

 

还要注意，Rect Transform 的 Pos X 和 Pos Y 已更改：现在是从画布的角（而不再是中心）开始计算的！

 

 

确保图像在这个角的位置，现在调整屏幕大小时，UI 会保持在这个角的位置！

 

 

还可以将游戏对象从 Image 重命名为 Health，这样我们就知道这是生命值的 UI。使用 Inspector 顶部包含“Image”的文本框，并将内容更改为 Health。

 

现在，你需要添加 Ruby 的肖像以及蓝色条来完善我们的 Health UI。

 

 

要添加肖像，请执行以下操作：

 

 

1. 在 Art > Sprites > UI 中找到肖像，名为 CharacterPortrait。

 

 

2.创建一个新图像作为 Health Image 的子对象，将找到的肖像分配给这个子对象，单击 Set Native Size 并调整其大小（同时按住 Shift 键可保持相同的比例，不会压扁！）。尝试调整为不同大小，并移动到生命值条背景的蓝色圆圈中，直到对结果满意为止。

 

 

 

 

Select image to expand

 

 

你这里实际上并不需要更改锚点，因为已经锚定在父级（在我们这种情况下为 Health 游戏对象）的中心。所以，在通过调整屏幕大小来移动 Health 游戏对象时，中心也会移动，并且肖像也将随之移动。

 

 

但是，如果水平调整生命值条对象的大小，中心位置将会更改，因此会移动肖像的位置，但不会调整肖像的大小：

 

 

这是因为锚点不仅定义位置，还定义大小。如果按下 Rect Transform 组件中的锚点按钮，然后选择右下角的展开蓝色箭头，则会看到作为锚点的 4 个箭头移动到父图像的 4 个角。

 

 

现在图像大小不是绝对值，而是相对于这些锚点之间的距离的值。因此，如果图像大小在左右锚点之间为 25%，若将锚点移近（例如通过调整大小），则图像将调整大小以保持在该比例之内：

 

 

 

 

 

  3.要正确调整生命值条的大小，请更改 Rect Transform 以拉伸和移动锚点。为此，可以单击并拖动锚点，让锚点围住肖像。