UnityEditor拡張でグラフを描く際に使用したメソッドの解説

# 無意味なグラフを描くだけのUnityEditor拡張を作りました。
* gif

![RadarChart.gif](https://qiita-image-store.s3.amazonaws.com/0/291107/bbea0459-48cf-2fe8-7ac3-5aff1aa5bb91.gif)
![CircularRotation.gif](https://qiita-image-store.s3.amazonaws.com/0/291107/6ed908a1-2e9d-93d2-d37e-e06ea787c753.gif)

* 動画 - Youtube
    * https://youtu.be/5Yl0I-WvVcE

* ↑のような何かそれっぽいことをしているUIが、UnityEditor上でウィンドウとして表示できるエディター拡張です。
* 何もしていないのに何かしているように見せることができます。
* UIを表示するだけでそれ以外の事は特に何もしていません。

# 本題
## 上記のUIを作成する際に使用したメソッドを簡単にまとめました。

### Repaint
* UnityEditor上のOnGUIで描画されているUIは何かしらの更新がないと止まった状態になってしまうので、Repaintで画面の更新を行います。詳しくは既に解説された記事が。
    * EditorWindowのOnGUIを好き勝手呼び出す (https://qiita.com/satanabe1@github/items/451e92082b7657d3ef5b )
* ↓のようにUpdateでRepaintを呼んで更新をかけています。

```csharp
void OnGUI ()
{
    // Do something.
}

void Update()
{
    Repaint();
}
```

---

### Handles
* ここに載っているモノが今回使用した図形を描画するメソッドになっています。
* 元々グラフを描くためのモノではないので少々ややこしい使い方になりますが、Unity標準機能です。
* Handlesポジション関連
    * ポジションのzは小さい数値にしておくのがオススメ。(ニア/ファーで描画されなくなってしまうため)
    * ポジションを指定する際、z座標を0にするかVector2で指定すれば勝手に0になるので、同じ奥行になり、平面の図形を描けます。
* (https://docs.unity3d.com/ScriptReference/Handles.html )

---

### Handles.color
* ハンドルの色を変更することができます。
* 指定した色が、以降のハンドルの色として反映されます。
* 今回は図形の色を指定する際に多く使用しました。
* (https://docs.unity3d.com/ScriptReference/Handles-color.html )

```csharp
Handles.color = Color.magenta;
```

---

### Handles.DrawLine

![image.png](https://qiita-image-store.s3.amazonaws.com/0/291107/0edbdbe8-f400-4550-6051-b361cffa3f0c.png)

* 2点間を結ぶ直線を描画します。
* (https://docs.unity3d.com/ScriptReference/Handles.DrawLine.html ) 

```csharp
Handles.DrawLine(Vector3 p1, Vector3 p2);
```

---

### Handles.DrawLines

![image.png](https://qiita-image-store.s3.amazonaws.com/0/291107/a86cfdaa-6658-eb52-658f-a2ec25e49bf6.png)

* 前述のDrawLineの複数版
* 配列のインデックス0と1で線が引かれ、2と3で線が引かれる
* 線をすべてつなげる場合は配列に入れる際に一工夫必要DrawPolyLineを使ったほうがいいかも
* (https://docs.unity3d.com/ScriptReference/Handles.DrawLines.html )

```csharp
Handles.DrawLines(Vector3[] lineSegments);
```

---

### Handles.DrawSolidArc

![image.png](https://qiita-image-store.s3.amazonaws.com/0/291107/7a9f118d-db16-e713-08f0-42779157de9a.png)

* 内側が塗りつぶされる円弧を描画します。
* normalにVector3.forwardを指定するとEditor拡張ウィンドウ上でのカメラ方向を向くので描画される。
* 以降にも出てくるnormalは基本的にVector3.forwardを指定しておけば、normalで上手くいかず描画されなくなる事はないかと。
* (https://docs.unity3d.com/ScriptReference/Handles.DrawSolidArc.html )

```csharp
Handles.DrawSolidArc(Vector3 center, Vector3 normal, Vector3 from, float angle, float radius);
```

---

### Handles.DrawSolidDisc

![image.png](https://qiita-image-store.s3.amazonaws.com/0/291107/f35362b0-3cde-11d6-c1b7-2fb0be8d866f.png)

* 内側が塗りつぶされる円を描画します。
* (https://docs.unity3d.com/ScriptReference/Handles.DrawSolidDisc.html )

```csharp
Handles.DrawSolidDisc(Vector3 center, Vector3 normal, float radius);
```

---

### Handles.DrawSolidRectangleWithOutline

![image.png](https://qiita-image-store.s3.amazonaws.com/0/291107/dcf9b2ce-e17b-f7b4-9c36-4431c197d858.png)

* 内側が塗りつぶされる四角を描画します。
* アウトラインも描画することができます。
* これをいくつか組み合わせれば多角形を描くことができます。
* この記事の一番上の6角形の内側の色がついてる部分はこれで描画しています。
* (https://docs.unity3d.com/ScriptReference/Handles.DrawSolidRectangleWithOutline.html )

```csharp
Handles.DrawSolidRectangleWithOutline(Vector3[] verts, Color faceColor, Color outlineColor);
```

---

### Handles.DrawWireArc

![image.png](https://qiita-image-store.s3.amazonaws.com/0/291107/ba09d9e4-74ee-0e56-935c-69dd0eb8c9fd.png)

* 線のみの円弧を描画します。
* (https://docs.unity3d.com/ScriptReference/Handles.DrawWireArc.html)

```csharp
Handles.DrawWireArc(Vector3 center, Vector3 normal, Vector3 from, float angle, float radius);
```

---

### Handles.DrawWireDisc

![image.png](https://qiita-image-store.s3.amazonaws.com/0/291107/8a4fdaed-7ccc-695a-4f0f-90483ed2ffa8.png)

* 線のみの円を描画します。
* (https://docs.unity3d.com/ScriptReference/Handles.DrawWireDisc.html)

```csharp
Handles.DrawWireDisc(Vector3 center, Vector3 normal, float radius);
```

---

### Handles.DrawWireCube

![image.png](https://qiita-image-store.s3.amazonaws.com/0/291107/ea8a4617-1b00-c580-c9e7-ee6f2aa2b29d.png)

* 線のみの四角を描画します。
* (https://docs.unity3d.com/ScriptReference/Handles.DrawWireCube.html )

```csharp
Handles.DrawWireCube(Vector3 center, Vector3 size);
```

# 参考・引用サイト
* エディター拡張入門
    * (http://anchan828.github.io/editor-manual/ )
* EditorWindowのOnGUIを好き勝手呼び出す
    * (https://qiita.com/satanabe1@github/items/451e92082b7657d3ef5b )
* Unity の Editor 拡張でインスペクタにグラフを描画する方法を色々調べてみた
    * (http://tips.hecomi.com/entry/2014/06/23/222805 )
* Unity - Scripting API: Handles
    * (https://docs.unity3d.com/ScriptReference/Handles.html )
* UnityのHandleを使用してシーンビューのオブジェクトを操作する 
    * (https://gametukurikata.com/customize/sceneview/handles )

# 最後に
* アセットストア(https://assetstore.unity.com/packages/slug/128527 )に公開しています。
![image.png](https://qiita-image-store.s3.amazonaws.com/0/291107/f2892b37-0f71-dfe9-39c0-1c304ab9ce21.png)