Better Onion Skinning

src/Autoload/Global.gd

@@ -96,6 +96,8 @@ var onion_skinning := false
 var onion_skinning_past_rate := 1.0
 var onion_skinning_future_rate := 1.0
 var onion_skinning_blue_red := false
+var past_above_canvas := true
+var future_above_canvas := true
 
 # Palettes
 var palettes := {}

src/UI/Canvas/Canvas.gd

@@ -47,7 +47,7 @@ func _draw() -> void:
 				draw_texture(current_cels[i].image_texture, Vector2.ZERO, modulate_color)
 
 	if Global.onion_skinning:
-		onion_skinning()
+		refresh_onion()
 	currently_visible_frame.size = Global.current_project.size
 	current_frame_drawer.update()
 	if Global.current_project.tile_mode != Global.TileMode.NONE:
@@ -239,39 +239,6 @@ func update_selected_cels_textures(project: Project = Global.current_project) ->
 				cel_texture_rect.texture = current_cel.image_texture
 
 
-func onion_skinning() -> void:
-	if Global.onion_skinning_past_rate > 0:  # Past
-		var color: Color
-		if Global.onion_skinning_blue_red:
-			color = Color.blue
-		else:
-			color = Color.white
-		for i in range(1, Global.onion_skinning_past_rate + 1):
-			if Global.current_project.current_frame >= i:
-				var layer_i := 0
-				for layer in Global.current_project.frames[(
-					Global.current_project.current_frame
-					- i
-				)].cels:
-					if Global.current_project.layers[layer_i].visible:
-						color.a = 0.6 / i
-						draw_texture(layer.image_texture, Vector2.ZERO, color)
-					layer_i += 1
-
-	if Global.onion_skinning_future_rate > 0:  # Future
-		var color: Color
-		if Global.onion_skinning_blue_red:
-			color = Color.red
-		else:
-			color = Color.white
-		for i in range(1, Global.onion_skinning_future_rate + 1):
-			if Global.current_project.current_frame < Global.current_project.frames.size() - i:
-				var layer_i := 0
-				for layer in Global.current_project.frames[(
-					Global.current_project.current_frame
-					+ i
-				)].cels:
-					if Global.current_project.layers[layer_i].visible:
-						color.a = 0.6 / i
-						draw_texture(layer.image_texture, Vector2.ZERO, color)
-					layer_i += 1
+func refresh_onion() -> void:
+	$OnionPast.update()
+	$OnionFuture.update()

src/UI/Canvas/Canvas.tscn

@@ -1,4 +1,4 @@
-[gd_scene load_steps=14 format=2]
+[gd_scene load_steps=16 format=2]
 
 [ext_resource path="res://src/UI/Canvas/Canvas.gd" type="Script" id=1]
 [ext_resource path="res://src/UI/Canvas/Grid.gd" type="Script" id=2]
@@ -10,6 +10,8 @@
 [ext_resource path="res://src/UI/Canvas/Selection.gd" type="Script" id=8]
 [ext_resource path="res://src/Shaders/MarchingAntsOutline.shader" type="Shader" id=9]
 [ext_resource path="res://src/Shaders/AutoInvertColors.shader" type="Shader" id=10]
+[ext_resource path="res://src/UI/Canvas/OnionFuture.gd" type="Script" id=11]
+[ext_resource path="res://src/UI/Canvas/OnionPast.gd" type="Script" id=12]
 
 [sub_resource type="CanvasItemMaterial" id=1]
 blend_mode = 4
@@ -64,3 +66,9 @@ script = ExtResource( 3 )
 [node name="Previews" type="Node2D" parent="."]
 material = SubResource( 3 )
 script = ExtResource( 7 )
+
+[node name="OnionPast" type="Node2D" parent="."]
+script = ExtResource( 12 )
+
+[node name="OnionFuture" type="Node2D" parent="."]
+script = ExtResource( 11 )

src/UI/Canvas/OnionFuture.gd

