Reference Image Improvements

Translations/Translations.pot

@@ -2780,10 +2780,36 @@ msgstr ""
 msgid "Spring towards the end"
 msgstr ""
 
-msgid "Silhouette"
+#. Used to turn images into a singular color
+msgid "Monochrome"
 msgstr ""
 
-msgid "Blacks out the image and makes all opaque pixels a dark color."
+#. A tooltip to tell users to hold the Shift key while clicking the remove button
+msgid "Hold Shift while pressing to instantly remove"
+msgstr ""
+
+#. Moves the reference image up in the list
+msgid "Move the selected reference image to the right"
+msgstr ""
+
+#. Moves the reference image down in the list
+msgid "Move the selected reference image to the left"
+msgstr ""
+
+#. Select a reference on the canvas
+msgid "Selects a reference image on the canvas"
+msgstr ""
+
+#. Moves the reference on the canvas
+msgid "Move the selected reference image"
+msgstr ""
+
+#. Rotates the reference on the canvas
+msgid "Rotate the selected reference image"
+msgstr ""
+
+#. Rotates the reference on the canvas
+msgid "Scale the selected reference image"
 msgstr ""
 
 #. Used in checkbuttons (like on/off switches) that enable/disable something.

assets/graphics/reference_images/move.png.import

@@ -0,0 +1,34 @@
+[remap]
+
+importer="texture"
+type="CompressedTexture2D"
+uid="uid://cedsyi8gf2n2i"
+path="res://.godot/imported/move.png-ed702c0a346cd77f0de30a0cba128fc7.ctex"
+metadata={
+"vram_texture": false
+}
+
+[deps]
+
+source_file="res://assets/graphics/reference_images/move.png"
+dest_files=["res://.godot/imported/move.png-ed702c0a346cd77f0de30a0cba128fc7.ctex"]
+
+[params]
+
+compress/mode=0
+compress/high_quality=false
+compress/lossy_quality=0.7
+compress/hdr_compression=1
+compress/normal_map=0
+compress/channel_pack=0
+mipmaps/generate=false
+mipmaps/limit=-1
+roughness/mode=0
+roughness/src_normal=""
+process/fix_alpha_border=true
+process/premult_alpha=false
+process/normal_map_invert_y=false
+process/hdr_as_srgb=false
+process/hdr_clamp_exposure=false
+process/size_limit=0
+detect_3d/compress_to=1

assets/graphics/reference_images/rotate.png.import

@@ -0,0 +1,34 @@
+[remap]
+
+importer="texture"
+type="CompressedTexture2D"
+uid="uid://dtd43nvphu3jj"
+path="res://.godot/imported/rotate.png-456db7ada5d7cd37fa30dc5557b226be.ctex"
+metadata={
+"vram_texture": false
+}
+
+[deps]
+
+source_file="res://assets/graphics/reference_images/rotate.png"
+dest_files=["res://.godot/imported/rotate.png-456db7ada5d7cd37fa30dc5557b226be.ctex"]
+
+[params]
+
+compress/mode=0
+compress/high_quality=false
+compress/lossy_quality=0.7
+compress/hdr_compression=1
+compress/normal_map=0
+compress/channel_pack=0
+mipmaps/generate=false
+mipmaps/limit=-1
+roughness/mode=0
+roughness/src_normal=""
+process/fix_alpha_border=true
+process/premult_alpha=false
+process/normal_map_invert_y=false
+process/hdr_as_srgb=false
+process/hdr_clamp_exposure=false
+process/size_limit=0
+detect_3d/compress_to=1

assets/graphics/reference_images/scale.png.import

