为多种分辨率/不同设备缩放 UI答案

【问题标题】：Scale UI for multiple resolutions/different devices为多种分辨率/不同设备缩放 UI
【发布时间】：2016-10-05 18:55:49
【问题描述】：

我有一个非常简单的统一 GUI，它具有以下方案：

Brekt 和按钮在哪里。

图形用户界面在 PC 上运行良好，并且在 screen space : overlay 上，所以它应该会自动适应每个屏幕。

但在平板电脑上，整个 GUI 更小，并且在屏幕中心缩小，元素周围有很大的边距（现在无法加入屏幕截图）

解决这个问题的方法是什么？是在播放器设置中还是在项目设置中？

【问题讨论】：

标签： user-interface unity3d

【解决方案1】：

自动缩放 UI 需要结合使用锚点、RecTransform 的枢轴点和 Canvas Scaler 组件。没有图像或视频，很难理解它。彻底了解如何执行此操作非常重要，Unity 为此提供了完整的视频教程。您可以观看它here。

此外，当使用滚动条、滚动视图和其他类似的 UI 控件时，ContentSizeFitter 组件也用于确保它们适合该布局。

【讨论】：

嗯，我认为由于屏幕覆盖，它可以自动适应...我是 C# 的初学者，这样做看起来很难，但如果没有其他解决方案...

【解决方案2】：

MotionRange 存在问题。我们也必须缩放这个值。我是这样做的：

public int MovementRange = 100;
    public AxisOption axesToUse = AxisOption.Both; // The options for the axes that the still will use
    public string horizontalAxisName = "Horizontal"; // The name given to the horizontal axis for the cross platform input
    public string verticalAxisName = "Vertical"; // The name given to the vertical axis for the cross platform input
    private int _MovementRange = 100;

    Vector3 m_StartPos;
    bool m_UseX; // Toggle for using the x axis
    bool m_UseY; // Toggle for using the Y axis
    CrossPlatformInputManager.VirtualAxis m_HorizontalVirtualAxis; // Reference to the joystick in the cross platform input
    CrossPlatformInputManager.VirtualAxis m_VerticalVirtualAxis; // Reference to the joystick in the cross platform input

    void OnEnable()
    {
        CreateVirtualAxes();
    }

    void Start()
    {
        m_StartPos = transform.position;
        Canvas c = GetComponentInParent<Canvas>();
        _MovementRange = (int)(MovementRange * c.scaleFactor);
        Debug.Log("Range:"+ _MovementRange);
    }

    void UpdateVirtualAxes(Vector3 value)
    {
        var delta = m_StartPos - value;
        delta.y = -delta.y;
        delta /= _MovementRange;
        if (m_UseX)
        {
            m_HorizontalVirtualAxis.Update(-delta.x);
        }

        if (m_UseY)
        {
            m_VerticalVirtualAxis.Update(delta.y);
        }
    }

    void CreateVirtualAxes()
    {
        // set axes to use
        m_UseX = (axesToUse == AxisOption.Both || axesToUse == AxisOption.OnlyHorizontal);
        m_UseY = (axesToUse == AxisOption.Both || axesToUse == AxisOption.OnlyVertical);

        // create new axes based on axes to use
        if (m_UseX)
        {
            m_HorizontalVirtualAxis = new CrossPlatformInputManager.VirtualAxis(horizontalAxisName);
            CrossPlatformInputManager.RegisterVirtualAxis(m_HorizontalVirtualAxis);
        }
        if (m_UseY)
        {
            m_VerticalVirtualAxis = new CrossPlatformInputManager.VirtualAxis(verticalAxisName);
            CrossPlatformInputManager.RegisterVirtualAxis(m_VerticalVirtualAxis);
        }
    }


    public void OnDrag(PointerEventData data)
    {
        Vector3 newPos = Vector3.zero;

        if (m_UseX)
        {
            int delta = (int)(data.position.x - m_StartPos.x);
            delta = Mathf.Clamp(delta, -_MovementRange, _MovementRange);
            newPos.x = delta;
        }

        if (m_UseY)
        {
            int delta = (int)(data.position.y - m_StartPos.y);
            delta = Mathf.Clamp(delta, -_MovementRange, _MovementRange);
            newPos.y = delta;
        }
        transform.position = new Vector3(m_StartPos.x + newPos.x, m_StartPos.y + newPos.y, m_StartPos.z + newPos.z);
        UpdateVirtualAxes(transform.position);
    }

【讨论】：