FreelyApps

個人によるアプリ開発の日記です。アプリの収入だけで生活できるようになるのが目標です。UnityでAndroid向けのゲームアプリを作成しています。


    アプリ『トランプ・7並べ』を公開しました。
    Android/iOS https://goo.gl/zsFces

    タグ:LineRenderer

      このエントリーをはてなブックマークに追加 Clip to Evernote
    折れ線グラフを描くための調査」でどうやって線を描くかを検討しました。複数のLineRendererを使って描くのが良さそうだったので、それを簡単に行うためのスクリプトを書きました。スクリーン座標のリストを渡すと、それらの点をつないだ線を描くという機能のものです。 

    機能自体はCameraとLayerを使うと簡単に作れます。このカメラは線を表示するために用意するものであり、メインカメラとは別のものを使います。
    スクリーン座標ではどこに線を描けばいいのかわからないので、CameraコンポーネントのScreenToWorldPointを使ってワールド座標で言うとどこなのかを求めます。このワールド座標を両端の位置とするLineRendererを用意すれば、線を表示する用のカメラのスクリーン上で正しい位置に表示されます。
    graph-scene
    LineRendererは1つにゲームオブジェクトに1つしかつけられないので、上の画像だと3つのゲームオブジェクトが使われています。

    当然、このままだとメインカメラや他のカメラからもLineRendererが見れます。そのためLineRendererが付いているゲームオブジェクトのレイヤーを適当なものに変え、CameraのCullingMaskを設定して線を表示するためのカメラのみが線を見れる状態にて余計に見えないように対処します。(レイヤーを使う方が完璧ですが、カメラの位置をx=10000とかで被らないようにできればそれでも同じ効果があります。)

    ここまでで折れ線グラフを描くことは達成できました。

    これをUnity UIで使いやすくするため、グラフを表示しているカメラの描画先をRenderTextureにしてみました。 RenderTextureはカメラにくっつけて使う特殊なテクスチャです。このテクスチャにカメラは描画結果を書きこむようになり、画面には表示をしなくなります。(内部的には出力先をレンダリング用のバッファから、レンダーテクスチャ用に確保した領域に切り替えているだけだと思います。レンダ―テクスチャがヒエラルキーに存在せず設定値を持つだけのものだということからもそう思います。)

    graph-rt
    RenderTexureに折れ線グラフを書き込んだ結果です。一度書いたら特に更新する必要はないので、描画用のカメラやLineRendererは破棄しても大丈夫かもしれません。

    これで単なるテクスチャとして使うことができます。Textureクラスなので、Spriteとしては扱いません。Unity UIで使うにはRawImageコンポーネントで表示すれば可能です。
    下のグラフの表示は灰色の下地の上に青色で表示しただけのものです。テクスチャになっていれば簡単にUIに組み込めるので、非常に使い勝手が良いです。
    graph-log

    メモリとパフォーマンスがちょっと心配です。パフォーマンスはグラフを動的に変化させるつもりがないので、レンダ―テクスチャに描画をし終えたらゲームオブジェクトを消して改善できそうです。メモリがどれくらい使われるかは良くわからないですが、解像度を下げるとかピクセルあたりのバイト数を減らすしかないでしょうね。

      このエントリーをはてなブックマークに追加 Clip to Evernote
    ゲームの日々の記録などを折れ線グラフで表示したいと思いました。それで色々調べているのですが、結構大がかりな感じでした。

    スクリーン上にUnityで線を引く方法は意外と面倒臭いようです。スクリーンの位置を渡して線を描くような関数が用意されていないからです。
    uGUIを使って細い四角形を用いてもグラフは描けるし、LineRendererGLを使っても線が描けるようです。

    UI上に線を描くようにすると、UI以外では使えません。Imageに四角を描くようにしていくつも使って折れ線を表現することができます。可能ですが、元々UIをそういった目的に使うものではないのでいまいちです。
    GLは線を描くことが関数で行いやすく簡単でしたが、特定のカメラ上でのみ描画するといったことができません。GLを使うとワールド空間内に線を直接作るようなことになります。(表示位置などを思い通りにいじるためにはCGの描画における行列の知識が必要です。Unityを使って楽にゲームを作るということからは逸脱します。GLが低レベルのグラフィックスライブラリということなので、難しくなるため初心者向けではないです。)
    下の図はGLの説明のところにあったExampleClassを適当なゲームオブジェクトにアタッチして表示してみたものです。ゲームオブジェクトの座標位置を中心に放射状に線を描くというサンプルです。
    GLExample

    線を引くならやはりLineRendererが良い感じでした。LineRendererは3D空間に線を引く機能なのですが、2Dにも使おうと思えば使えます。(2D特化のLineRendererが欲しいところです。)
    なのでこれを使って線を描くようにしていきます。LineRendererは線を四角形のポリゴンで作られているようで、ねじれたり線の太さが均一にならないことがグラフを描く上では欠点です。ねじれと太さが均一でないことをなくすには1つのLineRendererで折れ線を描くのではなく、2つの点の間ごとにLineRendererを使い線分の集合で折れ線を書けば解決できます。これによって今度は線のつなぎ目に長方形同士の重なりが起こり、きれいにつながらなくなります。単一のLineRendererはポリゴンがつながっているためにそういったことは起きないのです。

    下は1つのLineRendererで3つの点を持つ折れ線を描いたものです。折れ曲がっているところがあるため、太さが均一でないのが見てとれます。
    lr3points

    下は2つのLineRendererで3つの点を持つ折れ線を描いたものです。n点の場合は(n-1)個の線分で構成されるため(n-1)個のLineRendererが必要です。太さは均一になりましたが、線同士がつながっているところできれいに表示できません。
    2lrs3points

    グラフでは線が上に表示したよりもずっと細くします。細くなった時どちらのやり方の方が良いかというと後者の方が良いです。細くなっていくと、つながっている部分も小さくなり見えにくくなるため不自然な重なりがわかりにくいのです。線が均一でないのは細くなっても結構わかります。線同士の違いが比較できるため細くなっても問題になります。
    折れ線グラフを作るには複数のLineRendererを使って行うのが良さそうです。

    Unityでグラフを作ることを調べると有料のアセットがあることもわかったのですが、アプリで儲けるということを考えると有料だと二の足を踏みます。
    ただお金で解決できることはお金で解決するのが最も良いのは間違いないです。
    私の場合は自分で試してみるということも目的であるので、自分でできそうなら自分でやります。

    このページのトップヘ