Add onion skinning opacity adjustment (#1091)

Co-authored-by: Emmanouil Papadeas <35376950+OverloadedOrama@users.noreply.github.com>

src/UI/Canvas/Canvas.tscn

@@ -87,10 +87,10 @@ script = ExtResource("7")
 material = SubResource("3")
 centered = false
 
-[node name="OnionPast" type="Node2D" parent="."]
+[node name="OnionPast" type="Node2D" parent="." groups=["canvas_onion_skinning"]]
 script = ExtResource("12")
 
-[node name="OnionFuture" type="Node2D" parent="."]
+[node name="OnionFuture" type="Node2D" parent="." groups=["canvas_onion_skinning"]]
 script = ExtResource("12")
 
 [node name="MouseGuideContainer" parent="." instance=ExtResource("11")]

src/UI/Canvas/OnionSkinning.gd

@@ -3,6 +3,7 @@ extends Node2D
 enum { PAST, FUTURE }
 
 var type := PAST
+var opacity := 0.6
 var blue_red_color := Color.BLUE
 var rate := Global.onion_skinning_past_rate
 
@@ -33,7 +34,7 @@ func _draw() -> void:
 				if layer.is_visible_in_hierarchy():
 					# Ignore layer if it has the "_io" suffix in its name (case in-sensitive)
 					if not (layer.name.to_lower().ends_with("_io")):
-						color.a = 0.6 / i
+						color.a = opacity / i
 						if [change, layer_i] in project.selected_cels:
 							draw_texture(
 								cel.image_texture, Global.canvas.move_preview_location, color

src/UI/Timeline/AnimationTimeline.gd

@@ -98,6 +98,8 @@ func _ready() -> void:
 	Global.cel_switched.connect(_cel_switched)
 	# Makes sure that the frame and tag scroll bars are in the right place:
 	Global.layer_vbox.emit_signal.call_deferred("resized")
+	# Set the default opacity for the onion skinning
+	get_node("%OnionSkinningOpacity").value = 60
 
 
 func _notification(what: int) -> void:
@@ -1266,6 +1268,12 @@ func _on_cel_size_slider_value_changed(value: float) -> void:
 	cel_size = value
 
 
+func _on_onion_skinning_opacity_value_changed(value: float) -> void:
+	for onion_skinning_node: Node2D in get_tree().get_nodes_in_group("canvas_onion_skinning"):
+		onion_skinning_node.opacity = value / 100
+		onion_skinning_node.queue_redraw()
+
+
 func _on_global_visibility_button_pressed() -> void:
 	var visible = !global_layer_visibility
 	for layer_button: LayerButton in Global.layer_vbox.get_children():

src/UI/Timeline/AnimationTimeline.tscn

@@ -1066,6 +1066,15 @@ popup/item_0/text = "Above canvas"
 popup/item_1/text = "Below canvas"
 popup/item_1/id = 1
 
+[node name="OnionSkinningOpacityLabel" type="Label" parent="TimelineSettings/MarginContainer/VBoxContainer/OnionSkinningOptionsContainer"]
+layout_mode = 2
+text = "Opacity"
+
+[node name="OnionSkinningOpacity" parent="TimelineSettings/MarginContainer/VBoxContainer/OnionSkinningOptionsContainer" instance=ExtResource("9")]
+unique_name_in_owner = true
+layout_mode = 2
+suffix = "%"
+
 [node name="BlueRedMode" type="CheckBox" parent="TimelineSettings/MarginContainer/VBoxContainer"]
 unique_name_in_owner = true
 layout_mode = 2
@@ -1120,4 +1129,5 @@ color = Color(0, 0.741176, 1, 0.501961)
 [connection signal="value_changed" from="TimelineSettings/MarginContainer/VBoxContainer/OnionSkinningOptionsContainer/FutureOnionSkinning" to="." method="_on_FutureOnionSkinning_value_changed"]
 [connection signal="item_selected" from="TimelineSettings/MarginContainer/VBoxContainer/OnionSkinningOptionsContainer/PastPlacement" to="." method="_on_PastPlacement_item_selected"]
 [connection signal="item_selected" from="TimelineSettings/MarginContainer/VBoxContainer/OnionSkinningOptionsContainer/FuturePlacement" to="." method="_on_FuturePlacement_item_selected"]
+[connection signal="value_changed" from="TimelineSettings/MarginContainer/VBoxContainer/OnionSkinningOptionsContainer/OnionSkinningOpacity" to="." method="_on_onion_skinning_opacity_value_changed"]
 [connection signal="toggled" from="TimelineSettings/MarginContainer/VBoxContainer/BlueRedMode" to="." method="_on_BlueRedMode_toggled"]