做了两天unityUI的心得（纯新手向）

最近因为年度项目的原因需要我简单做下UI，菜鸟小白总结下经验。

一、总体结构为两个canvas，两个canvas始终放置在摄像机上。第一个canvas左上角有时间条（因为项目是跑酷游戏，所以设计成和血条类似的时间条），左上角还有游戏时间和剩余时间。canvas右上角还有个暂停按钮，当点击暂停按钮时，游戏暂停同时第一个canvas消失、第二个canvas出现。第二个canvas由中央两幅image和右上角三个按钮组成。三个按钮分别为继续、重新开始和结束游戏。当点击继续时回到游戏。

二、第一个canvas的制作：在层级试图中新建canvas，将canvas检视视图中的render mode设置为screen space-camera在这个渲染模式下，canvas会固定在屏幕上跟随屏幕移动。在层级视图中新建canvas的子部件slider和button和两个text。将slider的background和handle slider area禁用或者删除。在slider层级视图的fill area中的fill中设置时间条的颜色，在slider的检视视图中将slider的值设置为25。text和button的属性自由设置。

三、第二个canvas将button位置调整，button上的文本调整。也要注意将第二个canvas的render mode调整为screen space-camera。

四、设置第一个canvas的脚本。

using System.Collections;
using System.Collections.Generic;
using UnityEngine;
using UnityEngine.UI;

public class UiControler : MonoBehaviour {
    [SerializeField]
    Canvas firstcanvas;
    [SerializeField]
    Text timetext;
    [SerializeField]
    Canvas secondcanvas;
    [SerializeField]
    Slider slider;
    [SerializeField]
    Text leftime;
    
	// Use this for initialization
	void Start () {
        firstcanvas.gameObject.SetActive(true);
        secondcanvas.gameObject.SetActive(false);
	}
	
	// Update is called once per frame
	void Update () {
        timetext.text = "游戏时间：" + Time.timeSinceLevelLoad;
        if(slider.value>0)
        {
            slider.value -= Time.deltaTime * 1f;
        }
        if(slider.value<=10f)
        {
            leftime.fontSize = 25;
            leftime.color = Color.red;
        }
        leftime.text = slider.value.ToString();

        if (Input.GetKeyDown(KeyCode.Escape))
        {
            Paused();
        }
        
	}
    public void Paused()
    {
        firstcanvas.gameObject.SetActive(false);
        secondcanvas.gameObject.SetActive(true);
        Time.timeScale = 0f;
    }
}

五、在层级视图中新建一个空gameobject，将刚才的脚本挂在空gameobject上。选择第一个canvas、第二个canvas、slider、text等挂在新gameobject的属性上。现在还需设置暂停button的点击事件。找到暂停button的检视视图，在最下边on click()事件中点击+新建点击事件，将gameobject挂上去，选择pause()函数。这样这个button的点击事件就完成了，第一个canvas也算完成。可以进入游戏测试一下。

六、接下来完成第二个canvas的部分，由于第二个canvas主要是button，并不美观，所以我在canvas中间附加两张图片。

using System.Collections;
using System.Collections.Generic;
using UnityEngine;
using UnityEngine.UI;

public class UiDemender : MonoBehaviour {
    [SerializeField]
    Canvas firstcanvas;
    [SerializeField]
    Canvas secondcanvas;

    
	// Use this for initialization
	void Start () {
        
	}
	
	// Update is called once per frame
	void Update () {
		
	}
    public void UnPause()
    {
        secondcanvas.gameObject.SetActive(false);
        firstcanvas.gameObject.SetActive(true);
        Time.timeScale = 1f;
    }
    public void QuitGame()
    {
        Application.Quit();
    }
    public void Restart()
    {
        Application.LoadLevel(0);
    }

}

然后重复上一步给button添加点击事件的步骤。在canvas中新建两个空image，将图片导入素材库中，需要注意的是，要将导入的图片在检视视图中修改texture type属性，选择sprite(2D and UI)，这样就可以将图片挂到image上了。

七、到这里一个丑到爆炸但是勉强应付的UI就暂时完成了。

做了两天unityUI的心得（纯新手向）

猜你喜欢