Unity初心者6 - シンプルなUI制作(ブラッドバー制作)と音声追加とNPCのセリフ吹き出し(2d)

この記事はchutianbo先生のノートから学ぶためのもので、ステーションbへのリンクです

UI作成

1. Hierarchy UIの空白部分を右クリック➡canvas
ここに画像の説明を挿入
2. ここで使う素材は3つ
ここに画像の説明を挿入
ここに画像の説明を挿入
階層構造
ここに画像の説明を挿入
UI: 初期キャンバス
キャラ: アバター
Mask: マスクレイヤー
healthbar: 血液バー
ここでまずUIに戻ります(つまり, 最初に作成された Canvas )
We should only use the render mode render Mode at beginning. それには 3 つのモードがあります:
Screen Space - Overlay: これはデフォルトのモードで、Unity は常に UI を描画することができます。ゲーム。ほとんどのアプリケーションは、すべての情報が利用できるように UI が常に最前面にあることを期待しているため、このパターンを使用します。
スクリーン スペース - カメラ: このモードは、カメラに合わせた平面に UI を描画します。平面は常に画面全体に表示されるようにサイズ設定されているため、カメラを動かすと平面がカメラと共に移動し、オーバーレイ グラフィックと同じ形状が表示されます。ただし、平面は画面の上ではなくワールドに描画されるため、ワールド内のオブジェクトを UI の上に描画できます。
ワールド スペース: このモードでは、世界中のどこにでも平面が描画されます。たとえば、この平面をゲームのコンピューター画面として使用したり、壁として使用したり、キャラクターの上に置いたりすることができます。これは、UI が距離とともに小さくなる 3D ゲームでより便利です。

3. 引っ張った後、画像が一緒に変化しないことについて.ここでは、アバターの周りの小さな三角形である
アンカー ポイントを使用する必要があります。 4.最初にレイヤーをマスクしますステップ2ステップ3これのチェックを外します。もちろん、アンカーポイントを設定することを忘れないでくださいここで、alt + 右下隅のものを使用して、親オブジェクトを直接塗りつぶし、血液バーをマスクに塗りつぶすことができます層ここに画像の説明を挿入



ここに画像の説明を挿入

ここに画像の説明を挿入

ここに画像の説明を挿入


ここに画像の説明を挿入
ここに画像の説明を挿入

5.バグタイム
これを行うと、後でコードを使用してマスクレイヤーの縮小を制御すると、血液バーを右に縮小するプロセスではなく、両端が縮小します。
そのため、マスクのピボット (中央の青い点) を左中央 (左中央) に引っ張ることを忘れないでください。

コード制御の血液バーの変更について

主なアイデアは、血液バーが変化すると、マスク レイヤーが縮小されて血液バーが短くなるというものです;
公式説明: マスクは UI システムのテクノロジであり、このテクノロジを使用して、1 つの画像を「マスク」として使用できます。他の画像カバー」. テンプレートとして機能する最初の画像と考えることができます。最初の画像に重なる 2 番目の画像の部分は表示されますが、他の部分は隠されています
HealthFrame にフックする UI スクリプトを作成します

public class UIHealthBar : MonoBehaviour
{
    // Start is called before the first frame update
    //创建共有静态对象。获取血条本身
    public static UIHealthBar Instance { get; private set; }
    public Image Mask;
    float orignalSize;
    private void Awake()
    {
        Instance = this;
    }
    void Start()
    {
        //设置静态实例为当前类对象
        orignalSize = Mask.rectTransform.rect.width;
    }
    //创建一个方法,用来设置现在mask遮罩层的宽度
    public void SetValue(float value)
    {
        //设置更改mask遮罩层宽度,根据传输过来的宽度进行更改
        Mask.rectTransform.SetSizeWithCurrentAnchors(RectTransform.Axis.Horizontal, orignalSize * value);
    }
    
}

次に、主人公の血液量変更関数で呼び出します

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

簡単なオーディオの使用法

ここでは Audio Source のコンポーネントを使用します.
ここに画像の説明を挿入
以下はより重要です
AudioClip - 追加された音楽素材
Mute - ミュートの
音量 - 音量Play on awake -
ゲーム開始時の
Spatial Blend 2d - 3d 2d は全体像の再生はbgmとして使用できるボリューム. 3Dに向かって引っ張るほど立体的になり、向きと位置の距離に違いが生じます. 以下の関数は、最小距離が1のときにボリュームが最大になることを意味します
. 、距離が 500 になると音楽が聞こえなくなります。

オーディオを制御するコードについて

他のコンポーネントと同様に

  1. AudioSource オーディオソース;
  2. Instantiate audioSource = GetComponent() in start;
    3. 再生するだけです。クリップはオーディオです。1 つを公開して追加する必要があります。;
    public void PlaySound(AudioClip clip)
    { //2 番目のパラメーター volume 0- を持つことができます1.0 f audioSource.PlayOneShot(クリップ); }


NPCへのバブルの実装

ここに画像の説明を挿入
TextMeshPro は主にここで使用されます. 作成方法は UI にもあります. 以下は
構造図です
ここに画像の説明を挿入
ダイアログ: キャンバス
イメージ: 外部の背景ペイント テキスト
: TextMeshPro

質問 1: 単語カウントが長すぎると、オーバーフローします.
ここに画像の説明を挿入
オーバーフローのページに変更するだけです.
質問 2: 中国語を表示できない:
フォント パッケージを自分でダウンロードするか、記事の下部に移動して、教師の gitee のダウンロード リンクを参照してください.
質問 3: ページをめくる方法:
コード コントロールを使用し、コード
スクリプトが NPC に添付され、イベントの開始が主人公に渡されます。

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

    }

NPCとのやり取りについて

光線衝突オブジェクトを使用して達成するには、NPC オブジェクトを NPC レイヤーに配置する必要があります (自分でレイヤーを作成します)。

 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 の紹介
リンク: chutianbo 先生のフォントのダウンロード

おすすめ

転載: blog.csdn.net/jijikok/article/details/126067360