@@ -0,0 +1,34 @@
+[remap]
+
+importer="texture"
+type="CompressedTexture2D"
+uid="uid://nfabwr5mgdir"
+path="res://.godot/imported/scale.png-475926e4af79bb726ef59440df6e6f71.ctex"
+metadata={
+"vram_texture": false
+}
+
+[deps]
+
+source_file="res://assets/graphics/reference_images/scale.png"
+dest_files=["res://.godot/imported/scale.png-475926e4af79bb726ef59440df6e6f71.ctex"]
+
+[params]
+
+compress/mode=0
+compress/high_quality=false
+compress/lossy_quality=0.7
+compress/hdr_compression=1
+compress/normal_map=0
+compress/channel_pack=0
+mipmaps/generate=false
+mipmaps/limit=-1
+roughness/mode=0
+roughness/src_normal=""
+process/fix_alpha_border=true
+process/premult_alpha=false
+process/normal_map_invert_y=false
+process/hdr_as_srgb=false
+process/hdr_clamp_exposure=false
+process/size_limit=0
+detect_3d/compress_to=1

assets/graphics/reference_images/select.png.import

@@ -0,0 +1,34 @@
+[remap]
+
+importer="texture"
+type="CompressedTexture2D"
+uid="uid://d2m7enib3dplc"
+path="res://.godot/imported/select.png-7c7e96d5ba897a73341e1d0445a3c991.ctex"
+metadata={
+"vram_texture": false
+}
+
+[deps]
+
+source_file="res://assets/graphics/reference_images/select.png"
+dest_files=["res://.godot/imported/select.png-7c7e96d5ba897a73341e1d0445a3c991.ctex"]
+
+[params]
+
+compress/mode=0
+compress/high_quality=false
+compress/lossy_quality=0.7
+compress/hdr_compression=1
+compress/normal_map=0
+compress/channel_pack=0
+mipmaps/generate=false
+mipmaps/limit=-1
+roughness/mode=0
+roughness/src_normal=""
+process/fix_alpha_border=true
+process/premult_alpha=false
+process/normal_map_invert_y=false
+process/hdr_as_srgb=false
+process/hdr_clamp_exposure=false
+process/size_limit=0
+detect_3d/compress_to=1

project.godot

@@ -820,6 +820,26 @@ onion_skinning_settings={
 "deadzone": 0.5,
 "events": []
 }
+reference_rotate={
+"deadzone": 0.5,
+"events": [Object(InputEventKey,"resource_local_to_scene":false,"resource_name":"","device":-1,"window_id":0,"alt_pressed":false,"shift_pressed":false,"ctrl_pressed":false,"meta_pressed":false,"pressed":false,"keycode":0,"physical_keycode":4194326,"key_label":0,"unicode":0,"echo":false,"script":null)
+]
+}
+reference_scale={
+"deadzone": 0.5,
+"events": [Object(InputEventKey,"resource_local_to_scene":false,"resource_name":"","device":-1,"window_id":0,"alt_pressed":false,"shift_pressed":false,"ctrl_pressed":false,"meta_pressed":false,"pressed":false,"keycode":0,"physical_keycode":4194328,"key_label":0,"unicode":0,"echo":false,"script":null)
+]
+}
+reference_quick_menu={
+"deadzone": 0.5,
+"events": [Object(InputEventKey,"resource_local_to_scene":false,"resource_name":"","device":-1,"window_id":0,"alt_pressed":false,"shift_pressed":true,"ctrl_pressed":true,"meta_pressed":false,"pressed":false,"keycode":0,"physical_keycode":82,"key_label":0,"unicode":0,"echo":false,"script":null)
+]
+}
+cancel_reference_transform={
+"deadzone": 0.5,
+"events": [Object(InputEventKey,"resource_local_to_scene":false,"resource_name":"","device":-1,"window_id":0,"alt_pressed":false,"shift_pressed":false,"ctrl_pressed":false,"meta_pressed":false,"pressed":false,"keycode":0,"physical_keycode":4194305,"key_label":0,"unicode":0,"echo":false,"script":null)
+]
+}
 
 [internationalization]
 

src/Autoload/Global.gd

