unity第n+1堂課

UI 講師:水母

目錄

Canvas

Image

TextMeshPro

Button

Scene

Scene

場景

這是什麼

在開啟一個新專案時，Unity Editor會自動生成一個「Sample Scene」

可以直接在裡面做開發

但當我們要做一些完全不同的畫面or切換關卡時

新增一個不同的Scene是個好選擇

新增場景

在scenes資料夾裡面點右鍵選「Create」選「Scene」

就能建立一個新的場景

場景切換

當有多個Scene，在遊戲中需要進行切換時可以使用SceneManager.LoadScene來進行scene的更換

要使用SceneManager的話，最上方要先引入UnityEngine.SceneManagement名稱空間

  • 先將場景新增到Build Settings
  • 選取場景拖移到Scenes in build內
  • 有顯示在裡面就代表有新增成功了

場景切換

using System.Collections;
using System.Collections.Generic;
using UnityEngine;
using UnityEngine.SceneManagement;

public class SceneLoader : MonoBehaviour
{
    
    private void LoadnextScene()
    {
        SceneManager.LoadScene("Level1");
    }
    
}

第一種方法是用名稱讀取

但如果改了場景名稱這裡也需要修改

場景切換

using System.Collections;
using System.Collections.Generic;
using UnityEngine;
using UnityEngine.SceneManagement;

public class SceneLoader : MonoBehaviour
{
    
    private void LoadnextScene()
    {
        SceneManager.LoadScene(1);
    }
    
}

剛剛加入Build settings的時候可能會注意到旁邊有一排從0開始的數字

那個就是場景的index

我們也可以用這個index來讀取到場景

場景切換

using System.Collections;
using System.Collections.Generic;
using UnityEngine;
using UnityEngine.SceneManagement;

public class SceneLoader : MonoBehaviour
{
    
    private void LoadnextScene()
    {
        SceneManager.LoadScene(SceneManager.GetActiveScene().buildIndex +1);
    }
    
}

當需要切換的場景是依序的時候(ex:3 4 5)

可以用另一種方式依序往下讀取

每次都讀取當前index+1的場景

Canvas

畫布

這是什麼

Canvas是所有UI物件的基礎

所有UI物件都要被放在Canvas裡，作為他的子物件才能運行

建立:在Hierarchy裡按右鍵 --> UI --> Canvas

CanvaS

創建的同時Editor會自動建立一個EventSystem

那跟後面的互動部分有關

點到Canvas可以發現他比我們原本的編輯區大很多

CanvaS

首先要先改Canvas大小的設定

看到右邊Inspector裡的Canvas Scaler組件

裡面有一個UI Scale Mode

以像素為單位訂定的固定大小

除非調整Canvas組件設定否則無法變動

符合螢幕大小，可指定螢幕的大小數值

(通常用這個)

沒用過，但不建議固定

改成Scale with Screen Size

CanvaS

把Reference Resolution改成1920*1080(Full HD)

Game Panel的顯示比例也要改16:9，才不會跑掉

Image

圖片

Image

對Canvas按右鍵選UI -> Image新增一個Image物件

Image組件有點類似一般的Sprite Renderer，可以理解為UI裡的Sprite Renderer

上面的Rect Transform也可以理解成一般Transform的進階版

Image

點一下錨點圖可以用GUI改

位置

長寬

錨點(不用改，可以影響座標基準點)

中心點(預設在中心

旋轉

大小

圖片，可以理解成一般的Sprite Renderer放圖像資源的地方

沒有圖片時的純色填充

材質

可否被Mask蓋住

TextMeshPro

文字

TextMeshPro

這是Unity新版的文字

舊版的可以改的東西比較少，同時也可能比較快被移除或成為過時組件

所以本節課以新版為例

在Canvas上點右鍵 --> UI --> Text - TextMeshPro

TextMeshPro

會彈出這個視窗

把兩個都import

TextMeshPro

我們看到右邊Inspector下方的TextMeshPro - Text (UI)組件

文字，預設New Text

各種預設好的文字樣式，可以自己試試

字型，等等教你們怎麼新增

文字樣式，由左到右：粗體、斜體、下劃線、刪除線、小寫、大寫

材質

是否根據目前文字框長寬調整文字大小至完全符合換行

文字大小

TextMeshPro

接續上一頁

可以調整字元之間、單字之間、行之間跟段落之間的間隔大小

對齊選項

當超出大小後的顯示模式，預設顯示，也可以調遮住等等

啟用/停用自動換行

文字顏色

自訂字體

首先下載你想使用的字體

並且把字體檔(.ttf)放進Assets/TextMesh Pro/Fonts裡面

接著對字體檔點右鍵，選Create --> TextMeshPro --> Font Asset

自訂字體

再來就可以點到剛剛的TextMeshPro物件

把Font Asset拖進TextMeshPro - Text(UI)組件裡的Font Asset欄位

字體就定義好了 耶

Button

按鈕

Button

在Canvas上點右鍵之後 UI --> Button - TextMeshPro

創建一個帶有TextMeshPro文字物件的按鈕

Button

物件旁邊有個箭頭可以下拉

有TextMeshPro物件可以調整按鈕上的文字

右邊的Image組件

上面的Source Image可以改變按鈕的背景圖

Button

按鈕互動時會變換顏色的圖(預設是按鈕背景)

按鈕互動時會變換顏色的圖(預設是按鈕背景)

一般狀況下的顏色

滑鼠移動到上面的顏色

按下瞬間的顏色

按下後還沒點擊其他地方的顏色

禁用(不可點擊)時的顏色

漸變時常

Button

我們可以把前面學的場景切換結合button

先創一個腳本叫SceneLoader

把旁邊的程式貼上去

把腳本拖到canvas上

using System.Collections;
using System.Collections.Generic;
using UnityEngine;
using UnityEngine.SceneManagement;

public class SceneLoader : MonoBehaviour
{
    
    public void LoadnextScene()
    {
        SceneManager.LoadScene(1);
        //index改自己要切換的
    }
    
}

Button

接下來進到Button組件裡面

找到On Click()列表

按「+」加入一個事件

附帶有按鈕按下後要執行的函式的遊戲物件

所以我們要把剛剛放有腳本的canvas拖進去

Button

這裡是按下按鈕要執行的事

總之就是

如果是要修改值的，填入的都是修改後的值(要把A改成B則欄位中填B)

沒有要修改值的就是直接選擇函式就可以執行了

有幾種常用的類別

ex:讓Canvas按下後消失:Canvas --> bool enabled

讓GameObject被停用:GameObject --> SetActive (bool)

改一個GameObject的名稱:GameObject --> string name

Button

直接選SceneLoader(或你自己的腳本名稱) --> LoadnextScene()(或你自己的函式名稱)

來執行

Made with Slides.com