該文來(lái)是學(xué)習(xí)chutianbo老師的筆記，鏈接b站
UI的創(chuàng)建
1.右鍵Hierarchy空白處 UI?canvas
2.這里一共使用了三個(gè)素材
層級(jí)結(jié)構(gòu)
UI：初始畫(huà)布
characters：頭像
Mask：遮罩層
healthbar：血條
這里我們先回到UI（也就是一開(kāi)始創(chuàng)建的Canvas）
我們一開(kāi)始有用的應(yīng)該只有渲染模式render Mode，他有三種模式
Screen Space - Overlay：這是默認(rèn)模式，可以讓 Unity 在始終在游戲的上層繪制 UI。大多數(shù)應(yīng)用程序使用此模式，因?yàn)樗鼈兿Ｍ?UI 始終位于最上層以便提供所有信息。
Screen Space - Camera：這種模式在與攝像機(jī)對(duì)齊的平面上繪制 UI。平面的大小確定為始終填充整個(gè)屏幕，這樣你就可以四處移動(dòng)攝像機(jī)，并且平面將隨攝像機(jī)一起移動(dòng)，從而顯示與 Overlay 圖形相同的形狀。但是，由于平面是在世界中繪制的，而不是在屏幕上層繪制的，因此世界中的對(duì)象可以繪制在 UI 的上層。
World Space：這種模式可在世界中的任何位置繪制平面。例如，你可以將此平面用作游戲中的計(jì)算機(jī)屏幕，或者用作墻壁，或者放在角色的上層。這在 3D 游戲中更有用，因?yàn)?UI 會(huì)隨著距離變小。
3.關(guān)于拉動(dòng)之后圖像沒(méi)有隨著一起變化
這里就要使用錨點(diǎn)
就是頭像四周的小三角形，它可以使我們的子物體在父物體固定的位置上隨著父物體變化
4.遮罩層
第一步
第二步
第三步
把這個(gè)勾去掉
當(dāng)然記得把錨點(diǎn)設(shè)好
這里
可以使用alt+右下角那個(gè)直接填充父物體，血條填充到遮罩層
5.bug時(shí)間
這樣子做的話，在后面使用代碼控制遮罩層縮減時(shí)會(huì)出現(xiàn)兩端縮小，而不是血條向右減少的過(guò)程。
所以記得把Mask的pivot（就是中間那個(gè)藍(lán)點(diǎn)）拉到left center（左邊中間）；
關(guān)于代碼控制血條變化
主要思路是當(dāng)血條變化時(shí)，遮罩層減少，使血條變短；
官方解釋：遮罩是 UI 系統(tǒng)中的一種技術(shù)，利用這種技術(shù)可以將一張圖像用作其他圖像的“遮罩”。我們可以看成是第一張圖像充當(dāng)一個(gè)模板。第二張圖像中與第一張圖像重疊的部分是可見(jiàn)的，但另一部分則是隱藏的
創(chuàng)建一個(gè)UI腳本下掛到我們的HealthFrame
public class UIHealthBar : MonoBehaviour
{
// Start is called before the first frame update
//創(chuàng)建共有靜態(tài)對(duì)象。獲取血條本身
public static UIHealthBar Instance { get; private set; }
public Image Mask;
float orignalSize;
private void Awake()
{
Instance = this;
}
void Start()
{
//設(shè)置靜態(tài)實(shí)例為當(dāng)前類對(duì)象
orignalSize = Mask.rectTransform.rect.width;
}
//創(chuàng)建一個(gè)方法，用來(lái)設(shè)置現(xiàn)在mask遮罩層的寬度
public void SetValue(float value)
{
//設(shè)置更改mask遮罩層寬度，根據(jù)傳輸過(guò)來(lái)的寬度進(jìn)行更改
Mask.rectTransform.SetSizeWithCurrentAnchors(RectTransform.Axis.Horizontal, orignalSize * value);
}
}
之后在我們主角血量變化函數(shù)中調(diào)用即可
UIHealthBar.Instance.SetValue(currentHealth / (float)maxHealth);
簡(jiǎn)易的音頻使用
這里我們就會(huì)用到 Audio Source的組件
下面說(shuō)起來(lái)比較重要的
AudioClip——加入的音樂(lè)素材
Mute——禁音
volume——音量
Play on awake——在游戲開(kāi)始時(shí)播放
Spatial Blend 2d——3d 2d就是全圖播放都是一個(gè)音量，可以用作bgm，越拉向3d就越立體，會(huì)出現(xiàn)方位和位置距離的差別
底下那個(gè)函數(shù)，指的就是最小距離1時(shí)音量達(dá)到最大，500時(shí)聽(tīng)不見(jiàn)音樂(lè)；
關(guān)于代碼控制音頻
和使用其他組件一樣
- AudioSource audioSource;
- 在start中實(shí)例化 audioSource = GetComponent();
3.播放即可，clip即為音頻，需要可以自己公開(kāi)一個(gè)加進(jìn)去；
public void PlaySound(AudioClip clip)
{
//可以有第二個(gè)參數(shù)音量0-1.0f
audioSource.PlayOneShot(clip);
}
關(guān)于NPC的氣泡實(shí)現(xiàn)
這里主要使用了TextMeshPro 創(chuàng)建方式也是在UI中找到就行
下為結(jié)構(gòu)圖
Dialog：canvas
Image：外面那個(gè)背景畫(huà)
Text：TextMeshPro
問(wèn)題1：關(guān)于字?jǐn)?shù)過(guò)長(zhǎng)會(huì)溢出
在overflow中改為page即可
問(wèn)題2：無(wú)法顯示中文：
需要自己下字體包，或者去文章底部看老師的gitee中有下載鏈接
問(wèn)題3：如何翻頁(yè)：
使用代碼控制，下附代碼
腳本掛給NPC，事件發(fā)起交給主角；
public class NonPlayerCharacter : MonoBehaviour
{
public float displaytime=4.0f;
public GameObject dialogBox;
float timerDisplay;
public GameObject dlgTMP;
TextMeshProUGUI tmTxtBox;
int totalPages;
int currentPage = 1;
void Start()
{
dialogBox.SetActive(false);
timerDisplay = -1.0f;
tmTxtBox = dlgTMP.GetComponent<TextMeshProUGUI>();
}
private void Update()
{
totalPages = tmTxtBox.textInfo.pageCount;
if (timerDisplay >= 0)
{
timerDisplay -= Time.deltaTime;
if (Input.GetKeyUp(KeyCode.Space))
{
if (currentPage < totalPages)
{
currentPage++;
}
else
{
currentPage = 1;
}
tmTxtBox.pageToDisplay = currentPage;
}
}
else
{
dialogBox.SetActive(false);
}
}
public void DisplayDialog()
{
timerDisplay = displaytime;
dialogBox.SetActive(true);
}
關(guān)于和NPC的互動(dòng)實(shí)現(xiàn)
使用射線碰撞對(duì)象實(shí)現(xiàn)，我們的NPC對(duì)象需要放到NPC層（自己創(chuàng)一個(gè)layer）；文章來(lái)源：http://www.zghlxwxcb.cn/news/detail-400145.html
if (Input.GetKeyDown(KeyCode.F))
{
RaycastHit2D hit =Physics2D.Raycast(rigidbody2dRuby.position+Vector2.up*0.2f,lookDirection,1.5f,LayerMask.GetMask("NPC"));
if(hit.collider!=null)
{
Debug.Log($"對(duì)象是{hit.collider.gameObject}");
NonPlayerCharacter npc = hit.collider.GetComponent<NonPlayerCharacter>();
if (npc != null)
{
npc.DisplayDialog();
}
}
}
鏈接：chutianbo老師關(guān)于UI的介紹
鏈接：chutianbo老師字體下載文章來(lái)源地址http://www.zghlxwxcb.cn/news/detail-400145.html
到了這里，關(guān)于unity初學(xué)6——簡(jiǎn)易的UI制作（血條制作）和音頻加入以及NPC的對(duì)話氣泡（2d）的文章就介紹完了。如果您還想了解更多內(nèi)容，請(qǐng)?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