@@ -466,6 +466,10 @@ var cel_button_scene: PackedScene = load("res://src/UI/Timeline/CelButton.tscn")
 
 ## The perspective editor. It has the [param PerspectiveEditor.gd] script attached.
 @onready var perspective_editor := control.find_child("Perspective Editor")
+
+## The reference panel. It has the [param ReferencesPanel.gd] script attached.
+@onready var reference_panel: ReferencesPanel = control.find_child("Reference Images")
+
 ## The top menu container. It has the [param TopMenuContainer.gd] script attached.
 @onready var top_menu_container: Panel = control.find_child("TopMenuContainer")
 ## The label indicating cursor position.
@@ -657,6 +661,10 @@ func _initialize_keychain() -> void:
 		Keychain.InputAction.new("", "Transformation tools", false),
 		"transform_copy_selection_content":
 		Keychain.InputAction.new("", "Transformation tools", false),
+		"reference_rotate": Keychain.InputAction.new("", "Reference images", false),
+		"reference_scale": Keychain.InputAction.new("", "Reference images", false),
+		"reference_quick_menu": Keychain.InputAction.new("", "Reference images", false),
+		"cancel_reference_transform": Keychain.InputAction.new("", "Reference images", false)
 	}
 
 	Keychain.groups = {
@@ -679,6 +687,7 @@ func _initialize_keychain() -> void:
 		"Shape tools": Keychain.InputGroup.new("Tool modifiers"),
 		"Selection tools": Keychain.InputGroup.new("Tool modifiers"),
 		"Transformation tools": Keychain.InputGroup.new("Tool modifiers"),
+		"Reference images": Keychain.InputGroup.new("Canvas")
 	}
 	Keychain.ignore_actions = ["left_mouse", "right_mouse", "middle_mouse", "shift", "ctrl"]
 

src/Autoload/OpenSave.gd

@@ -750,7 +750,7 @@ func import_reference_image_from_path(path: String) -> void:
 	var ri := ReferenceImage.new()
 	ri.project = project
 	ri.deserialize({"image_path": path})
-	Global.canvas.add_child(ri)
+	Global.canvas.reference_image_container.add_child(ri)
 	reference_image_imported.emit()
 
 
@@ -760,7 +760,7 @@ func import_reference_image_from_image(image: Image) -> void:
 	var ri := ReferenceImage.new()
 	ri.project = project
 	ri.create_from_image(image)
-	Global.canvas.add_child(ri)
+	Global.canvas.reference_image_container.add_child(ri)
 	reference_image_imported.emit()
 
 

src/Classes/Project.gd

@@ -45,6 +45,7 @@ var animation_tags: Array[AnimationTag] = []:
 var guides: Array[Guide] = []
 var brushes: Array[Image] = []
 var reference_images: Array[ReferenceImage] = []
+var reference_index: int = -1  # The currently selected index ReferenceImage
 var vanishing_points := []  ## Array of Vanishing Points
 var fps := 6.0
 
@@ -250,6 +251,21 @@ func change_project() -> void:
 	var edit_menu_popup: PopupMenu = Global.top_menu_container.edit_menu
 	edit_menu_popup.set_item_disabled(Global.EditMenu.NEW_BRUSH, !has_selection)
 
+	# We loop through all the reference image nodes and the ones that are not apart
+	# of the current project we remove from the tree
+	# They will still be in memory though
+	for ri: ReferenceImage in Global.canvas.reference_image_container.get_children():
+		if !reference_images.has(ri):
+			Global.canvas.reference_image_container.remove_child(ri)
+	# Now we loop through this projects reference images and add them back to the tree
+	var canvas_references := Global.canvas.reference_image_container.get_children()
+	for ri: ReferenceImage in reference_images:
+		if !canvas_references.has(ri) and !ri.is_inside_tree():
+			Global.canvas.reference_image_container.add_child(ri)
+
+	# Tell the reference images that the project changed
+	Global.reference_panel.project_changed()
+
 	var i := 0
 	for camera in Global.cameras:
 		camera.rotation = cameras_rotation[i]