@@ -0,0 +1,22 @@
+extends Node2D
+
+
+func _draw() -> void:
+	if Global.onion_skinning:
+		if Global.onion_skinning_future_rate > 0:
+			var color : Color
+			if Global.onion_skinning_blue_red:
+				color = Color.red
+			else:
+				color = Color.white
+			for i in range(1, Global.onion_skinning_future_rate + 1):
+				if Global.current_project.current_frame < Global.current_project.frames.size() - i:
+					var layer_i := 0
+					for layer in Global.current_project.frames[Global.current_project.current_frame + i].cels:
+						if Global.current_project.layers[layer_i].visible:
+							#ignore layer if it has "onion_ignore" in its name (case in-sensitive).
+							if not "ignore_onion" in Global.current_project.layers[layer_i].name.to_lower():
+								color.a = 0.6 / i
+								draw_texture(layer.image_texture, Vector2.ZERO, color)
+								update()
+						layer_i += 1

src/UI/Canvas/OnionPast.gd

@@ -0,0 +1,22 @@
+extends Node2D
+
+
+func _draw() -> void:
+	if Global.onion_skinning:
+		if Global.onion_skinning_past_rate > 0:
+			var color: Color
+			if Global.onion_skinning_blue_red:
+				color = Color.blue
+			else:
+				color = Color.white
+			for i in range(1, Global.onion_skinning_past_rate + 1):
+				if Global.current_project.current_frame >= i:
+					var layer_i := 0
+					for layer in Global.current_project.frames[Global.current_project.current_frame - i].cels:
+						if Global.current_project.layers[layer_i].visible:
+							#ignore layer if it has "onion_ignore" in its name (case in-sensitive).
+							if not "ignore_onion" in Global.current_project.layers[layer_i].name.to_lower():
+								color.a = 0.6 / i
+								draw_texture(layer.image_texture, Vector2.ZERO, color)
+								update()
+						layer_i += 1

src/UI/Timeline/AnimationTimeline.gd

@@ -320,7 +320,7 @@ func _on_MoveRight_pressed() -> void:
 
 func _on_OnionSkinning_pressed() -> void:
 	Global.onion_skinning = !Global.onion_skinning
-	Global.canvas.update()
+	Global.canvas.refresh_onion()
 	var texture_button: TextureRect = onion_skinning_button.get_child(0)
 	if Global.onion_skinning:
 		Global.change_button_texturerect(texture_button, "onion_skinning.png")
@@ -527,6 +527,16 @@ func _on_BlueRedMode_toggled(button_pressed: bool) -> void:
 	Global.canvas.update()
 
 
+func _on_PastPlacement_item_selected(index):
+	Global.past_above_canvas = (index == 0)
+	Global.canvas.get_node("OnionPast").set("show_behind_parent", !Global.past_above_canvas)
+
+
+func _on_FuturePlacement_item_selected(index):
+	Global.future_above_canvas = (index == 0)
+	Global.canvas.get_node("OnionFuture").set("show_behind_parent", !Global.future_above_canvas)
+
+
 # Layer buttons
 
 

src/UI/Timeline/AnimationTimeline.tscn

@@ -892,7 +892,7 @@ margin_bottom = 24.0
 [node name="OnionSkinningSettings" type="WindowDialog" parent="."]
 margin_right = 220.0
 margin_bottom = 140.0
-rect_min_size = Vector2( 220, 140 )
+rect_min_size = Vector2( 300, 320 )
 __meta__ = {
 "_edit_use_anchors_": false
 }
