多角形のメッシュを使ってレーダーチャートを作れたが、塗りつぶしではなくて線で表現したいこともある。
今回は多角形の線を引くための２つの方法を覚書。
１．線状のメッシュを使う
２．LineRendererを使う
線状のメッシュ作成
前回のメッシュ作成部分(makeParams関数)を変更する。
メッシュで線を表現するために多角形の座標と、それより微妙に小さい多角形の座標を取得する。
そして２つの多角形の座標から三角形をつなげて線にする。
メッシュの法線がカメラの方を向くように三角形は時計回りで作る。
プログラムはこんな感じ。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 |
//線状の多角形メッシュ void makeParams2(float[] values){ List<Vector3> vertList = new List<Vector3>(); List<int> triList = new List<int>(); for(int n=0; n<nPoly; n++){ float _x = values[n]/max*Mathf.Cos(n*2*Mathf.PI/nPoly); float _y = values[n]/max*Mathf.Sin(n*2*Mathf.PI/nPoly); float _x2 = Mathf.Abs(_x) -0.01f; if(_x<0)_x2*=-1f; float _y2 = Mathf.Abs(_y) -0.01f; if(_y<0)_y2*=-1f; vertList.Add(new Vector3(_x,_y)); vertList.Add(new Vector3(_x2,_y2)); if(n!=nPoly-1) { triList.Add(2*n );triList.Add(2*n+1);triList.Add(2*n+2); triList.Add(2*n+1);triList.Add(2*n+3);triList.Add(2*n+2); } else {//last triList.Add(2*n );triList.Add(2*n+1);triList.Add(0); triList.Add(2*n+1);triList.Add(1);triList.Add(0); } } vertices = vertList.ToArray(); triangles = triList.ToArray(); } |
前回の背景にこれで線状の多角形をあわせるとこうなる。
 |
 |
座標の問題で線の角度によって太さが微妙に違うが、レーダーチャートっぽくなった。
線の太さを一定にするには多角形の頂点付近の4点を使ってメッシュを作ればいい。
LineRenderer使用
Unityには空間に直線を書くためにLineRendererコンポーネントが用意されています。
これを使ってレーダーチャートを書いてみます。
スクリプトから弄る場合は Unity5.4 から Unity5.5 で結構変わってます。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
//空間に線を引く Quaternion q = Quaternion.Euler(0,0,90); void drawLine(float[] values,Color color){ GameObject go = new GameObject("Line"); LineRenderer lineRenderer = go.AddComponent<LineRenderer>(); lineRenderer.SetVertexCount(nPoly+2);//5.5以降非推奨 lineRenderer.SetWidth(0.05f,0.05f); //5.5以降非推奨 lineRenderer.SetColors(color,color); //5.5以降非推奨 lineRenderer.material.shader = Shader.Find( "Sprites/Default" ); float size = 2.8f; for(int i=0; i<nPoly+2; i++){ int n = i % nPoly; //2回分余分にまわす float _x = values[n]/max*Mathf.Cos(n*2*Mathf.PI/nPoly); float _y = values[n]/max*Mathf.Sin(n*2*Mathf.PI/nPoly); lineRenderer.SetPosition(i, q*new Vector3(_x,_y)*size); } } |
size が 2.8f なのは背景の Quad の localScale が 2.8f のため。
Quaternion で回転させているのも背景にあわせた処理。
2回分余計にまわすのは線の端部分に違和感が出ないようにするため。
次のように呼び出す。
|
1 2 3 4 |
max = 6.9f; nPoly = 6; drawLine(new float[]{4,1,5,3,5,5}, Color.red); drawLine(new float[]{3,4,2,5,2,5}, Color.yellow); |
すると結果はこんな感じになる。
 |
 |
見た目も処理の簡潔さもこれが一番だと思う。
ただし Line Renderer はあくまで３次元空間上に線を引く機能なので、思い通りにするにはちゃんと計算しないといけない。