Godot4 Tweenで円の大きさを滑らかに変更させる手順

# radius メンバ変数の値を指定した時間で変化させる際に使用します。
var tween

# radius を tween によって少しずつ変化させます。
func animation_ripple():
	# Tween を生成します。
	tween = get_tree().create_tween()

# radius メンバ変数の値を指定した時間で変化させる際に使用します。
var tween

# radius を tween によって少しずつ変化させます。
func animation_ripple():
	# Tween を生成します。
	tween = get_tree().create_tween()
	# Tween で変化させる対象の変数の初期値を設定します。
	radius = 3
	# Tween で徐々に変化させるパラメータを設定して、変化を開始します。
	tween.tween_property(
		self,             # 自分自身を登録
		"radius",       # positionパラメータを制御
		60, 		# 変化後の値
		1,                # 1秒間で変化
	)
	return 

# Called every frame. 'delta' is the elapsed time since the previous frame.
func _process(delta):
	# 毎フレームごとノードの再描画を要求して、 _draw イベント関数を呼び出させます。
	queue_redraw()

# _draw() 関数は一度だけ呼び出され、その後は描画コマンドがキャッシュされて記憶されるため、それ以上の呼び出しは不要です。
# 再描画が必要な場合は CanvasItem.queue_redraw() を呼び出してください。
func _draw():
	# 色の変数に白色を設定します。
	var white : Color = Color.WHITE
	# 円を指定した座標を中心に、指定した半径と指定した色で描画します。
	sc_draw_arc(center, radius, 0.0, 360.0, white, 3, true)
	return

extends Node2D

# 描画する円の半径です。時間経過で変化します。
var radius = 3
# 描画する円の中心座標です。
var center = Vector2(320, 240)
# radius メンバ変数の値を指定した時間で変化させる際に使用します。
var tween

# Called when the node enters the scene tree for the first time.
func _ready():
	animation_ripple()
	return

# Called every frame. 'delta' is the elapsed time since the previous frame.
func _process(delta):
	# 毎フレームごとノードの再描画を要求して、 _draw イベント関数を呼び出させます。
	queue_redraw()

# radius を tween によって少しずつ変化させます。
func animation_ripple():
	# Tween を生成します。
	tween = get_tree().create_tween()
	# Tween で変化させる対象の変数の初期値を設定します。
	radius = 3
	# Tween で徐々に変化させるパラメータを設定して、変化を開始します。
	tween.tween_property(
		self,             # 自分自身を登録
		"radius",       # positionパラメータを制御
		60, 		# 変化後の値
		1,                # 1秒間で変化
	)
	return 
	

# _draw() 関数は一度だけ呼び出され、その後は描画コマンドがキャッシュされて記憶されるため、それ以上の呼び出しは不要です。
# 再描画が必要な場合は CanvasItem.queue_redraw() を呼び出してください。
func _draw():
	# 色の変数に白色を設定します。
	var white : Color = Color.WHITE
	# 円を指定した座標を中心に、指定した半径と指定した色で描画します。
	#sc_draw_circle(center, radius, white)
	#draw_arc(center, radius, 0.0, 360.0, 60, white, 3, true)
	sc_draw_arc(center, radius, 0.0, 360.0, white, 3, true)
	return

# 円弧を描画します。 draw_arc 関数の point_count (頂点数) を自動計算して呼び出します。
# center : 中心の座標
# radius : 半径
# start_angle, end_angle : 円弧の開始と終了の角度
# color : 色
# width : 線の太さ
# antiariased : アンチエイリアスの有無. 詳しくは CanvasItem — Godot Engine (4.x)の日本語のドキュメント - https://docs.godotengine.org/ja/4.x/classes/class_canvasitem.html#class-canvasitem-method-draw-arc
func sc_draw_arc(center, radius, start_angle, end_angle, color, width, antialiased):
	# 円周(2*PI+r)の距離に比例した個数の頂点を結ぶ線分で円を描画します。
	# 試した結果、円周÷6 の頂点数だとあまり角が目立たないと思いました。
	var numof_points = ceili(2 * PI * radius / 6)
	# 円周が短く、頂点数が 12 個より小さい場合は角が目立つので 12 に補正します。
	if numof_points < 12:
		numof_points = 12
	print("radius = ", radius, ", numof_points = ", numof_points)
	draw_arc(center, radius, 0.0, 360.0, numof_points, color, width, true)
	return