Vectrosity　Unityでラインや曲線をスクリプトで引いてみよう！（基本パート）

f:id:assetsale:20160628220520j:plain

今日のアセット

Vectrosity

$29.95 => $18 40%OFF

Vectrosityは2010年、アセットストアがオープンしてすぐに登場したラインに関するパイオニアです。

Unity5.x以前（VectorLine搭載前）のUnityでは「ライン」を引く方法は、「ラインレンダラー」か「テクスチャー（ライン画像を貼り付け）」が思いつきますね。

Unity - マニュアル: ラインレンダラー

当時は、ラインを引くためのアセットとしてVectrosityが非常に人気でした。

今のUnity5には、UnityUIにVectorLineが搭載されている為、手軽にラインが引けるようになったものの、ちょっと物足りない･･･。※Unity5.3.xを使用

追記 2016/6/29

[VectorLine]クラスはUnityに搭載されていない事が分かりました。

ご迷惑お掛けしてしまい、申し訳ありませんでした。

f:id:assetsale:20160629002413p:plain

↑Unity標準の「VectorLine」で1本のラインに対して接続数を3で色と太さを指定

今回は、既に持っているアセットなので、2016年6月28日時点の最新バージョン（5.3）で試してみました。

まずは、パッケージ内容を確認。

注：Vectrosity 5はUnity 5.2.2以降を必要とします。Vectrosity 4も同梱されています。こちらはUnity 4.6-Unity 5.1で動作します。

4はoldタイプなので、Vectrosity5Demosのデモをこれから見ていきます。

f:id:assetsale:20160628233350p:plain

※Unityのバージョンによって「Vectrosity5-Unity5.2.2」か「Vectrosity5-Unity5.3」のどちらかのパッケージを入れておくこと。

シンプルそうなタイトル名のデモ「_Simple2DLine」をちょっと試してみた。

（面白そうなのが沢山ありますね）

f:id:assetsale:20160628233500p:plain

MainCameraのみのシーンで、カメラにアタッチされた3つのソースコードを試すことが出来ます。

f:id:assetsale:20160628233606p:plain

UnityJavaのソースコードになっています。

上から順に見ていきましょう。

Line.js

// Use this method if you need more control than you get with Vector.SetLine
#pragma strict
import Vectrosity;
import System.Collections.Generic;

function Start () {
	// Make a Vector2 list; in this case we just use 2 elements...
	var linePoints = new List.<Vector2>();
	linePoints.Add (Vector2(0, Random.Range(0, Screen.height)));				// ...one on the left side of the screen somewhere
	linePoints.Add (Vector2(Screen.width-1, Random.Range(0, Screen.height)));	// ...and one on the right
	
	// Make a VectorLine object using the above points, with a width of 2 pixels
	var line = new VectorLine("Line", linePoints, 2.0);
	
	// Draw the line
	line.Draw();
}

f:id:assetsale:20160628224400p:plain

ちなみにInspectorの画面はこちら

f:id:assetsale:20160628234305p:plain

なるほど、 Unity標準の「VectorLine」をスクリプトで呼び出して描画してるみたいです。

UniformTexturedLine.js

#pragma strict
import Vectrosity;
import System.Collections.Generic;

var lineTexture : Texture;
var lineWidth = 8.0;
var textureScale = 1.0;

function Start () {
	// Make a Vector2 list with 2 elements...
	var linePoints = new List.<Vector2>();
	linePoints.Add (Vector2(0, Random.Range(0, Screen.height/2)));				// ...one on the left side of the screen somewhere
	linePoints.Add (Vector2(Screen.width-1, Random.Range(0, Screen.height)));	// ...and one on the right
	
	// Make a VectorLine object using the above points, with the texture as specified in the inspector, and set the texture scale
	var line = new VectorLine("Line", linePoints, lineTexture, lineWidth);
	line.textureScale = textureScale;
	
	// Draw the line
	line.Draw();
}

f:id:assetsale:20160628234606p:plain

テスクチャーを連続的に描画するタイプのラインです。

f:id:assetsale:20160628231927p:plain

Line Textureに入ってるのは、付属のテクスチャー「dot」

こちらもUnity標準の「VectorLine」で動作しています。

ReallyBasicLine.js

#pragma strict
import Vectrosity;

function Start () {
	// Draw a line from the lower-left corner to the upper-right corner
	VectorLine.SetLine (Color.white, Vector2(0, 0), Vector2(Screen.width-1, Screen.height-1));
}