Unity AssetStoreまとめ

アセットストア日替わりタイムセールの記事を書いていきます。

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

f:id:assetsale:20160628220511j:plain 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));
}

f:id:assetsale:20160628224236p:plain

最初のLine.jsと比べるとLineタイプが違うみたいです。

 

複数のラインを引いてみた

Line.jsで複数のラインを引いても描画回数(Bathes)は1回で済むため(2本以上でも)、負荷のかからない設計になっています。ここまではUnityの「VectorLine」と同じですね。

f:id:assetsale:20160628235118p:plain

これを試したい人は、この2行をループでもいいし、以下に複数コピペすればOKです。

linePoints.Add (Vector2(0, Random.Range(0, Screen.height)));

linePoints.Add (Vector2(Screen.width-1, Random.Range(0, Screen.height)));

 

Vectrosityの記事は二部構成となっております。

第二部ではデモを見てどのように作られているかを調査してみました。

18ドルの計算結果 (1ドル 102.3900 円)

18ドル は、 1,843円

定価29.95ドルなら、3,066円