Added a simple drawing demo (GD paint) #89

TwistedTwigleg · 2017-11-03T19:22:22Z

I made a MS paint like example to help show how to use the drawing functions in CanvasItem, capturing and cropping the Viewport to get the final image, and saving the image to a png (which I actually didn't know was possible until I made this).

It has a pencil, eraser, rectangle shape, and circle shape. The pencil and eraser can use either a square shape or a circle shape. All of the code is (hopefully) neatly commented and easy to understand.

In theory this could be extended to allow extra features, like layers or unlimited undos, but I thought I'd leave it where so it (hopefully) serves as a decent starting point for anyone wanting to make a drawing program in Godot.

…nctions in CanvasItem to make a simple MS paint like program.

aaronfranke

Assuming this demo is desired, it will need to be rebased and updated to Godot 3.1.

Also, I noticed that there is no outline or preview of what will be drawn. Would this be possible to do?

aaronfranke · 2019-06-05T03:14:25Z

2d/gd_paint/PaintControl.gd

+			draw_elements_list.pop_back()
+
+		# Now that we've undone a stoke, we cannot undo again until another stoke is added
+		undo_element_list_num = UNDO_NONE


Would it be possible to allow many undos?

It would be possible, as I mentioned in the initial post.

It has been awhile so I don't remember exactly how the demo works, but if I recall correctly the elements drawn are stored in a list. The current undo functionality works because it stores the index of the element before drawing. When the undo button is pressed, it just removes all of the elements going forward after the stored index.

While this works for a single undo, now I can think of better ways to go about doing something like this. If there is interest and the demo is still desired, then I could see about rewriting the code to allow for multiple undos.

aaronfranke · 2019-06-05T03:16:03Z

2d/gd_paint/ToolsPanel.gd

+	if button_name == "mode_pencil":
+		paint_control.brush_mode = "pencil"
+	elif button_name == "mode_eraser":
+		paint_control.brush_mode = "eraser"


Why not use enums here?

If I remember correctly, enums were not available in GDScript at the time. Enums would be better now that it is supported.

No doubt most of the code could/should be rewritten to use more modern GDScript practices. It is just a matter of finding the time/energy to rewrite the code.

aaronfranke · 2019-06-05T03:22:33Z

2d/gd_paint/PaintControl.gd

+	is_mouse_in_drawing_area = false
+	if mouse_pos.x > TL_node.global_position.x:
+		if mouse_pos.y > TL_node.global_position.y:
+			is_mouse_in_drawing_area = true


var global_pos = TL_node.global_position is_mouse_in_drawing_area = mouse_pos.x > global_pos.x && mouse_pos.y > global_pos.y

I'd say this change is debatable.

First, I feel the name global_pos isn't very descriptive of what the variable actually contains. The TL_Node is the top left corner of the drawing area. Using the name global_pos to me sounds like it is the global position of the node that PaintControl.gd is attached to. I don't know if defining a variable makes sense in this case, as it is only used once, but regardless I think the variable should be named something different, like topleft_global_pos or tl_global_pos, as that better defines what the variable stores.

Also, I'm not the biggest fan of assigning variables directly through a conditional, as it makes the code harder to read and understand (in my opinion), which is kinda opposite of the goal of a demo.

I do think that merging both of the if statements together makes sense. So the code would be the following:

is_mouse_in_drawing_area = false if mouse_pos.x > TL_node.global_position.x and mouse_pos.y > TL_node.global_position.y: is_mouse_in_drawing_area = true

or if using a variable for the global position:

is_mouse_in_drawing_area = false var TL_global_pos = TL_node.global_position if mouse_pos.x > TL_global_pos.x and mouse_pos.y > TL_global_pos.y: is_mouse_in_drawing_area = true

…e code so it is cleaner and easier to understand. Updated comments within code according to changes

TwistedTwigleg · 2019-06-09T22:45:17Z

Updated this pull request so that it works with Godot 3.1. I also made some changes to make the code clearer and updated the comments accordingly.

aaronfranke

The warnings added in Godot 3.1 need to be dealt with, but otherwise it's looking really nice.

PaintTools.png: The circle tool's icon looks like an octagon. This should be fixed. Also, consider scaling up the image, I think it would be better for the icons to be pixelated rather than blurry.

aaronfranke · 2019-06-11T10:01:15Z

2d/gd_paint/PaintControl.gd

+	set_process(true)
+
+
+func _process(delta):


To suppress Godot 3.1's warnings, prefix unused arguments with _. This also applies to the _physics_process method.

aaronfranke · 2019-06-11T10:04:49Z

2d/gd_paint/PaintControl.gd

+		# Figure out how many elements/brushes we've added in the last stroke
+		var elements_to_remove = brush_data_list.size() - undo_element_list_num
+		# Remove all of the elements we've added this in the last stroke
+		for elment_num in range(0, elements_to_remove):


Above the line with the for loop, put #warning-ignore:unused_variable

aaronfranke · 2019-06-11T10:06:37Z

2d/gd_paint/ToolsPanel.gd

+	save_dialog = get_parent().get_node("SaveFileDialog")
+
+	# Assign all of the needed signals for the oppersation buttons
+	get_node("ButtonUndo").connect("pressed", self, "button_pressed", ["undo_stroke"])


Add #warning-ignore-all:return_value_discarded somewhere, probably above the # Assign comment.

aaronfranke · 2019-06-11T10:09:29Z

2d/gd_paint/Paint_root.tscn

+access = 2
+filters = PoolStringArray( "*.png" )
+current_dir = "/home/ubuntu_noah/Documents/New_2019_GitHub_Repositories/godot-demo-projects/2d/gd_paint"
+current_path = "/home/ubuntu_noah/Documents/New_2019_GitHub_Repositories/godot-demo-projects/2d/gd_paint/"


This isn't really a problem with this demo, as it's more of a Godot bug, but I'm making a quick note here. This information shouldn't be saved or committed. You can leave this as-is in the meantime.

TwistedTwigleg · 2019-06-15T15:59:08Z

Made changes based on feedback (thanks @aaronfranke!).

The blurry appearance of the icons is due to the .import file for the icons not being stored, so it automatically applies a filter, which makes them blurry. Unfortunately, there is no good way to fix this without increasing the size of the file itself dramatically, since the image is 32x32 pixels in size, which (in my opinion) adds unnecessary bloat to the git repository.

As for the circle looking like an octagon, it is the best I can do in a 16x16 grid. Feel free to make a PR changing the image if you want, but personally I think for the purpose of this demo, showing off how to use the _draw function, it works fine.

aaronfranke

Really nice! Just tiny tweaks remain.

Here's a tool sheet that contains a more circular circle:

aaronfranke · 2019-06-17T01:51:18Z

2d/gd_paint/PaintControl.gd

+	# Save the image with the passed in path we got from the save dialog
+	cropped_image.save_png(path)
+
+	return


Pointless return at the end of a function.

TwistedTwigleg · 2019-08-29T17:18:24Z

Thanks for the new tool sheet @aaronfranke, it looks great!
I added it to the project and removed the pointless return statement in PaintControl.gd.

aaronfranke

I'm reviewing this as Approve because it's already merge-worthy IMO, but there are some editor/display_folded lines which could be cleaned up.

aaronfranke · 2019-10-20T23:11:56Z

2d/gd_paint/Paint_root.tscn

+custom_styles/panelnc = SubResource( 1 )
+
+[node name="PaintControl" type="Control" parent="."]
+editor/display_folded = true


Please remove all editor/display_folded lines. Here's a bash alias that you can add to ~/.bash_aliases:

alias tscnnoeditor="find . -name '*.tscn' -exec sed -i '/^editor\//d' {} \;" # Remove "editor/display_folded"

Added a simple drawing example to help show how to use the drawing fu…

a159361

…nctions in CanvasItem to make a simple MS paint like program.

TwistedTwigleg changed the title ~~Added a simple drawing (GD paint)~~ Added a simple drawing demo (GD paint) Nov 3, 2017

aaronfranke requested changes Jun 5, 2019

View reviewed changes

aaronfranke mentioned this pull request Jun 5, 2019

2D : Simple mouse drawing demo #38

Closed

Updated project to work with the latest version of Godot. Reworked th…

7ad4382

…e code so it is cleaner and easier to understand. Updated comments within code according to changes

aaronfranke requested changes Jun 11, 2019

View reviewed changes

aaronfranke mentioned this pull request Jun 11, 2019

FileDialog current_* values should not be saved to scene files godotengine/godot#29674

Closed

Made changes to gd_paint demo based on feedback by aaronfranke

2c5b4a4

aaronfranke requested changes Jun 17, 2019

View reviewed changes

aaronfranke mentioned this pull request Jul 28, 2019

Why is "export_presets.cfg" in the gitignore? #329

Closed

Minor changes to GD_Paint demo

0d40b69

aaronfranke approved these changes Oct 20, 2019

View reviewed changes

aaronfranke added the new demo label Jan 22, 2020

aaronfranke merged commit 8a6b1f8 into godotengine:master Jan 22, 2020

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Added a simple drawing demo (GD paint) #89

Added a simple drawing demo (GD paint) #89

TwistedTwigleg commented Nov 3, 2017

aaronfranke left a comment

aaronfranke Jun 5, 2019

TwistedTwigleg Jun 5, 2019

aaronfranke Jun 5, 2019

TwistedTwigleg Jun 5, 2019

aaronfranke Jun 5, 2019

TwistedTwigleg Jun 5, 2019

TwistedTwigleg commented Jun 9, 2019

aaronfranke left a comment

aaronfranke Jun 11, 2019 •

edited

Loading

aaronfranke Jun 11, 2019

aaronfranke Jun 11, 2019

aaronfranke Jun 11, 2019

TwistedTwigleg commented Jun 15, 2019

aaronfranke left a comment

aaronfranke Jun 17, 2019

TwistedTwigleg commented Aug 29, 2019

aaronfranke left a comment

aaronfranke Oct 20, 2019

Added a simple drawing demo (GD paint) #89

Added a simple drawing demo (GD paint) #89

Conversation

TwistedTwigleg commented Nov 3, 2017

aaronfranke left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

TwistedTwigleg commented Jun 9, 2019

aaronfranke left a comment

Choose a reason for hiding this comment

aaronfranke Jun 11, 2019 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

TwistedTwigleg commented Jun 15, 2019

aaronfranke left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

TwistedTwigleg commented Aug 29, 2019

aaronfranke left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

aaronfranke Jun 11, 2019 •

edited

Loading