UnityでCanvasに線を描く(Unity draw line on canvas)

UnityでCanvasにImageを張り付けたので、その上に線を描きたい。これが意外と大変でdraw.line()みたいな簡単に使える関数がない。三角形なら簡単にかけるので、細長い三角形を2つ書いて直線っぽくする。

1. HierarchyにあるCanvasをクリック、①のちょっと左上にある＋ボタンを押して、Create Empty Child を選んで、GameObjectを追加する。
2. GameObjectをクリックして、Inspectorを表示。
3. ②をクリックして、Shiftキーを押しながら（選択肢が変わる）Bottom, leftを選ぶ。Pos X,Y,Z を0にする。
4. Projectにある③Assetsをクリック、Assetsのちょっと左上にある＋ボタンを押して、C# Script を選んで、NewBehaviourScriptを追加する。
5. ④のスライダーを一番左にする（NewBehaviourScriptの文字を全部見たい）
6. NewBehaviourScriptをダブルクリックして、Visual Studio 2022を起動して、NewBehaviourScript.csを表示する。
7. 自動で作られるコードは使わないので、全部消して、以下に書き換えて保存する。
8. Unityの編集画面に戻って、⑤の「Add Component」ボタンをクリック、虫眼鏡(検索)の欄にCanvas Rendererと入れて、選択肢に出る「Canvas Renderer」を追加する。
9. AssetsにあるNewBehaviourScript⑥をドラッグして、HierarchyにあるGameObject⑦にドロップする。

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

public class NewBehaviourScript : MaskableGraphic
{
    static NewBehaviourScript self;

    NewBehaviourScript()
    {
        self = this;
    }

    // このクラスの外から再描画したい場合はNewBehaviourScript.redraw()を呼び出す
    static public void redraw()
    {
        print("redraw");
        self.SetAllDirty();
    }

    protected override void OnPopulateMesh(VertexHelper vh)
    {
        vh.Clear();
        UIVertex vertex = UIVertex.simpleVert;
        vertex.color = Color.red;

        // 左下から、右上に斜めの赤い線を書く

        // 1番目の三角形
        vertex.position = new Vector2(0, 0); // 左下 
        vh.AddVert(vertex);
        vertex.position = new Vector2(canvas.pixelRect.width+2, canvas.pixelRect.height);
        vh.AddVert(vertex);
        vertex.position = new Vector2(canvas.pixelRect.width-2, canvas.pixelRect.height);
        vh.AddVert(vertex);

        // 2番目の三角形
        vertex.position = new Vector2(2, 0);
        vh.AddVert(vertex);
        vertex.position = new Vector2(-2, 0);
        vh.AddVert(vertex);
        vertex.position = new Vector2(canvas.pixelRect.width, canvas.pixelRect.height); // 右上
        vh.AddVert(vertex);

        // 細長い三角形を２つ書いて直線にする
        vh.AddTriangle(0, 1, 2); // 三角形しか書けない
        vh.AddTriangle(3, 4, 5); // 三角形しか書けない
    }
}

10. HierarchyにあるGameObjectをクリックして、Inspectorを表示すると、Canvas Rendererの下にNew Behaviour Script (Script)が追加されているのを確認する。
11. 画面中央の上にある▶（実行ボタン）を押して、アプリを実行して、目的の画像に斜めの赤い線が表示されるのを確認する。
12. Visual Studio 2022 のソリューションエクスプローラーで、NewBehaviourScript.csを右クリックして、名前の変更を選ぶ。
13. RedLineOnCanvas.csに変更して、Enterで確定する。「すべての参照に対して、名前を変更しますか？」と問われるので、「はい」を選ぶ。
14. これでUnity側のコードも含めて、C#クラス名まで全部の名前が変更される。
15. HierarchyにあるGameObjectをクリックして、①のちょっと左上にある＋ボタンを押して、UI→Legacy→Textを選択する→Text(Legacy)が追加される。
16. ②をShiftを押しながらクリック→bottom, leftを選ぶ。
17. ③のPosX, PosY, Pos Zをすべて0にする。 18. ④のFont StyleをBoldにする(ラインの上に文字があることが分かりやすくなる）。
19. 画面中央の上にある▶（実行ボタン）を押して、アプリを実行して、斜めの赤い線の上に白文字のNew Textが表示されるのを確認する。