Drag and Drop Interactive Game

Hello everyone, I want to create a drag and drop (d&d) interactive game which works on a web browser (directed more towards mobile web). Basic requirement is to d&d shapes on a canvas and then change its color, size, rotation etc. A benchmark as to what I intend to create can be seen here.
Since I’m new to G Develop I could only create a d&d event after watching a tutorial on YouTube.
Need suggestions (and maybe some help) as to how can I create the above mentioned mechanics. Like, a menu to change color pops up once the shape is dragged onto the canvas. Would appreciate any kind of insights which provide a sense of direction. Thanks!

You will need this action:
And then you will need sliders to adjust each color.
You will find everything you need in the example project called:

1 Like

Thank you for these insights! The resources that you pointed out are exactly what I need. I want to add a couple of more features though.

  1. After the shape is created on the canvas in the example (advanced shape based painter), I want that shape to be draggable and ability to change the size of it.
  2. How to make the final design downloadable for the users to share?

I don’t think you can drag/edit the shapes of the shape painter.
If you use standard objects like in your first message, you can use the size actions (width/height/scale) and you can add the draggable behavior to the objects, probably.

1 Like

Great. I’ll try it out. Thanks again. It was very helpful. :slight_smile:

1 Like

In the example project, how can I limit the size of the canvas where the shapes can be drawn? As of now it draws all over the place, even where the sliders are present.

You can use mouse position as condition for your draw events.
If mouseX> your min cancasX
If mouseX < your max canvasX
If mouseY>your min canvasY
If mouseY <your max canvasY
→ your draw events

1 Like

Thanks for your solution. It did work!
Now, the pointer only draws in the points located within the blue rectangle.
However, the shapes still go out since the pointer draws on the boundary as well.
Any inputs on that?
Should I share my events screenshot?

Put a layer over it.
With a screensized image that has a transparent cut out (draw area)
And your settings a layer above that

Thank you.
I’m unable to crack it though. :sweat_smile:
I’ve created a layer with transparent cut out (2nd layer) and then a (3rd layer) to put in the above setting that you mentioned. The shapes are still getting drawn over.

Just put/create the shape painter objects on the lowest layer

They’re already on the base layer.

Apart from that, how to add an undo button to the game?

Hmm, might have to do with the blendmode of the base layer then. I’ll have to try it out later to see, if there is a workaround, I’m not too familiar with the blend modes.
e: idk what you are talking about, but its working fine:

move all your objects, except the shape painter object to the top layer (other elements)
and your frame a layer below that (The coverframe). The base layer on the bottom with only the shape painter object on it.

As for the undo button:
After you create a shape, you set a object variable of the shape (id) to a scene variable(count). The first one will be 0 set automatically by GD, then add 1 to scene variable(count). Then
When you click the undo button:
If variable (id) of shape = variable(count)-1
Delete shape and do -1 to scene variable(count)

1 Like

Aah, thanks for sharing your screenshots. Actually, with the transparent cutout the shapes were still showing through despite playing with the layers. The screenshot with the red color made it clear. :wink:

If possible, can you share an example of the undo button as well? I want an arrow button (object) to act as a undo button.

sorry, i did not talk to you under the context of using the drawer example.
this example uses a different way of handling the drawings.
but this makes it almost as easy to use:

1 Like

Thanks for this! The undo button works just right!
However, a couple of issues have popped up.
I’m unable to draw the two (solid & line) circles and the drawing is now being created from the origin.

idk that you changed in order to not be able to draw circles anymore,
but the origin problem comes with checking draw relative to position.
double click on the shape painter object and remove the hook.

Yeah, the hook is already off for me in the shape painter properties.

Regarding the circles issue, I’ve put in the events exactly according to the screenshot that you shared. Is it working for you correctly?

This part is not the issue. I tested it and everything still works the same.
Have you changed nothing else regarding events?

E: maybe I did change more and forgot to mention it. I’ll check that later

1 Like

No, I haven’t changed anything in the events apart from this.

Do share the changes that you’ve made, it would be helpful to sort the current issue.