@@ -870,3 +886,28 @@ func _update_layer_ui() -> void:
 		for f in frames.size():
 			cel_hbox.get_child(f).layer = l
 			cel_hbox.get_child(f).button_setup()
+
+
+## Change the current reference image
+func set_reference_image_index(new_index: int) -> void:
+	reference_index = clamp(-1, new_index, reference_images.size() - 1)
+	Global.canvas.reference_image_container.update_index(reference_index)
+
+
+## Returns the reference image based on reference_index
+func get_current_reference_image() -> ReferenceImage:
+	return get_reference_image(reference_index)
+
+
+## Returns the reference image based on the index or null if index < 0
+func get_reference_image(index: int) -> ReferenceImage:
+	if index < 0 or index > reference_images.size() - 1:
+		return null
+	return reference_images[index]
+
+
+## Reorders the position of the reference image in the tree / reference_images array
+func reorder_reference_image(from: int, to: int) -> void:
+	var ri: ReferenceImage = reference_images.pop_at(from)
+	reference_images.insert(to, ri)
+	Global.canvas.reference_image_container.move_child(ri, to)

src/Shaders/ReferenceImageShader.gdshader

@@ -0,0 +1,21 @@
+shader_type canvas_item;
+
+// This shader gets applied to every single reference image.
+
+
+uniform bool monochrome = false;
+// Used because modulate does not work when monochrome is true
+uniform vec4 monchrome_color : source_color;
+// Clamp the color by using the greyscale of the image to identify the brightness of each pixel
+uniform float clamping : hint_range(0.0, 1.0, 0.01) = 0.0;
+
+void fragment() {
+	// The original color
+	vec4 color = texture(TEXTURE, UV);
+	// Get the greyscale based on the brightest channel
+	float greyscale = max(max(color.r, color.g), color.b);
+	// Dont Use Alpha Channel past this statement!
+	if (greyscale < clamping) COLOR.a = 0.0;
+	// If we want the image to be onochrome we just set that pixels rgb color.
+	if (monochrome) COLOR.rgb = monchrome_color.rgb;
+}

src/UI/Canvas/Canvas.gd

@@ -26,6 +26,7 @@ var layer_metadata_texture := ImageTexture.new()
 @onready var mouse_guide_container := $MouseGuideContainer as Node2D
 @onready var gizmos_3d := $Gizmos3D as Node2D
 @onready var measurements := $Measurements as Node2D
+@onready var reference_image_container := $ReferenceImages as Node2D
 
 
 func _ready() -> void:

src/UI/Canvas/Canvas.tscn

@@ -1,4 +1,4 @@
-[gd_scene load_steps=21 format=3 uid="uid://ba24iuv55m4l3"]
+[gd_scene load_steps=22 format=3 uid="uid://ba24iuv55m4l3"]
 
 [ext_resource type="Script" path="res://src/UI/Canvas/Canvas.gd" id="1"]
 [ext_resource type="Shader" path="res://src/Shaders/BlendLayers.gdshader" id="1_253dh"]
@@ -16,6 +16,7 @@
 [ext_resource type="Script" path="res://src/UI/Canvas/CropRect.gd" id="13"]
 [ext_resource type="Script" path="res://src/UI/Canvas/Gizmos3D.gd" id="14"]
 [ext_resource type="Script" path="res://src/UI/Canvas/Measurements.gd" id="16_nxilb"]
+[ext_resource type="Script" path="res://src/UI/Canvas/ReferenceImages.gd" id="17_qfjb4"]
 
 [sub_resource type="ShaderMaterial" id="ShaderMaterial_6b0ox"]
 shader = ExtResource("1_253dh")
@@ -93,3 +94,6 @@ script = ExtResource("14")
 
 [node name="Measurements" type="Node2D" parent="."]
 script = ExtResource("16_nxilb")
+
+[node name="ReferenceImages" type="Node2D" parent="."]
+script = ExtResource("17_qfjb4")