ImageEffect Animation 2.0 (#879)

* Better Animate System

* checkbutton to checkbox

* fixed value and saturation sliders being divided by 360 (when they should be divided by 100)

* minor code cleanup

* moved frame index code to ImageEffect.gd

* code cleanup

* more cleanup

* preview animation is now possible

* fixing things

* only hide when affect == FRAME

* formatting

* formatting

* formatting

* renamed Animate.png and a minor improvement

* removed unintentional changes

assets/graphics/misc/animate.png.import

@@ -0,0 +1,35 @@
+[remap]
+
+importer="texture"
+type="StreamTexture"
+path="res://.import/animate.png-79364ccdc41b6325d06915e85b554b1e.stex"
+metadata={
+"vram_texture": false
+}
+
+[deps]
+
+source_file="res://assets/graphics/misc/animate.png"
+dest_files=[ "res://.import/animate.png-79364ccdc41b6325d06915e85b554b1e.stex" ]
+
+[params]
+
+compress/mode=0
+compress/lossy_quality=0.7
+compress/hdr_mode=0
+compress/bptc_ldr=0
+compress/normal_map=0
+flags/repeat=0
+flags/filter=false
+flags/mipmaps=false
+flags/anisotropic=false
+flags/srgb=2
+process/fix_alpha_border=true
+process/premult_alpha=false
+process/HDR_as_SRGB=false
+process/invert_color=false
+process/normal_map_invert_y=false
+stream=false
+size_limit=0
+detect_3d=false
+svg/scale=1.0

project.godot

@@ -44,6 +44,11 @@ _global_script_classes=[ {
 "language": "GDScript",
 "path": "res://addons/aimg_io/frame.gd"
 }, {
+"base": "PanelContainer",
+"class": "AnimatePanel",
+"language": "GDScript",
+"path": "res://src/UI/Nodes/AnimatePanel.gd"
+}, {
 "base": "Reference",
 "class": "AnimationTag",
 "language": "GDScript",
@@ -272,6 +277,7 @@ _global_script_class_icons={
 "AImgIOBaseExporter": "",
 "AImgIOCRC32": "",
 "AImgIOFrame": "",
+"AnimatePanel": "",
 "AnimationTag": "",
 "BaseCel": "",
 "BaseLayer": "",

src/Classes/ImageEffect.gd

@@ -5,21 +5,18 @@ extends ConfirmationDialog
 
 enum { SELECTED_CELS, FRAME, ALL_FRAMES, ALL_PROJECTS }
 
-var affect: int = SELECTED_CELS
+var affect := SELECTED_CELS
 var selected_cels := Image.new()
 var current_frame := Image.new()
 var preview_image := Image.new()
 var preview_texture := ImageTexture.new()
 var preview: TextureRect
 var selection_checkbox: CheckBox
 var affect_option_button: OptionButton
-var animate_options_container: Node
-var animate_menu: PopupMenu
-var initial_button: Button
-var animate_bool := []
-var initial_values: PoolRealArray = []
-var selected_idx: int = 0  # the current selected cel to apply animation to
+var animate_panel: AnimatePanel
+var commit_idx := -1  # the current frame, image effect is applied to
 var confirmed := false
+var _preview_idx := 0  # the current frame, being previewed
 
 
 func _ready() -> void:
@@ -39,32 +36,42 @@ func _ready() -> void:
 		selection_checkbox.connect("toggled", self, "_on_SelectionCheckBox_toggled")
 	if affect_option_button:
 		affect_option_button.connect("item_selected", self, "_on_AffectOptionButton_item_selected")
-	if animate_menu:
-		set_animate_menu(0)
-		animate_menu.connect("id_pressed", self, "_update_animate_flags")
-	if initial_button:
-		initial_button.connect("pressed", self, "set_initial_values")
+	if animate_panel:
+		$"%ShowAnimate".connect("pressed", self, "display_animate_dialog")
 
 
 func _about_to_show() -> void:
 	confirmed = false
 	Global.canvas.selection.transform_content_confirm()
-	var frame: Frame = Global.current_project.frames[Global.current_project.current_frame]
-	selected_cels.resize(Global.current_project.size.x, Global.current_project.size.y)
-	selected_cels.fill(Color(0, 0, 0, 0))
-	Export.blend_selected_cels(selected_cels, frame)
-	current_frame.resize(Global.current_project.size.x, Global.current_project.size.y)
-	current_frame.fill(Color(0, 0, 0, 0))
-	Export.blend_all_layers(current_frame, frame)
-	update_preview()
+	prepare_animator(Global.current_project)
+	set_and_update_preview_image(Global.current_project.current_frame)
 	update_transparent_background_size()
 
 
+# prepares "animate_panel.frames" according to affect
+func prepare_animator(project: Project) -> void:
+	var frames = []
+	if affect == SELECTED_CELS:
+		for fram_layer in project.selected_cels:
+			if not fram_layer[0] in frames:
+				frames.append(fram_layer[0])
+		frames.sort()  # To always start animating from left side of the timeline
+		animate_panel.frames = frames
+	elif affect == FRAME:
+		frames.append(project.current_frame)
+		animate_panel.frames = frames
+	elif (affect == ALL_FRAMES) or (affect == ALL_PROJECTS):
+		for i in project.frames.size():
+			frames.append(i)
+		animate_panel.frames = frames
+
+
 func _confirmed() -> void:
-	selected_idx = 0
 	confirmed = true
+	commit_idx = -1
 	var project: Project = Global.current_project
 	if affect == SELECTED_CELS:
+		prepare_animator(project)
 		var undo_data := _get_undo_data(project)
 		for cel_index in project.selected_cels:
 			if !project.layers[cel_index[1]].can_layer_get_drawn():
@@ -73,12 +80,15 @@ func _confirmed() -> void:
 			if not cel is PixelCel:
 				continue
 			var cel_image: Image = cel.image
+			commit_idx = cel_index[0]  # frame is cel_index[0] in this mode
 			commit_action(cel_image)
 		_commit_undo("Draw", undo_data, project)
 
 	elif affect == FRAME:
+		prepare_animator(project)
 		var undo_data := _get_undo_data(project)
 		var i := 0
+		commit_idx = project.current_frame
 		for cel in project.frames[project.current_frame].cels:
 			if not cel is PixelCel:
 				i += 1
@@ -89,9 +99,11 @@ func _confirmed() -> void:
 		_commit_undo("Draw", undo_data, project)
 
 	elif affect == ALL_FRAMES:
+		prepare_animator(project)
 		var undo_data := _get_undo_data(project)
 		for frame in project.frames:
 			var i := 0
+			commit_idx += 1  # frames are simply increasing by 1 in this mode
 			for cel in frame.cels:
 				if not cel is PixelCel:
 					i += 1
@@ -103,9 +115,13 @@ func _confirmed() -> void:
 
 	elif affect == ALL_PROJECTS:
 		for _project in Global.projects:
+			prepare_animator(_project)
+			commit_idx = -1
+
 			var undo_data := _get_undo_data(_project)
 			for frame in _project.frames:
 				var i := 0
+				commit_idx += 1  # frames are simply increasing by 1 in this mode
 				for cel in frame.cels:
 					if not cel is PixelCel:
 						i += 1
@@ -117,42 +133,23 @@ func _confirmed() -> void:
 
 
 func commit_action(_cel: Image, _project: Project = Global.current_project) -> void:
-	if confirmed and affect == SELECTED_CELS:
-		selected_idx += 1
+	pass
 
 
 func set_nodes() -> void:
 	preview = $VBoxContainer/AspectRatioContainer/Preview
 	selection_checkbox = $VBoxContainer/OptionsContainer/SelectionCheckBox
 	affect_option_button = $VBoxContainer/OptionsContainer/AffectOptionButton
-	animate_options_container = $VBoxContainer/AnimationOptions
-	animate_menu = $"%AnimateMenu".get_popup()
-	initial_button = $"%InitalButton"
-
-
-func set_animate_menu(elements: int) -> void:
-	initial_values.resize(elements)
-	initial_values.fill(0)
-	animate_bool.resize(elements)
-	animate_bool.fill(false)
+	animate_panel = $"%AnimatePanel"
+	animate_panel.image_effect_node = self
 
 
-func set_initial_values() -> void:
-	pass
-
-
-func get_animated_value(project: Project, final: float, property_idx: int) -> float:
-	if animate_bool[property_idx] == true and confirmed:
-		var first := initial_values[property_idx]
-		var interpolation := float(selected_idx) / project.selected_cels.size()
-		return lerp(first, final, interpolation)
-	else:
-		return final
-
-
-func _update_animate_flags(id: int) -> void:
-	animate_bool[id] = !animate_bool[id]
-	animate_menu.set_item_checked(id, animate_bool[id])
+func display_animate_dialog():
+	var animate_dialog: Popup = animate_panel.get_parent()
+	var pos = Vector2(rect_global_position.x + rect_size.x, rect_global_position.y)
+	var animate_dialog_rect := Rect2(pos, Vector2(animate_dialog.rect_size.x, rect_size.y))
+	animate_dialog.popup(animate_dialog_rect)
+	animate_panel.re_calibrate_preview_slider()
 
 
 func _commit_undo(action: String, undo_data: Dictionary, project: Project) -> void:
@@ -198,7 +195,21 @@ func _on_SelectionCheckBox_toggled(_button_pressed: bool) -> void:
 
 func _on_AffectOptionButton_item_selected(index: int) -> void:
 	affect = index
-	animate_options_container.visible = bool(affect == SELECTED_CELS)
+	$"%ShowAnimate".visible = bool(affect != FRAME and animate_panel.properties.size() != 0)
+	prepare_animator(Global.current_project)  # for use in preview
+	animate_panel.re_calibrate_preview_slider()
+	update_preview()
+
+
+func set_and_update_preview_image(frame_idx: int) -> void:
+	_preview_idx = frame_idx
+	var frame: Frame = Global.current_project.frames[frame_idx]
+	selected_cels.resize(Global.current_project.size.x, Global.current_project.size.y)
+	selected_cels.fill(Color(0, 0, 0, 0))
+	Export.blend_selected_cels(selected_cels, frame)
+	current_frame.resize(Global.current_project.size.x, Global.current_project.size.y)
+	current_frame.fill(Color(0, 0, 0, 0))
+	Export.blend_all_layers(current_frame, frame)
 	update_preview()
 
 
@@ -208,6 +219,7 @@ func update_preview() -> void:
 			preview_image.copy_from(selected_cels)
 		_:
 			preview_image.copy_from(current_frame)
+	commit_idx = _preview_idx
 	commit_action(preview_image)
 	preview_image.unlock()
 	preview_texture.create_from_image(preview_image, 0)

src/UI/Dialogs/ImageEffects/DesaturateDialog.tscn

@@ -7,21 +7,25 @@
 window_title = "Desaturation"
 script = ExtResource( 1 )
 
-[node name="AspectRatioContainer" parent="VBoxContainer" index="0"]
-margin_right = 278.0
+[node name="ShowAnimate" parent="VBoxContainer" index="0"]
+visible = false
 
-[node name="Preview" parent="VBoxContainer/AspectRatioContainer" index="0"]
-margin_left = 39.0
-margin_right = 239.0
+[node name="AspectRatioContainer" parent="VBoxContainer" index="1"]
+margin_bottom = 238.0
 
-[node name="RGBAContainer" type="HBoxContainer" parent="VBoxContainer" index="1"]
-margin_top = 204.0
-margin_right = 278.0
-margin_bottom = 224.0
+[node name="Preview" parent="VBoxContainer/AspectRatioContainer" index="0"]
+margin_left = 73.0
+margin_right = 287.0
+margin_bottom = 214.0
+
+[node name="RGBAContainer" type="HBoxContainer" parent="VBoxContainer" index="2"]
+margin_top = 242.0
+margin_right = 360.0
+margin_bottom = 262.0
 alignment = 1
 
 [node name="RButton" type="Button" parent="VBoxContainer/RGBAContainer" index="0"]
-margin_right = 66.0
+margin_right = 87.0
 margin_bottom = 20.0
 hint_tooltip = "Modify Red Channel"
 mouse_default_cursor_shape = 2
@@ -31,8 +35,8 @@ pressed = true
 text = "R"
 
 [node name="GButton" type="Button" parent="VBoxContainer/RGBAContainer" index="1"]
-margin_left = 70.0
-margin_right = 137.0
+margin_left = 91.0
+margin_right = 178.0
 margin_bottom = 20.0
 hint_tooltip = "Modify Green Channel"
 mouse_default_cursor_shape = 2
@@ -42,8 +46,8 @@ pressed = true
 text = "G"
 
 [node name="BButton" type="Button" parent="VBoxContainer/RGBAContainer" index="2"]
-margin_left = 141.0
-margin_right = 207.0
+margin_left = 182.0
+margin_right = 269.0
 margin_bottom = 20.0
 hint_tooltip = "Modify Blue Channel"
 mouse_default_cursor_shape = 2
@@ -53,40 +57,18 @@ pressed = true
 text = "B"
 
 [node name="AButton" type="Button" parent="VBoxContainer/RGBAContainer" index="3"]
-margin_left = 211.0
-margin_right = 278.0
+margin_left = 273.0
+margin_right = 360.0
 margin_bottom = 20.0
 hint_tooltip = "Modify Alpha Channel"
 mouse_default_cursor_shape = 2
 size_flags_horizontal = 3
 toggle_mode = true
 text = "A"
 
-[node name="OptionsContainer" parent="VBoxContainer" index="2"]
-margin_top = 228.0
-margin_right = 278.0
-margin_bottom = 252.0
-
 [node name="AffectOptionButton" parent="VBoxContainer/OptionsContainer" index="1"]
-margin_right = 278.0
 items = [ "Selected cels", null, false, 0, null, "Current frame", null, false, 1, null, "All frames", null, false, 2, null, "All projects", null, false, 3, null ]
 
-[node name="AnimationOptions" parent="VBoxContainer" index="3"]
-visible = false
-margin_top = 256.0
-margin_right = 278.0
-margin_bottom = 290.0
-
-[node name="PanelContainer" parent="VBoxContainer/AnimationOptions" index="1"]
-margin_right = 157.0
-
-[node name="AnimateMenu" parent="VBoxContainer/AnimationOptions/PanelContainer" index="0"]
-margin_right = 88.0
-
-[node name="InitalButton" parent="VBoxContainer/AnimationOptions" index="2"]
-margin_left = 161.0
-margin_right = 278.0
-
 [connection signal="toggled" from="VBoxContainer/RGBAContainer/RButton" to="." method="_on_RButton_toggled"]
 [connection signal="toggled" from="VBoxContainer/RGBAContainer/GButton" to="." method="_on_GButton_toggled"]
 [connection signal="toggled" from="VBoxContainer/RGBAContainer/BButton" to="." method="_on_BButton_toggled"]

src/UI/Dialogs/ImageEffects/DropShadowDialog.gd

@@ -15,23 +15,18 @@ func _ready() -> void:
 	sm.shader = shader
 	preview.set_material(sm)
 
-
-func set_animate_menu(_elements) -> void:
 	# set as in enum
-	animate_menu.add_check_item("Offset X", Animate.OFFSET_X)
-	animate_menu.add_check_item("Offset Y", Animate.OFFSET_Y)
-	.set_animate_menu(Animate.size())
-
-
-func set_initial_values() -> void:
-	initial_values[Animate.OFFSET_X] = offset.x
-	initial_values[Animate.OFFSET_Y] = offset.y
+	animate_panel.add_float_property(
+		"Offset X", $VBoxContainer/ShadowOptions/OffsetSliders.find_node("X")
+	)
+	animate_panel.add_float_property(
+		"Offset Y", $VBoxContainer/ShadowOptions/OffsetSliders.find_node("Y")
+	)
 
 
 func commit_action(cel: Image, project: Project = Global.current_project) -> void:
-	.commit_action(cel, project)
-	var offset_x = get_animated_value(project, offset.x, Animate.OFFSET_X)
-	var offset_y = get_animated_value(project, offset.y, Animate.OFFSET_Y)
+	var offset_x = animate_panel.get_animated_values(commit_idx, Animate.OFFSET_X)
+	var offset_y = animate_panel.get_animated_values(commit_idx, Animate.OFFSET_Y)
 	var selection_tex := ImageTexture.new()
 	if selection_checkbox.pressed and project.has_selection:
 		selection_tex.create_from_image(project.selection_map, 0)