Create Shape From The Mouse Cursor

:information_source: Attention Topic was automatically imported from the old Question2Answer platform.
:bust_in_silhouette: Asked By Lavistios


I’m still new to Godot and I’m trying to create this system allowing the player to create shapes such as rectangles, triangles with the mouse cursor.

I looked online for solution but the only result i get were about collision shapes, which is not what I’m looking for.

I really hope there’s someone among the Godot Community who can help me out.

I linked some mock-ups to help understand the idea.

Thank you for your time.

1st Mock-up
Second Mock-up
Third Mock-up
Fourth Mock-up

First Mock-up
MOQ1.png - Google Drive
Second Mock-up
MOQ2.png - Google Drive
Third Mock-up
MOQ3.png - Google Drive
Fourth Mock-up
MOQ4.png - Google Drive

Lavistios | 2018-07-06 15:22

:bust_in_silhouette: Reply From: duke_meister

Edit: I wrote this answer then noticed your 3D tag. Is this for 2d or 3d? Anyway leaving the answer for now.

[see end comment re the code samples]

Create the circle sprite–create a PNG and drag it into your project. Make a scene with a Node2D as the root and your sprite as child.
Instance this node into your ‘Main’ scene at the mouse position when the mouse is clicked on the first point (in _input with InputEventMouseButton. Position is event.position).
Have a field var circleNodeScene in your Main script
and put this in _ready:

circleNodeScene = ResourceLoader.Load("res://CircleNode.tscn")

Instance them with var circle = circleNodeScene.Instance()
When they click the second point use a Line2D (either add it to your Main scene in the editor or create it in code and add_child() to your main scene) and draw it constantly as the mouse moves (e.g. in _process) between the 2 points. As they move the mouse, draw the circle sprite/node at the mouse position.
When they click again just stop updating that circle’s position and instance a third circle sprite/node at the mouse position. Then switch from drawing a line to drawing a triangle instead. (You’ll need a CanvasItem of some kind to draw on, whereas the Line2D was a node and didn’t require it.)
When they click the third time, remove (queue_free) the circle sprites and your triangle remains. Can do the same for rectangles, circles.

Just some ideas for you. I use C# so consider my code samples pseudocode. Just use as a guide.

Thank you for your response.

I read your solution and tried to do it with Godot. Because I’m a beginner, there’s multiples steps I just can’t program.

As of right now, I manage to create the sprite at the mouse cursor when they click and draw a line between the points. The problem is that I don’t know how to do the rest.

  1. I don’t know how to detect how many points they have clicked
  2. I don’t know how to tell the engine to stop adding child when they click on the first point.
  3. Finally, I don’t know how to draw with CanvasItem (Node2D, Control)

Here’s what I’ve achevied so far

extends Node

onready var circleNodeScene = preload("res://CircleNodeScene.tscn")

func _ready():	
func _input(event):
	if event is InputEventMouseButton:
		var circle = circleNodeScene.instance()
		circle.position = event.position

I’m really sorry, I though the process was a lot easier.

Lavistios | 2018-07-08 13:51