+1 vote

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.

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

in Engine by (24 points)

1 Answer

+1 vote

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.

by (715 points)
edited by

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.

Welcome to Godot Engine Q&A, where you can ask questions and receive answers from other members of the community.

Please make sure to read How to use this Q&A? before posting your first questions.
Social login is currently unavailable. If you've previously logged in with a Facebook or GitHub account, use the I forgot my password link in the login box to set a password for your account. If you still can't access your account, send an email to webmaster@godotengine.org with your username.