【Unity】Line Rendererで破線を引く
破線の利用頻度は多いイメージですが、意外とUnityで簡単に行う方法が見つからなかったため備忘録も兼ねて解説します。
方法としてはアセットや画像は使わず、Unityの基本機能であるLine RendererとShaderを使って実現します。
1.Line Rendererの設置
まずはヒエラルキーにEmpty Objectを作成し、Line Rendererコンポーネントをアタッチします。例ではGameObjectにLinerenderという名前を付けています。
2.Line Renderの設定
ひとまず線がよく見えるようにLine Rederer設定のPositionsに適当な値を入れてください。例ではIndex 1にX=10, Y=10, Z=10を入れています。
Width(幅)もお好みの設定で構いませんが、太すぎたり細すぎたりするとやはり分かりづらいため、まずは例のように0.1程度に設定します。
最後にTexture ModeをTileに設定してください。これから設定するマテリアル(Texture)をTile状にすることで破線を表現していきます。
ここまで設定するとSceneが以下のようになります。ビューの位置は見やすいように移動してください。まだマテリアルを設定していないためLine Renderはピンク色になっています。
3.Shaderの作成
エディタ上のProjectパネルで右クリックし、[Create] > [Shader] > [Unlit Shader]を選択します。名前は「DashLine」とします。
4.マテリアルの作成
作成したShaderを選択した状態で右クリックし、[Create] > [Material]を選択します。名前はShaderと同じように「DashLine」とします。選択した状態で作成することでShaderとマテリアルが紐づけられます。
5.Shaderの記述
作成したShaderをダブルクリックし、以下のコードを貼り付けて保存します。(2021.02.19) 色変更できるようにコードを修正しました。
Shader "Unlit/DashLine"
{
Properties {
_MainTex ("Texture", 2D) = "white" {}
_Color ("Color", Color) = (1,1,1,1)
_Rate ("Rate", Range(0, 1)) = 0.5
}
SubShader {
Tags { "RenderType"="Transparent" "Queue" = "Transparent" }
Blend SrcAlpha OneMinusSrcAlpha
LOD 100
Pass {
CGPROGRAM
#pragma vertex vert
#pragma fragment frag
#include "UnityCG.cginc"
struct appdata {
float4 vertex : POSITION;
float2 uv : TEXCOORD0;
};
struct v2f {
float2 uv : TEXCOORD0;
float4 vertex : SV_POSITION;
};
sampler2D _MainTex;
float4 _MainTex_ST;
float _Rate;
fixed4 _Color;
v2f vert (appdata v) {
v2f o;
o.vertex = UnityObjectToClipPos(v.vertex);
o.uv = TRANSFORM_TEX(v.uv, _MainTex);
return o;
}
fixed4 frag (v2f i) : SV_Target {
return step(_Rate, frac(i.uv.x)) * _Color;
}
ENDCG
}
}
}
6.Line Renderへのマテリアル設定
先ほど作成したマテリアルをLine RendererのMaterialsのElement 0へドラッグアンドドロップします。
7.完成!
うまく設定されていればLine Rendererは以下のような破線状になります。
あとはお好みの幅や長さを設定して調整してください。Line Rendererのインスペクタ上でShaderパラメータの「Rate」(0~1)を調整すると透明部分と不透明部分の比率を変えることができます。デフォルトでは0.5で透明部と不透明部が同じ長さになっています。
破線の細かさを調整したい場合は、同じくShaderパラメータの「Texture - Tilling」のXの値を変えると破線全体の間隔を狭めたり広げたりすることができます。
色を変えたい場合は「Color」をクリックしてカラーパレットからお好みの色を設定してください。
8.まとめ
Line RendererとShaderを使って破線を引くことができました。Shaderを使っているため線の輪郭がくっきりと描画されます。作成したマテリアルをPlane等に設定し、ShaderのTexture - Tilingの設定を変更するとストライプ柄に表示させることも可能です。
何かと線を引く機会は多いと思いますので参考になれば幸いです。🌱
参考
この記事が気に入ったらサポートをしてみませんか?