バッテラが如く

プログラミングしましょ!

【Unity】LineRendererで線を引く方法 (直線、テクスチャ、三角形)

この記事の情報は次のバージョンで動作確認しています。

  • MacOS Monterey (12.1)
  • Unity (2021.3.2f1)
  • Unity

    はじめに

    今回はLineRendererを使って線を引く方法について共有したいと思います。

    docs.unity3d.com

    やって分かったのですが、

    LineRendererは線を引くというより頂点を置いたところをつなげるというものでした。

    だいぶ癖が強く理解ができていない部分があります。

    それではやってきましょー

    ※LineRendererはUnity標準で使うことができるので準備はいりません。

    LineRendererをアタッチ

    まずは空のGameObjectを作ります。

    InspectorからAddComponentでLineRendererをアタッチします。

    頂点を置いて線を作る

    線を作るには頂点を配置する必要があります。

    まずPositionsのタブを開きましょう。

    イメージとしては、

    頂点を複数置いてその点と点を線で結ぶといった感じです。

    Size

    Sizeは頂点数です。

    数値を入力してEnter押下すると↓の表の行が増えます。

    今回は「線」を引くのが目的なのでSizeは2でOKです。

    X Y Z (頂点座標)

    直線なので始点と終点の座標を入力する感じですね。

    2DゲームであればZは関係ないです。

    Xに値を入れてシーンビューを確認するとこんな感じになっています。

    Width (線の太さ)

    線の太さは Width という部分で行います。

    この値を変えると太さが変わります。

    Widthの1というのは Cube(1m)と同じでした。

    つまりWidthの1は1mということになります。

    線の色を変える

    デフォルトだとピンクの線になってると思います。

    線の色を変えるには Material を使います。

    MaterialがNoneになっている部分を変更します。

    自前で用意したMaterialでもいいですが、めんどくさいならデフォルトから用意されている Default-Line を使ってもえらればいいと思います。

    これで線の色が白色になったと思います。

    次は Color の部分をクリックするとこのような画面が表示されます。

    Adobe系のソフトを使ったことある人はなじみがあるんじゃないかなと思います。

    複数のボトル(色のこと)を置いてグラデーションカラーを作れるやつです。

    ボトル部分をクリックし選択状態にしColorをクリックするとカラーピッカーが表示されます。

    これで色を決めていきます。

    グラデーション形式になっているので、1個だけ色を変えたらこんな感じになります。

    単色の色にしたいのであれば2個あるボトルの1個を削除します。

    ボトルを削除するにはボトルを下にドラッグすると消すことができます。

    逆にボトルを追加するには 色の下部分をクリックするとボトルが追加されます。

    おとは好きに色を決めていきます。

    Newと書かれた色をクリックするとプリセットに保存ができるようになります。

    ひとまずこれで線を引くという作業に関しては完成です。

    テクスチャで見た目を変えることもできる

    前述で色変更の方法を解説しましたが、

    独自にマテリアルを作って、テクスチャをアタッチすることでいろんな見た目にできます。

    このようなテクスチャを用意します。

    マテリアルを新規作成してテクスチャをアタッチすると、

    お分かりになるかもしれませんが、画像より暗くなって表示されています。

    どうやらLineRendererも光源(Lighting)の影響を受けることが分かりました。

    光源の影響を無視したいのであれば Materialのシェーダーを Standard → Unlit/Texture に変更します。

    そうするとテクスチャの見た目のまま表示されるようになりました。

    線を繋げる

    Loopにチェックを始点と終点をつなげてくれます。

    これを表示すると線が繋がるようになります。

    三角形になります。面白いですね。

    直線以外もこういった図形を描くという使い方もあるってことですね。

    Transformで移動できるようにする

    デフォルトだとトランスフォームの影響を受けないようになっています。

    トランスフォームを使いたい場合は Use World Space のチェックを 外します。

    LineRendererをプレハブ化して使う場合は チェックを外しておいたほうがいいですね。

    線の角を丸くする

    この2つのパラメータを使うことで線の角を丸くできます。

    Conner Vertices は 線と線の繋ぎ目が丸くできます。

    End Cap Vertices で 線の端を丸くできます。

    丸みと数値の関連性がよく分かりませんが、値を大きくするほど丸みが強くなります。