一、canvas

1.canvas介紹

(1)Canvas屬于Unity的UGUI，UGUI提供了強(qiáng)大的可視化編輯，大大提高了GUI的開發(fā)效率。
(2)Canvas是所有UI組件的父物體，也就是說每一個(gè)UI組件都必須在Canvas下，作為Canvas的子物體，當(dāng)你創(chuàng)建一個(gè)UI控件時(shí)，如果在Hierarchy下沒有Canvas組件的話，Unity會幫你自動創(chuàng)建一個(gè)Canvas，并將你的UI控件置于Canvas下，Unity也會自動創(chuàng)建EventSystem，這個(gè)對象用來確定諸如鼠標(biāo)輸入的事件，這對 UI 組件來說也至關(guān)重要，比如按鈕、精靈圖片、圖片等等

2.創(chuàng)建canvas

(1)右鍵“層級”頁面，選擇UI–>畫布，即canvas

(2)在“檢查器”這里可以調(diào)整canvas尺寸、大小、位置的等等

二、RawImage和Image

1．image介紹

Image圖片組件，是UGUI組件中常見的基礎(chǔ)組件，主要用來顯示圖片效果。

其他的一些組件都會用到Image組件，比如說Button組件、Scrollbar組件、Dropdown組件、InputField組件、Panel組件、ScrollRect組件，其他的組件的子對象中也會用到Image組件。

2．RawImage介紹

（1）RawImage 組件是一個(gè)用來顯示紋理的組件，常常跟Render Texture結(jié)合使用，用來映射相機(jī)的畫面。或者用來截圖顯示等。
（2）與Image不同的地方在于，Image只能顯示Sprite圖片，而RawImage可以顯示任何紋理貼圖。
（3）在Unity的Hierarchy視圖中選擇“Create→UI→Raw Image”新建一個(gè)Raw Image組件。

3.創(chuàng)建

（1）首先創(chuàng)建一個(gè)pannel。在”層級”面板右鍵–>UI–>面板。在畫布上做東西都在pannel上，所以需要創(chuàng)建一個(gè)pannel

（2）在pannel下創(chuàng)建image和rawImage
（3）在rawimage中導(dǎo)入圖片做背景

(3)這里有一個(gè)UV Rect

(4)如果把W改為10，就會出現(xiàn)這樣

(5)再改一下H就會寬度上變化

(6)調(diào)整W和H為1，然后點(diǎn)擊下圖Rect Tool（快捷鍵T）讓圖片鋪滿
(7)導(dǎo)入Image圖片，這里需要添加Sprite （精靈圖片）才可以。首先需要選中圖片，在Inspector檢查工具里選中texture type，下拉選項(xiàng)中選定sprite（2DandUI），就可以添加到Image了

(8)在網(wǎng)上自行下載按鈕的圖片，最好是背景為透明的那種

(9)然后將其轉(zhuǎn)化為精靈圖片
(10)轉(zhuǎn)化完之后圖片會顯示一個(gè)小三角，說明轉(zhuǎn)化成功

(11)如果圖片有多個(gè)按鈕需要點(diǎn)擊Inspector里的Sprite Edit（需要先在菜單欄的windows里下載）

(12)打開資源管理器后，在Packages里找到2D Sprite點(diǎn)擊安裝，就可以用Sprite Edit了

然后對圖片進(jìn)行裁剪

三、text文本

1．text介紹

（1）Text文本，是為了向用戶展示非交互式的文本信息。

2．屬性

（1）Text 用于顯示的文本
（2）Font 文本的字體
（3）Font Style 文本的樣式（正常、加粗、斜線）
（4）Font Size 字體的大小
（5）Line Spacing 文本行之間的間距
（6）Rich Text 是否支持富文本，富文本是帶有標(biāo)記標(biāo)簽的文本，增強(qiáng)文本的顯示效果
（7）Alignment 文本的水平和垂直對齊方式
（8）Align By Geometry 是否以當(dāng)前所顯示的文字中獲得的最大長寬（而不是字體的長寬）進(jìn)行對齊。
（9）Horizontal Overflow 文字橫向溢出處理方式，可以選擇Warp隱藏或者Overflow溢出
（10）Vertical Overflow 文本縱向溢出的處理方式，可以選擇Truncate截?cái)嗷蛘逴verflow溢出
（11）Best Fit 忽略Font Size設(shè)置的文字大小，自適應(yīng)改變文字大小以適應(yīng)文本框的大小
（12）Color 文本的顏色
（13）Material 用來渲染文本的材質(zhì)，可以通過設(shè)置材質(zhì)，讓文本擁有更加炫酷的效果。
（14）Raycast Target 是否可以被射線檢測，通常情況下可以關(guān)閉，因?yàn)槲谋咀詈弥挥脕盹@示。

3．創(chuàng)建

（1）在層級右鍵并在pannel下創(chuàng)建text選擇UI–>Text

（2）需要注意的是，text默認(rèn)字體不支持中文顯示，需要在控制面板中導(dǎo)入。控制面板–>外觀和個(gè)性化–>字體，然后選擇一個(gè)中文字體，我這里選擇黑體常規(guī)，然后直接拖入unity的assets。

（3）然后進(jìn)入unity右鍵拖入的字體

（4）輸入即可

四、button

1．button介紹

(1)Button是UGUI里面的一個(gè)交互UI組件。
也是在開發(fā)中經(jīng)常遇到的一個(gè)組件。
通過點(diǎn)擊完成一系列的操作：執(zhí)行某些事件、動作、切換狀態(tài)等。

2．創(chuàng)建

（1）在Unity的Hierarchy視圖中點(diǎn)擊“Create→UI→Button”創(chuàng)建一個(gè)Button組件：
(2)在button子項(xiàng)目text中輸入“切換模式”并設(shè)置字體

（3）重點(diǎn)是On Click

（4）單擊加號
（5）把text拖到這里


（6）右面功能選擇string text

（7）在輸入“登陸成功”即可

五、場景切換

1．添加腳本

(1) 添加登錄退出場景切換（在屬性面板下的onclick，指定點(diǎn)按鈕時(shí)，對應(yīng)的功能）
①代碼：

①代碼：
using System.Collections;
using System.Collections.Generic;
using UnityEngine;
using UnityEngine.SceneManagement;

public class Demo : MonoBehaviour
{
    public void Login()
    {
        SceneManager.LoadScene("1.FristClasses");
    }

    public void ExitGame()
        {
            Application.Quit();
        }

    }

(2)Button代碼設(shè)置點(diǎn)擊事件（實(shí)現(xiàn)點(diǎn)擊讓RawImage消失）
①代碼：

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

public class FunctionDisappear : MonoBehaviour
{
    private GameObject GetRawImage;
    
    void Start()
    {
        GetRawImage = GameObject.Find("RawImage");
    }

    // Update is called once per frame
    void Update()
    {
        
    }
    void AddListenerToButtun()
    {
        GetComponent<Button>().onClick.AddListener(DisableRawImage);
    }

    void DisableRawImage()
    {
        GetRawImage.SetActive(false); 
    }
}

2．演示

（1）場景如下所示

（2）隨便下一個(gè)棋子。

（3）現(xiàn)在為單人模式，點(diǎn)擊切換模式會切換到雙人模式
文章來源地址http://www.zghlxwxcb.cn/news/detail-445177.html

到了這里，關(guān)于unity3D之UI的文章就介紹完了。如果您還想了解更多內(nèi)容，請?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！