Unity Beginner 6 - Simple UI production (blood bar production) and audio addition and NPC dialogue bubbles (2d)

The text is for learningchutianbo老师的笔记,链接b站

UI的创建

1.右键Hierarchy空白处 UIcanvas

2.A total of three materials are used here


层级结构

UI：初始画布
characters：头像
Mask：遮罩层
healthbar：血条
Here we go back firstUI（That is, it was created in the beginningCanvas）
The only thing we should use to start with is the render moderender Mode,He has three modes
Screen Space - Overlay：这是默认模式,可以让 Unity Draw on the top layer that is always in the game UI.Most applications use this mode,because they wish UI Always on top to provide all information.
Screen Space - Camera：这种模式在与摄像机对齐的平面上绘制 UI.平面的大小确定为始终填充整个屏幕,这样你就可以四处移动摄像机,And the plane will move with the camera,从而显示与 Overlay 图形相同的形状.但是,由于平面是在世界中绘制的,而不是在屏幕上层绘制的,So objects in the world can be drawn in UI 的上层.
World Space：这种模式可在世界中的任何位置绘制平面.例如,你可以将此平面用作游戏中的计算机屏幕,或者用作墙壁,或者放在角色的上层.这在 3D 游戏中更有用,因为 UI 会随着距离变小.

3.About the image does not change with it after pulling
Anchors are used here
It's the little triangle around the head,It can make our child object change with the parent object at the fixed position of the parent object
4.遮罩层
第一步

第二步

第三步

把这个勾去掉
Of course, remember to set the anchor point well

这里
可以使用alt+The one in the lower right corner directly fills the parent object,The blood bar is filled into the mask layer

5.bug时间
这样子做的话,Reduction at both ends occurs when you use code to control the reduction of the mask layer later,Rather than the process of reducing the blood bar to the right.
所以记得把Mask的pivot（It's the blue dot in the middle）拉到left center（左边中间）;

Changes in the code to control the health bar

The main idea is when the health bar changes,The mask layer is reduced,Makes the blood bar shorter;
官方解释：遮罩是 UI A technology in the system,Using this technique, one image can be used as another image“遮罩”.We can think of the first image as a template.The portion of the second image that overlaps the first image is visible,But another part is hidden
创建一个UIThe script hangs to oursHealthFrame

public class UIHealthBar : MonoBehaviour
{
    // Start is called before the first frame update
    //Create common static objects.Get the health bar itself
    public static UIHealthBar Instance { get; private set; }
    public Image Mask;
    float orignalSize;
    private void Awake()
    {
        Instance = this;
    }
    void Start()
    {
        //Set the static instance to the current class object
        orignalSize = Mask.rectTransform.rect.width;
    }
    //创建一个方法,Used to set the presentmask遮罩层的宽度
    public void SetValue(float value)
    {
        //设置更改mask遮罩层宽度,Change according to the transmitted width
        Mask.rectTransform.SetSizeWithCurrentAnchors(RectTransform.Axis.Horizontal, orignalSize * value);
    }
    
}

Then call it in our protagonist's blood volume change function

  UIHealthBar.Instance.SetValue(currentHealth / (float)maxHealth);

Easy audio usage

这里我们就会用到 Audio Source的组件

The following is more important
AudioClip——Added music material
Mute——禁音
volume——音量
Play on awake——Played at the start of the game
Spatial Blend 2d——3d 2dThat is, the whole image is played at the same volume,可以用作bgm,more and more3dmore three-dimensional,Differences in bearing and location distance will appear
the function below,Refers to the minimum distance1when the volume reaches maximum,500Can't hear music;

About code to control audio

as with any other component

1. AudioSource audioSource;
2. 在start中实例化 audioSource = GetComponent();
   3.播放即可,clipis audio,Need to be able to add one to the public;
   public void PlaySound(AudioClip clip)
   {
   //There can be a second parameter volume0-1.0f
   audioSource.PlayOneShot(clip);
   }

关于NPCbubble realization

这里主要使用了TextMeshPro The way to create is also thereUIJust find it
Below is the structure diagram

Dialog：canvas
Image：The background painting outside
Text：TextMeshPro

问题1：If the word count is too long, it will overflow

在overflow中改为page即可
问题2：无法显示中文：
You need to download the font package yourself,Or go to the bottom of the article to see the teacher'sgitee中有下载链接
问题3：如何翻页：
使用代码控制,下附代码
脚本挂给NPC,The event initiation is handed over to the protagonist;

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);

    }

关于和NPCinteractive realization

Implemented using a ray collider object,我们的NPC对象需要放到NPC层（自己创一个layer）;

 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($"对象是{hit.collider.gameObject}");
                NonPlayerCharacter npc = hit.collider.GetComponent<NonPlayerCharacter>();
                if (npc != null)
                {
                    npc.DisplayDialog();
                }
            }
        }

链接：chutianbo老师关于UI的介绍
链接：chutianboTeacher font download