質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
C#

C#はマルチパラダイムプログラミング言語の1つで、命令形・宣言型・関数型・ジェネリック型・コンポーネント指向・オブジェクティブ指向のプログラミング開発すべてに対応しています。

Unity

Unityは、Unity Technologiesが開発・販売している、IDEを内蔵するゲームエンジンです。主にC#を用いたプログラミングでコンテンツの開発が可能です。

Q&A

解決済

1回答

3915閲覧

ラインレンダラーで描く折れ線の太さを一定にしたい

tsuneet

総合スコア16

C#

C#はマルチパラダイムプログラミング言語の1つで、命令形・宣言型・関数型・ジェネリック型・コンポーネント指向・オブジェクティブ指向のプログラミング開発すべてに対応しています。

Unity

Unityは、Unity Technologiesが開発・販売している、IDEを内蔵するゲームエンジンです。主にC#を用いたプログラミングでコンテンツの開発が可能です。

1グッド

0クリップ

投稿2022/01/01 01:33

編集2022/01/02 02:13

unityのlinerendererを用いて頂点を多数もつ線を書こうとしています。
スクリプトで以下のように指定して線を表示させることはできましたが、太さが一定になりません。
inspectorで線の太さを調節することはわかりましたが、始点から終点まで同じ太さになるはずが(したいところ)、途中で線が細くなってしまいます。調べても解決難しそうであり相談させて頂きました。

イメージ説明

イメージ説明

C#

