ぬーぶのメモ帳

フリーゲームエンジン「Godot」でプログラム経験のない素人の備忘録 最近は色々な動作を考えて試すのが好き。

【Godot3】Line2Dできれいな曲線を引く

線を引くにも楽をしたい



Line2D 文字通り線を引くことが可能なノードですが 画像を読み込み テクスチャーを線状に描画でき、実は思った以上に便利なノードなのでは?

テクスチャーを線で描画できると装飾で細かい表現ができ便利そう(例えばジャングルのつたみたいな)
しかし手動で Line2D を使うと上のようにカクカク、または綺麗に描くにも大変。


そこで少し無理やり感もありますが綺麗な曲線を描画する方法を試した所上手くいきました。

画像インポートとLine2Dの設定

まずは Line2D で画像を描画できるようにします。

(今回用意したライン用の画像)


画像を用意 インポートした画像はデフォルトだと繰り返しの描画に対応していません。
なので Godot内に入れた画像を選ぶ→インポートタブ を選択
インポートタブ内の 繰り返しの項目 Disabled を Enabled にして再インポート

画像の準備ができたので Line2D に画像を読み込んで描画できるようにしましょう。



Line2D を作っていない場合はノードを作成してください。
Line2D のインスペクタータブの Fill を選択 Texture の項目に先ほどの画像を挿入

Texture Modeのパターン Tile を選択、他もどのように描画されるか試すと面白いかも。

※この時カラーが白色でない場合はテクスチャーに色が乗ってしまうので、白色に変えて下さい

上手く設定できていれば線が単色から画像に置き換わります。

曲線を描く

Line2D の描画を画像に変えたので曲線の用意をします、今回 Path2D を使うことで表現できました。
Path2D…主には PathFollow2D と一緒に使う印象が強いです。

ただ今回の Path2Dget_baked_points() を使用し、これをスクリプトで仲介する事で Path2D のパスに沿って Line2D を描画させます。

(プログラムを実行してない状態の Path2D と Line2D)



(Path2D と Line2D の親ノードにスクリプトをアタッチ)


extends Node2D

onready var path := $Path2D
onready var line := $Line2D

func _ready() -> void:	
	line.points = path.curve.get_baked_points()

コードがうまく行けばプログラム実行時に次のように描画されてると思います。




少し気になった点は Path2D の曲線は開始地点から Bake Interval の数値の距離ごとに座標を生成しているようで、広大なステージで大量の座標を含んだパスを沢山使うと重くなる可能性が?


(Bake Intervalの変化による描画の差)


少なくともポリゴン生成に Path2D を使用し Bake Interval の数値が低い状態で広大なフィールドを生成すると重くなるようです。
(これに関しては Path2D は関係なく大量のポリゴンが生成されたせい?)
ポリゴン生成ではなくライン生成でどこまで影響があるのか、というのはちょっと分かりませんでした。

最後に

今回の方法は欠点もありそうですが小規模での運用や、描いたラインの上を更に PathFollow2Dで ノードを動かせば見た目もすごく楽しいものになるので使う価値はありそうです。


(お借りした汽車イメージ: https://illustimage.com/?id=11644)