在 Unity 中为 Iphone X 设计人像游戏

Question

我正在尝试统一制作游戏，并且一直在玩弄我的新 iPhone X 的缺口。我知道我们现在必须设置新的安全边际 UI 元素，以确保它们不会被缺口或主页手势栏裁剪掉。

当我尝试在屏幕右上角附近放置一个 UI 元素时，放置在 iPhone X 和 iPhone 7 上看起来会有所不同。

例如，如果我将 UI 元素放置在屏幕右边缘下方和左侧 35 个单位处。在 iPhone7 上，UI 元素将被放置在距可用屏幕顶部向下 35 个单位的位置，而在 iPhoneX 上，UI 元素总共将被放置在35 个单位减去可用屏幕顶部的屏幕槽口高度（如果槽口为 20 个单位，则为 5 个单位）

这是我正在谈论的图像：

所以我的问题是，如何从 "usable" 屏幕的顶部制作 UI 元素 35？我猜我当前解决方案的问题是，如果游戏是运行在没有缺口的 phone 上，顶部会有一个大空白 space。

Answer 1

所以我找到了一个解决方案，不是一个完美的解决方案，但仍然是一个解决方案。我首先检测设备是否为 X iPhone 代，如果是，则将 UI 元素的 y 位置设置为 Screen.safeArea.max.y 位置。

我仍然希望看到其他解决方案。

这是我的代码：

if (UnityEngine.iOS.Device.generation == UnityEngine.iOS.DeviceGeneration.iPhoneX)
        {
            theImage.transform.position = new Vector2(theImage.transform.position.x, Screen.safeArea.max.y);

        }

Answer 2

您可以使用 Unity 的 Screen.safeArea 方法来获取任何 iPhone 的通用安全区域。使用它创建一个反应式安全区域父面板，然后创建您的子图像锚定在安全面板右上角外 35 像素处。

这将是比硬编码到设备更通用的解决方案，因为 iPhone X（Xs、Xs Max、XR）和其他缺口 Android 手机的未来版本可能没有相同大小的缺口。在横向模式下，它还将考虑主页指示器和侧面安全区域。

这需要 Unity 2017.2.1+。安全区域面板应该是全屏 UI 面板（锚点 0,0 到 1,1；枢轴 0.5,0.5）。还建议将 Canvas 设置为 "Scale With Screen Size" 和 "Match (Width-Height)" = 0.5，以匹配任何屏幕尺寸和方向。

您可以将此脚本用于安全区域父面板：

public class SafeArea : MonoBehaviour
{
    RectTransform Panel;
    Rect LastSafeArea = new Rect (0, 0, 0, 0);

    void Awake ()
    {
        Panel = GetComponent<RectTransform> ();
        Refresh ();
    }

    void Update ()
    {
        Refresh ();
    }

    void Refresh ()
    {
        Rect safeArea = GetSafeArea ();

        if (safeArea != LastSafeArea)
            ApplySafeArea (safeArea);
    }

    Rect GetSafeArea ()
    {
        return Screen.safeArea;
    }

    void ApplySafeArea (Rect r)
    {
        LastSafeArea = r;

        Vector2 anchorMin = r.position;
        Vector2 anchorMax = r.position + r.size;
        anchorMin.x /= Screen.width;
        anchorMin.y /= Screen.height;
        anchorMax.x /= Screen.width;
        anchorMax.y /= Screen.height;
        Panel.anchorMin = anchorMin;
        Panel.anchorMax = anchorMax;
    }
}

为了更深入的分析，我在这里写了一篇带有屏幕截图的详细文章：https://connect.unity.com/p/updating-your-gui-for-the-iphone-x-and-other-notched-devices。希望对您有所帮助！

在 Unity 中为 Iphone X 设计人像游戏

Designing Portrait Game for Iphone X in Unity

ios

unity3d

iphone-x