ゲームの日々の記録などを折れ線グラフで表示したいと思いました。それで色々調べているのですが、結構大がかりな感じでした。
スクリーン上にUnityで線を引く方法は意外と面倒臭いようです。スクリーンの位置を渡して線を描くような関数が用意されていないからです。
uGUIを使って細い四角形を用いてもグラフは描けるし、LineRendererやGLを使っても線が描けるようです。
UI上に線を描くようにすると、UI以外では使えません。Imageに四角を描くようにしていくつも使って折れ線を表現することができます。可能ですが、元々UIをそういった目的に使うものではないのでいまいちです。
GLは線を描くことが関数で行いやすく簡単でしたが、特定のカメラ上でのみ描画するといったことができません。GLを使うとワールド空間内に線を直接作るようなことになります。(表示位置などを思い通りにいじるためにはCGの描画における行列の知識が必要です。Unityを使って楽にゲームを作るということからは逸脱します。GLが低レベルのグラフィックスライブラリということなので、難しくなるため初心者向けではないです。)
下の図はGLの説明のところにあったExampleClassを適当なゲームオブジェクトにアタッチして表示してみたものです。ゲームオブジェクトの座標位置を中心に放射状に線を描くというサンプルです。
線を引くならやはりLineRendererが良い感じでした。LineRendererは3D空間に線を引く機能なのですが、2Dにも使おうと思えば使えます。(2D特化のLineRendererが欲しいところです。)
なのでこれを使って線を描くようにしていきます。LineRendererは線を四角形のポリゴンで作られているようで、ねじれたり線の太さが均一にならないことがグラフを描く上では欠点です。ねじれと太さが均一でないことをなくすには1つのLineRendererで折れ線を描くのではなく、2つの点の間ごとにLineRendererを使い線分の集合で折れ線を書けば解決できます。これによって今度は線のつなぎ目に長方形同士の重なりが起こり、きれいにつながらなくなります。単一のLineRendererはポリゴンがつながっているためにそういったことは起きないのです。
下は1つのLineRendererで3つの点を持つ折れ線を描いたものです。折れ曲がっているところがあるため、太さが均一でないのが見てとれます。
下は2つのLineRendererで3つの点を持つ折れ線を描いたものです。n点の場合は(n-1)個の線分で構成されるため(n-1)個のLineRendererが必要です。太さは均一になりましたが、線同士がつながっているところできれいに表示できません。
グラフでは線が上に表示したよりもずっと細くします。細くなった時どちらのやり方の方が良いかというと後者の方が良いです。細くなっていくと、つながっている部分も小さくなり見えにくくなるため不自然な重なりがわかりにくいのです。線が均一でないのは細くなっても結構わかります。線同士の違いが比較できるため細くなっても問題になります。
折れ線グラフを作るには複数のLineRendererを使って行うのが良さそうです。
Unityでグラフを作ることを調べると有料のアセットがあることもわかったのですが、アプリで儲けるということを考えると有料だと二の足を踏みます。
ただお金で解決できることはお金で解決するのが最も良いのは間違いないです。
私の場合は自分で試してみるということも目的であるので、自分でできそうなら自分でやります。
コメント