1public class NewBehaviourScript : MonoBehaviour 2{ 3 public GameObject obj; 4 private LineRenderer lineRenderer; 5 6 7 void Start() 8 { 9 lineRenderer = obj.GetComponent<LineRenderer>(); 10 11 lineRenderer.SetPosition(0, new Vector3(0 , 0, 0)); 12 lineRenderer.SetPosition(1, new Vector3(0.6846106f , 0, 0)); 13 lineRenderer.SetPosition(2, new Vector3(0.9700001f , 0.2f, 0)); 14 lineRenderer.SetPosition(3, new Vector3(1.15665f , 0, 0)); 15 lineRenderer.SetPosition(4, new Vector3(1.599345f , 0, 0)); 16 lineRenderer.SetPosition(5, new Vector3(1.84345f , 1.728068f, 0)); 17 lineRenderer.SetPosition(6, new Vector3(1.971275f , -0.3221619f, 0)); 18 lineRenderer.SetPosition(7, new Vector3(2.172146f , 0, 0)); 19 lineRenderer.SetPosition(8, new Vector3(2.651402f , 0, 0)); 20 lineRenderer.SetPosition(9, new Vector3(2.914341f , 0.2874806f, 0)); 21 lineRenderer.SetPosition(10, new Vector3(3.153f , 0, 0)); 22 lineRenderer.SetPosition(11, new Vector3(3.498861f , 0, 0)); 23 lineRenderer.SetPosition(12, new Vector3(8.448442f , 0, 0)); 24 lineRenderer.SetPosition(13, new Vector3(10 , 0, 0)); 25 26 27 lineRenderer.startColor = Color.green; 28 lineRenderer.sortingLayerName = "Effect"; 29 lineRenderer.sortingOrder = 1; 30 31 } 32 33 // Update is called once per frame 34 void FixedUpdate() 35 { 36 } 37}

2022/01/02追記です。
滑らかな折れ線を書く方法は教えていただいたとおり、頂点の数を増やす方法で対応できそうです。
しかし、色々と調べていると以下のコードで作られる折れ線ではどうやら太さが一定の状態で角度の急峻な折れ線を作れるようです。なぜこの方法ではきれいな折れ線が作れてしまうのか分かる方は教えていただけると幸いです。

C#

1public class GenerateLR : MonoBehaviour { 2 3 void DrawLine(List<Vector2> my2DVec, int startPos) { 4 List<Vector3> myPoint = new List<Vector3>(); 5 for(int idx=0; idx<2; idx++) { 6 myPoint.Add(new Vector3(my2DVec[startPos+idx].x, my2DVec[startPos+idx].y, 0.0f)); 7 } 8 9 GameObject newLine = new GameObject ("Line"); 10 LineRenderer lRend = newLine.AddComponent<LineRenderer> (); 11 lRend.SetVertexCount(2); 12 lRend.SetWidth (0.1f, 0.1f); 13 Vector3 startVec = myPoint[0]; 14 Vector3 endVec = myPoint[1]; 15 lRend.SetPosition (0, startVec); 16 lRend.SetPosition (1, endVec); 17 } 18 19 void Start () { 20 List<Vector2> my2DPoint = new List<Vector2> (); 21 for (int idx=0; idx<100; idx++) { 22 my2DPoint.Add (new Vector2 (-10 + 0.2f * idx, Random.Range(0.0f, 5.0f))); 23 } 24 25 for (int idx=0; idx < my2DPoint.Count - 1; idx++) { 26 DrawLine (my2DPoint, /* startPos=*/idx); 27 } 28 } 29 30 void Update () { 31 32 } 33}

イメージ説明

segur👍を押しています

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

退会済みユーザー

退会済みユーザー

2022/01/01 01:48

画像はCameraから見た視点(つまりGameビュー)で、質問はCameraから見える線の太さを一定にしたいということで大丈夫ですか?
tsuneet

2022/01/01 01:57

ありがとうございます。言葉足らずですみません、cameraから見た視点で線の太さを一定にしたいという意味です。よろしくお願い致します。
guest

回答1

0

ベストアンサー

LineRendererコンポーネントのAlignmentの値を調整してください。
Alignmentは描画する線の向きを設定する項目です。
選択項目は以下の通り。

項目説明
Viewカメラに正面を向ける(今回はこれ)
TransformZZ軸に正面を向ける

よってカメラに対して同じ幅で描画したい(=正面にしたい)ので、Viewにしてください。

【追記 LineRendererの仕様について】
私が少々勘違いしていたので仕組みを説明させていただきます。
LineRendererは折れ線の場合完全に同じ太さの線を引くことはできません。
LineRenderer仕組み
この図で、赤い点A、B、C、DがPositionsの点を、黒い線分α、β、γ、εが線の幅、つまりWidthを意味します。
また、赤い線はPositionsの点を繋いだもの、薄い水色の部分が実際に線が描画される場所になります。
Widthを一定にした場合、α、β、γ、εの長さは全て等しくなります。
始点の点Aと通る線分αと、終点の点Dを通る線分εは、それぞれ線分ABとDCに垂直に配置されますが、途中の点である点B、Cを通る線分β、γについては、それぞれ∠ABC、∠BCDを二等分する方向に配置され、前後の線分と常に垂直にはなりません。
この線分α、β、γ、εの端点をなぞるように実際のLineが描画されるので、どうしてもLine自体の幅はずれてしまいます。
設定しているWidthの値が必ずしもLineの幅となるわけではないことを知っておくと良いと思います。

【再追記】
少し調べたところ、極端な角度でない限りは上手にUnityが調整してくれている模様です。
直角など、緩い角度であれば正常に描画されます。
この程度の角度であれば、先に追記した内容でのβやγの長さを調整してくれますが、あまりにも角度が急すぎるとβやγの長さがとても長くなってしまうため調整が(十分に)されず、結果、線の幅が異なってしまうということです。
ですので先程の図は少し誤っていますが、仕組みとしては間違っていないと思いますのでそのまま掲載させていただきます。
大変失礼しました。

【再々追記】
ikadzuchi様の指摘にあるように「角の頂点」を増やして検証してみました。
<結果>
左から:「角の頂点」1個(通常)、2個、3個、4個
角の頂点変更版
それぞれのLineRendererの設定はPositions以外初期設定のままです。
LoopはOff、Widthは常に0.10、AlignmentはViewの状態で、Positionのみを以下のように変更しました。

Index角の頂点:1個2個3個4個
00,0,00,0,00,0,00,0,0
10.2,3,00.2,3,00.2,3,00.2,3,0
20.4,0,00.2,3,00.2,3,00.2,3,0
3---0.4,0,00.2,3,00.2,3,0
4------0.4,0,00.2,3,0
5---------0.4,0,0

結果、角の頂点数を2にしたときは何やらおかしなことになりますが、頂点数を3、4と増やした場合はある程度線が上手に引けるみたいです。
ちなみにこの折れ線の角度は約7°でした。
ただ、生成にかかる負担も僅かながら増えるので注意が必要かと思います。
ikadzuchi様ありがとうございました。

【再々々追記】
ikadzuchi様のご指摘を勘違いしているとBongo様からのご指摘がありました。
LineRendererのCornerVertices、つまり「角の頂点」の数を増やすと上記と同様に線の太さを一定にすることができる模様です。
角の頂点修正版
各設定項目、左から。記載が無いものはすべて同じ

項目1234567
Positionsで1箇所に重ねる数1個2個3個4個1個1個---
CornerVerticesの値1111232

※左3つは【再々追記】の画像のものと同じです。
画像のように、CornerVerticesの値を修正すればPositionsでわざわざ頂点を重ねなくても鋭角の辺が等幅で描画されます。
ただ、Positionsでの方法と比べ、頂点が丸くなります。
90°などCornerVerticesの修正なしでも同じ幅で表示可能な角度でも、画像の一番右の線のように角が丸くなりますが、気にならないようでしたらこちらの方法を使った方が楽だと思います。
Bongo様ありがとうございました。

投稿2022/01/01 02:04

編集2022/01/02 11:00
退会済みユーザー

退会済みユーザー

総合スコア0

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

tsuneet

2022/01/01 02:47

回答頂きましてありがとうございます。inspectorを確認するとviewになっておりました。他になにか問題があるのでしょうか。。
退会済みユーザー

退会済みユーザー

2022/01/01 02:52

Sceneビューで、線の正面がカメラの方向になっているか確認して戴いても構いませんか? 線の幅を太くすると見やすいと思いますので宜しくお願いします。 それで線がちゃんとカメラの方向を向いているなら、単にGameビューの解像度不足だと思いますよ。
tsuneet

2022/01/01 03:07

sceneビューで確認致しますと、カメラは正面方向でした。 ご指摘の通り線の太さを太くすると、かなり見やすい線になりました。 細く設定しすぎていたのがよくなかったようです。 とても丁寧にご回答頂きありがとうございます。本当に助かりました。
退会済みユーザー

退会済みユーザー

2022/01/01 03:12

済みません、こちらで確認したところでも同様の現象が確認され、少し勘違いに気付きました。 LineRendererは仕様上、折れ線では完全に等幅にすることは出来なさそうです。 詳しくは回答の方に記載します。解決策を出せず申し訳ありません。
tsuneet

2022/01/01 03:32

ありがとうございます。仕様上、折れ線が完全に等幅に出来ないと教えていただけただけでありがたいです。 何かしらコマンドで等幅にする方法があるのか考えておりました。 線が細くなってしまう所はスクリプトで頂点を多めに設定することである程度太さの調節をすることができるようになりました。ありがとうございます。
退会済みユーザー

退会済みユーザー

2022/01/01 03:35

そうですか。良かったです。
tsuneet

2022/01/01 03:39

わかりやすく図解もして頂きありがとうございます。line描画のメカニズムよくわかりました。TIPをお支払いしたいぐらい感謝してます。
退会済みユーザー

退会済みユーザー

2022/01/01 03:40

いえ、お気になさらず。
ikadzuchi

2022/01/02 00:35

使ったことが無いのでリファレンスを見ただけの感想ですが、 「角度が急すぎるとβやγの長さがとても長くなってしまうため」ということであれば、「角の頂点」を増やしたら適切に表示されませんかね?
退会済みユーザー

退会済みユーザー

2022/01/02 00:43

尖って線が細くなってしまう角の頂点に、二つ以上のLineRendererの点を置く、ということでしょうか? 分かりにくい書き方で申し訳ないです。
退会済みユーザー

退会済みユーザー

2022/01/02 01:05

頂点に置く点の数を2個にして実際に作ってみましたが、どうもおかしなことになってしまいました。 この方法ではできないようです。 回答の方に画像など追記しておきます。
tsuneet

2022/01/02 02:08

ありがとうございます。頂点を4つにすると確かにかなり滑らかな折れ線が書けるようになった気がします。ご丁寧に図も載せていただきましてありがとうございます。
tsuneet

2022/01/02 02:14

質問本文に追記させて頂きましたが、拾い物のコードではきれいな折れ線が書けてしまいました。リストを使ってランダムに点を発生させて折れ線を生成されていますが何故きれいに書けるのかはっきりとしません…。
退会済みユーザー

退会済みユーザー

2022/01/02 02:18

該当コードの9行目と10行目で、それぞれ新しくオブジェクトを生成、生成したオブジェクトに新たにLineRendererコンポーネントを生成しているので、見た目では1つの折れ線に見えますが実際は複数のLineRendererが使用されていますね。 1つのLineRendererにこだわらず複数使ってしまえば綺麗に描画できるということです。
tsuneet

2022/01/02 04:19

なるほど、そういうことなんですね。よく見れば分かる話でしたね、、すみません。 勉強になりました。ありがとうございます。
退会済みユーザー

退会済みユーザー

2022/01/02 10:17

本当ですね。 numCornerVertices(Inspecter上ではCorner Vertices)を操作することでも線の太さを一定に出来るようです。 ただ、先に書いた方法と頂点付近の形状が異なってくるので、どちらを使うかは実際に使う際に考えるべきかもしれないですね。 頂点が面取りされる(丸くなる)のが好ましくない場合もあると思いますので。 それでもこの方法は先の方法よりも簡潔(1つのパラメータを操作するだけで完結する)ので便利だと思います。 ご指摘ありがとうございます。
退会済みユーザー

退会済みユーザー

2022/01/03 12:11

いえ、こちらの確認不足です。 わざわざご指摘いただいたのに申し訳ありません。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問