こつこつエンジニア

あわてないあわてない、でも休まずこつこつと。。

UnityでC#スクリプトファイルから色付きの平面四角形(矩形)を描画してみよう!

f:id:madai21:20210720210353j:plain

はじめに

今回はUnityのC#スクリプトファイルから動的に色付きの四角形を描画してみたいと思います。

環境

以下をすべて用意していることを前提とします。

  • Unity Editor 2020.3.12f1 (64-bit)

手順

  1. 3D Projectを作成
  2. 空のGameObjectを作成しComponentを追加する
  3. Materialを作成しGameObjectにアタッチする
  4. スクリプトファイルの編集
  5. 動作確認

1. 3D Projectを作成

Unity Editorを起動して新しいプロジェクトを作成していきます。
テンプレートから3Dを選択し、プロジェクト名をCreateMeshとします。
作成ボタンを押します。
f:id:madai21:20210722135743p:plain
しばらく待つとUnity Editorの画面が表示されます。

2. 空のGameObjectを作成しComponentを追加する

左上のHierarchy画面上で右クリックしてCreate Emptyを選択します。
f:id:madai21:20210722135914p:plain
Hierarchy画面にGameObjectが追加されていると思います。
GameObjectを選択して右のInspector画面でAdd Componentボタンを押します。
f:id:madai21:20210722140040p:plain
検索窓にmeshと入力するとMesh Filterが出てくるのでそれを選択します。
f:id:madai21:20210722140212p:plain
Inspector画面にMesh Filterが追加されていると思います。
もう一度Add Componentボタンを押します。
f:id:madai21:20210722140341p:plain
検索窓にmeshと入力し次はMesh Rendererを選択しましょう。
f:id:madai21:20210722140411p:plain
Inspector画面にMesh Rendererも追加されました。
さらにAdd Componentボタンを押します。
f:id:madai21:20210722140448p:plain
検索窓にnewと入力するとNew Scriptと出てくるのでそれを選択します。
f:id:madai21:20210722140835p:plain
Nameの所にCreateMeshと入力しEnterキーを押して確定します。
f:id:madai21:20210722140537p:plain
これでC#スクリプトファイルができました。
f:id:madai21:20210722141004p:plain

3. Materialを作成しGameObjectにアタッチする

次に下のProject画面で右クリックしてCreate > Materialを選択しましょう。
f:id:madai21:20210722141107p:plain
Material名をCreateMeshと入力しておきます。
f:id:madai21:20210722141249p:plain
作成したMaterialを選択して右のInspector画面でMain MapsのAlbedoの白色の部分をクリックします。
f:id:madai21:20210722141334p:plain
すると以下のような色設定画面が表示されるのでRとGを0にしておきます。
※今回は青色の四角形を作るのでこのような設定にしていますが、違う色が良ければ他の色にして下さい^^
f:id:madai21:20210722141451p:plain
作成したMaterialをGameObjectにアタッチします。
Materialを選択してHierarchy画面上のGameObjectにドラッグ&ドロップします。
f:id:madai21:20210722141953p:plain
アタッチされたか確認してみましょう。
Hierarchy画面のGameObjectを選択します。
右のInspector画面にCreate Mesh(Material)があればアタッチできています^^
f:id:madai21:20210722142226p:plain

4. スクリプトファイルの編集

先ほど作成してたC#スクリプトファイルを編集しましょう。
右のInspector画面でCreate Meshをクリックして見て下さい。
すると下のProject画面上に黄色でスクリプトファイルの居場所を教えてくれます
Project画面上のスクリプトファイル(CreateMesh.cs)をダブルクリックしてVisual Studio上で編集しましょう。
f:id:madai21:20210722142306p:plain
以下の内容に編集します。

using System.Collections;
using System.Collections.Generic;
using UnityEngine;
 
public class CreateMesh : MonoBehaviour
{
    public Material material;
 
    // Start is called before the first frame update
    void Start()
    {
        MeshFilter mf = GetComponent<MeshFilter>();
        MeshRenderer mr = GetComponent<MeshRenderer>();
 
        Vector3[] verts = new Vector3[4];
        int[] trinangles = { 0, 1, 3, 1, 2, 3 };
 
        verts[0] = new Vector3(-5, 5, 5);
        verts[1] = new Vector3(5, 5, 5);
        verts[2] = new Vector3(5, -5, 5);
        verts[3] = new Vector3(-5, -5, 5);
 
        Mesh mesh = new Mesh();
        mesh.vertices = verts;
        mesh.triangles = trinangles;
        mesh.RecalculateNormals();
 
        mf.sharedMesh = mesh;
        mr.sharedMaterial = material;
    }
 
    // Update is called once per frame
    void Update()
    {
         
    }
}

※コードについての解説はこの記事をご覧下さい。
madai21.hatenablog.com
Unity Editorに戻り、右のInspector画面でCreate Mesh(Material)をスクリプトファイルのMaterialの場所にドラッグ&ドロップします。
f:id:madai21:20210722143013p:plain
スクリプトファイルのMaterialの所がCreate MeshとなっていればOKです。
f:id:madai21:20210722143028p:plain
では実行してみましょう。
青色の四角形が描画されていますね^^
f:id:madai21:20210722143124p:plain

おわりに

今回は平面の四角形を描画しましたが、Meshを使うことで三角形や多角形、立体的なオブジェクトを描画することも可能です。