Create Shape From The Mouse Cursor

Question

Hi!

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.

Comments

First Mock-up
https://drive.google.com/open?id=1z0FXqMtufXiLL4qqgEfau03ENp_ALL3F
Second Mock-up
https://drive.google.com/open?id=1r5wy3zzhGWkDSxS8cFJSRmo0d2aaeQD-
Third Mock-up
https://drive.google.com/open?id=1tQDzLF7DwQRWftDMBUDOMnAyY1c-ESrI
Fourth Mock-up
https://drive.google.com/open?id=18s-4Re7GKf8r7JhWs70olBsGhLq1TNRp

Answer 1

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.

Comments

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():  
    pass
func _input(event):
    if event is InputEventMouseButton:
        var circle = circleNodeScene.instance()
        add_child(circle)
        circle.position = event.position
        get_node("Line2D").add_point(event.position)

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