@@ -901,48 +901,109 @@ __meta__ = {
 anchor_top = 0.5
 anchor_right = 1.0
 anchor_bottom = 0.5
-margin_left = 5.0
-margin_top = -65.0
-margin_right = -5.0
-margin_bottom = 65.0
+margin_left = 4.0
+margin_top = -153.0
+margin_right = -4.0
+margin_bottom = 161.0
 __meta__ = {
 "_edit_use_anchors_": false
 }
 
 [node name="OnionSkinningPast" type="Label" parent="OnionSkinningSettings/OnionSkinningButtons"]
-margin_right = 210.0
+margin_right = 292.0
 margin_bottom = 14.0
 text = "Past Frames"
 
 [node name="PastOnionSkinning" type="SpinBox" parent="OnionSkinningSettings/OnionSkinningButtons"]
 margin_top = 18.0
-margin_right = 210.0
+margin_right = 292.0
 margin_bottom = 42.0
 mouse_default_cursor_shape = 2
 value = 1.0
 align = 1
 
 [node name="OnionSkinningFuture" type="Label" parent="OnionSkinningSettings/OnionSkinningButtons"]
 margin_top = 46.0
-margin_right = 210.0
+margin_right = 292.0
 margin_bottom = 60.0
 text = "Future Frames"
 
 [node name="FutureOnionSkinning" type="SpinBox" parent="OnionSkinningSettings/OnionSkinningButtons"]
 margin_top = 64.0
-margin_right = 210.0
+margin_right = 292.0
 margin_bottom = 88.0
 mouse_default_cursor_shape = 2
 value = 1.0
 align = 1
 
 [node name="BlueRedMode" type="CheckBox" parent="OnionSkinningSettings/OnionSkinningButtons"]
 margin_top = 92.0
-margin_right = 210.0
+margin_right = 292.0
 margin_bottom = 116.0
 mouse_default_cursor_shape = 2
 text = "Blue-Red Mode"
 
+[node name="PastPlace" type="HBoxContainer" parent="OnionSkinningSettings/OnionSkinningButtons"]
+margin_top = 120.0
+margin_right = 292.0
+margin_bottom = 140.0
+alignment = 2
+
+[node name="Label" type="Label" parent="OnionSkinningSettings/OnionSkinningButtons/PastPlace"]
+margin_left = 30.0
+margin_top = 3.0
+margin_right = 171.0
+margin_bottom = 17.0
+text = "Past Skin Placement : "
+align = 2
+valign = 1
+
+[node name="PastPlacement" type="OptionButton" parent="OnionSkinningSettings/OnionSkinningButtons/PastPlace"]
+margin_left = 175.0
+margin_right = 292.0
+margin_bottom = 20.0
+text = "Above Canvas"
+items = [ "Above Canvas", null, false, 0, null, "Below Canvas", null, false, 1, null ]
+selected = 0
+__meta__ = {
+"_editor_description_": ""
+}
+
+[node name="FuturePlace" type="HBoxContainer" parent="OnionSkinningSettings/OnionSkinningButtons"]
+margin_top = 144.0
+margin_right = 292.0
+margin_bottom = 164.0
+alignment = 2
+
+[node name="Label" type="Label" parent="OnionSkinningSettings/OnionSkinningButtons/FuturePlace"]
+margin_left = 16.0
+margin_top = 3.0
+margin_right = 171.0
+margin_bottom = 17.0
+text = "Future Skin Placement : "
+align = 2
+valign = 1
+
+[node name="FuturePlacement" type="OptionButton" parent="OnionSkinningSettings/OnionSkinningButtons/FuturePlace"]
+margin_left = 175.0
+margin_right = 292.0
+margin_bottom = 20.0
+text = "Above Canvas"
+items = [ "Above Canvas", null, false, 0, null, "Below Canvas", null, false, 1, null ]
+selected = 0
+
+[node name="Label" type="Label" parent="OnionSkinningSettings/OnionSkinningButtons"]
+margin_top = 168.0
+margin_right = 292.0
+margin_bottom = 233.0
+custom_colors/font_color = Color( 0.333333, 0.901961, 0.462745, 1 )
+text = "Note:
+If you want a layer to ignore Onion-skinning simply add \"ignore_onion\" in its name
+(it is case-insensitive)"
+align = 1
+valign = 1
+autowrap = true
+
 [node name="FrameTagDialog" parent="." instance=ExtResource( 42 )]
 
 [node name="FakeVSplitContainerGrabber" type="TextureRect" parent="."]
@@ -986,3 +1047,5 @@ __meta__ = {
 [connection signal="value_changed" from="OnionSkinningSettings/OnionSkinningButtons/PastOnionSkinning" to="." method="_on_PastOnionSkinning_value_changed"]
 [connection signal="value_changed" from="OnionSkinningSettings/OnionSkinningButtons/FutureOnionSkinning" to="." method="_on_FutureOnionSkinning_value_changed"]
 [connection signal="toggled" from="OnionSkinningSettings/OnionSkinningButtons/BlueRedMode" to="." method="_on_BlueRedMode_toggled"]
+[connection signal="item_selected" from="OnionSkinningSettings/OnionSkinningButtons/PastPlace/PastPlacement" to="." method="_on_PastPlacement_item_selected"]
+[connection signal="item_selected" from="OnionSkinningSettings/OnionSkinningButtons/FuturePlace/FuturePlacement" to="." method="_on_FuturePlacement_item_selected"]