unity > Panel上にlinerendererで線を描く実装

動作確認

Unity 5.1.2-f1 on MacOS X 10.8.5

linerendererで線を描く実装は以前行った。
線の描画をPanel上にしたい。

Hierarchy

実行時には以下の階層になるようにしている。

code

v0.1 @ github

drawの主な処理は以下の通り。

	void drawBottomLeftToTopRight(){
		Vector2 pointPos;

		RectTransform panelRect = panel.GetComponent<RectTransform> ();
		float width = panelRect.rect.width;
		float height = panelRect.rect.height;
		
		RectTransform canvasRect = myCanvas.GetComponent<RectTransform> ();

		// Bottom Left
		pointPos = panel.transform.position;
		pointPos.x -= width * 0.5f * canvasRect.localScale.x;
		pointPos.y -= height * 0.5f * canvasRect.localScale.y;
		my2DPoint.Add (pointPos);

		// Top Right
		pointPos = panel.transform.position;
		pointPos.x += width * 0.5f * canvasRect.localScale.x;
		pointPos.y += height * 0.5f * canvasRect.localScale.y;
		my2DPoint.Add (pointPos);
		
		drawGraph ();
	}

結果

若干はみ出ている気がするが、Panel上に線が描けている。

苦労した点

linerendererは（おそらく)World座標での描画。
一方で、PanelはScreen座標なのだろう。

このあたりの座標変換を色々探して試したが、うまくいかなかった。

結局、各値をDebugプリントして、この組み合わせだろう(canvasのscaleに気づいた）というものを見つけて実装できた。

間違っているかもしれないが。

v0.2

v0.2 @ github

とりあえずおなじみのsine, cosineグラフを描画してみた。

わざとPanelの上下位置をずらしているが、中身の描画は成功している。

線がつながっているのに気づいた。このあたりは今後の改善点である。

v0.3

v0.3 @ github

一筆書き状態を解消した。

また、右側のcosineグラフをアニメーションに変更した。
Update()で描画更新している。

---

(2015/09/07 追記)

Canvas.Scaleが2Dプロジェクトと3Dプロジェクトで異なるようだ。
上記の処理を3Dプロジェクトで実行しようとすると、Scaleが大きすぎるのでグラフがPanelサイズに収まらない。

---

(2015/09/07 追記)

新規プロジェクトで上記グラフ描画を実装する時は以下をしないとグラフが表示されません。

Canvas > Canvas > Render Moderを Screen Space - Cameraにしてから、Render Cameraに Main Camera を関連付ける (下図)

v0.4

clearGraph()において、LineGroup(描画線)以外のchild[]も消してしまっていたのを修正した。

v0.4 @ github

v0.5

Panel + graph のHideに対応
http://qiita.com/7of9/items/9c71d76270725b0f90cf