在 Unity 中为 iPhone X 设计人像游戏答案

【问题标题】：Designing Portrait Game for Iphone X in Unity在 Unity 中为 iPhone X 设计人像游戏
【发布时间】：2018-09-02 17:44:15
【问题描述】：

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

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

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

这是我正在谈论的图像：

所以我的问题是，如何使 UI 元素从“可用”屏幕的顶部变为 35？我想我目前的解决方案存在的问题是，如果游戏在没有刘海的手机上运行，顶部会有很大的空白。

【问题讨论】：

标签： ios unity3d iphone-x

【解决方案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);

        }

【讨论】：

【解决方案2】：

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

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

这需要 Unity 2017.2.1+。安全区域面板应该是全屏 UI 面板（Anchor 0,0 到 1,1；Pivot 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。希望对您有所帮助！

【讨论】：