Unity UGUI 利用锚点生成相对位置的UI

时间:2024-04-06 22:36:21

UGUI是什么

UGUI 是Unity 官方推出的最新UI系统。它从 Unity 4.6 开始,被集成到 Unity 的编辑器中。相较于旧的 UI 系统,它绝对属于一个巨大的飞跃!因为只要有过旧 UI 系统使用体验的开发者,大部分都对它没有任何好感,以至于在过去的很长一段时间里,大家都在使用资源商店(Asset Store)里,由第三方开发者开发的付费插件 NGUI,实现游戏中与 UI 相关的功能部分。

锚点是什么

关于锚点,网上已经有很多的文章讲解,这里就不在过多介绍,实际锚点就是一个可自行设置的固定点,控件到这个锚点的距离是永恒不变的,不会因为分辨率变化而变化,比如,一个按钮在右上角,设置好锚点,这个按钮就永远在右上角,无论什么分辨率的屏幕,这样,我们就实现了自适应屏幕分辨率的UI。

例子

动态生成在屏幕右上角的Button

要动态生成button,我们就制作一个prefab好了。
创建一个button,然后将其锚点设置为右上角,将中心点设置为右上角,然后将位置改为0,0,如图所示:
Unity UGUI 利用锚点生成相对位置的UI
这样我们就创建了一个在右上角的button,并且不随着屏幕分辨率的变化而变化,始终都在右上角。
将按钮拖拽到下面,变成一个prefab。
Unity UGUI 利用锚点生成相对位置的UI
接着,在场景中创建一个空的GameObject,将场景中的button删除。
Unity UGUI 利用锚点生成相对位置的UI
然后我们写一个简单的脚本。我们动态生成一些button,在右上角排列。
脚本很简单,先上代码。

using UnityEngine;
using UnityEngine.UI;

public class NewBehaviourScript : MonoBehaviour {

    public Button button;
    public Canvas canvas;
	void Start () {
        for (int i = 0; i < 10;i++)
        {
            Button btn = Instantiate(button);
            btn.GetComponent<Transform>().parent = canvas.transform;
            btn.GetComponent<RectTransform>().offsetMax = new Vector2(0, -i * 30);
            btn.GetComponent<RectTransform>().offsetMin = new Vector2(-160, -i * 30 - 30);
        }
	}
	
}

效果如图:
Unity UGUI 利用锚点生成相对位置的UI
首先这里使用了Instantiate动态生成了button,接着使用了parent属性,让button变成canvas的子物体,只有变成其子物体,button才能正常显示。接着使用了RectTransform的offsetMax和offsetMin设置了右上角到锚点的距离,和左下角到锚点的距离,这样,我们就实现了在右上角动态生成一些button。

左下角生成button等等同理,只要理解了锚点的原理,我们就能好好的利用它了。

支持我

您的支持,就是我创作的最大动力
Unity UGUI 利用锚点生成相对位置的UIUnity UGUI 利用锚点生成相对位置的UI