Vectrosityで線を描こう

今回はちょっと線がほしくなったので久しぶりに
<a href="https://www.assetstore.unity3d.com/jp/#!/content/82" target="_blank">Vectrosity</a>
のお世話になることにしました。

#何ができるか
このアセット線を描いたり、できます。四角や円もできます。
また、線にColliderをつけることもできます。線にテクスチャーを設定することも可能です。
他にも3Dのモデルなどの頂点情報をとってワイヤーフレームみたいな表示にしたり、いろいろできます。

##とりあえず線を表示する
メニューからなりヒエラルキーからなりVectorLineを選択
<img width="385" alt="スクリーンショット 2016-07-07 21.41.36.png" src="https://qiita-image-store.s3.amazonaws.com/0/46444/5cf59dae-d9c2-7bea-b151-988cb1941272.png"><img width="257" alt="スクリーンショット 2016-07-07 21.41.43.png" src="https://qiita-image-store.s3.amazonaws.com/0/46444/d630a005-b240-3336-9d93-e0e9f4f34a93.png">

すると画面上に線が表示されます
<img width="229" alt="スクリーンショット 2016-07-07 21.38.16.png" src="https://qiita-image-store.s3.amazonaws.com/0/46444/79d23452-a15c-bf56-dcad-0eed9912add1.png">

あとはこの線の設定はインスペクタで。
線の色やつなぎ目の形など設定できます。
<img width="561" alt="スクリーンショット 2016-07-07 21.38.50.png" src="https://qiita-image-store.s3.amazonaws.com/0/46444/5dc30a31-dee2-a644-76fe-8cf86a7758d1.png">

いちなどはScene上で編集できます。
ヒエラルキーでラインをクリックして、あとはドラッグで移動できます。
shiftキー+クリックでポイント追加 ccontrol+クリックでポイント削除
![Vectrosity1.gif](https://qiita-image-store.s3.amazonaws.com/0/46444/0fab7206-b7a6-03d1-b9ba-6434448fdc48.gif)

また、この線uguiのマスクでマスクすることもできます
後ろの白いのがマスク用の画像。これをuguiのマスクの子オブジェクトにlineを入れてあげるとマスクがききます。
<img width="200" alt="スクリーンショット 2016-07-07 21.54.46.png" src="https://qiita-image-store.s3.amazonaws.com/0/46444/5adf215d-46c1-045f-a32b-16f081465a20.png"><img width="200" alt="スクリーンショット 2016-07-07 21.54.46.png" src="https://qiita-image-store.s3.amazonaws.com/0/46444/5a5fa3e2-aceb-05eb-53d4-535d5d24db78.png">

##コードから線を描く
コードからから線を描くときはまずはこれを忘れずに

```csharp
using Vectrosity;
```

それからシンプルな線は

```csharp
VectorLine.SetLine (Color.green, new Vector2(0, 0), new Vector2(Screen.width-1, Screen.height-1));
```
<img width="200" alt="スクリーンショット 2016-07-07 22.05.56.png" src="https://qiita-image-store.s3.amazonaws.com/0/46444/2dd24adc-87ed-5123-a5aa-a6a8c4fa9c05.png">

配列でも渡せるよ

```charp
Vector2[] pointList = new Vector2[Random.Range(5, 10)];
for(int i = 0; i < pointList.Length; i++)
{
	pointList[i] = new Vector2(Random.Range(0f, Screen.width), Random.Range(0f, Screen.width));
}
VectorLine.SetLine (Color.green, pointList);
```

<img width="200" alt="スクリーンショット 2016-07-07 22.13.24.png" src="https://qiita-image-store.s3.amazonaws.com/0/46444/e198042e-07b0-6e46-df91-c928dbc0ead8.png">

SetLineの戻り値VectorLineを変数などに入れておけば、後から位置の変更なども可能です

```csharp

	VectorLine myLine;

	void Start ()
	{
		Vector2[] pointList = new Vector2[Random.Range(5, 10)];
		for(int i = 0; i < pointList.Length; i++)
		{
			pointList[i] = new Vector2(Random.Range(0f, Screen.width), Random.Range(0f, Screen.width));
		}
		myLine = VectorLine.SetLine (Color.green, pointList);
	}

	void Update () {
		myLine.points2[1] = new Vector2(Random.Range(0f, Screen.width), Random.Range(0f, Screen.width));
		myLine.Draw();
	}
```

線を更新したときはDraw()を呼ばないと更新されません。
<img width="200px" src="https://qiita-image-store.s3.amazonaws.com/0/46444/576c1b7b-fb52-9683-7fc6-416ba2e5d633.gif">

消すときは

```csharp
VectorLine.Destroy (ref myLine);
```
で消えます

他にも

- 四角:makeRect
- 角丸:MakeRoundedRect
- 円:MakeCircle
- 楕円:MakeEllipse
- 弧：MakeArc
- 曲線:MakeCurve

など色々あります。

##さてさて作りたかったものをつくろう
私が作りたいのはmayaのUIのこれ。
スマホとかだとやっぱりメニューコマンドの選択は楽にしたいということで、
これを作ってみたく、これの線のところをVectrosityでやろうかと思いました
<img width="400px" src="https://qiita-image-store.s3.amazonaws.com/0/46444/b641d228-4092-44a0-8526-aae4be01894a.gif">

だいぶやっつけですが現状はこんな感じ。
<img width="400px" src="https://qiita-image-store.s3.amazonaws.com/0/46444/0a92a575-2ca7-22da-1a37-55b4a0f62d78.gif">
ちなみになつかしのスーパーマリオRPGみたいな戦闘を作りたくなって、
スマホでタップしてメニュー選択はだるいと思いこうすることに。

ちなみにこのVectrosityのラインなどはuGUIだとCanvas Overlayにしか対応していないので注意
ちょっとやっつけだけど一旦こんな感じでここまで。
<img width="400px" src="https://qiita-image-store.s3.amazonaws.com/0/46444/7a98013c-2fff-c3cd-cbe2-15daadaf9f46.gif">