Drag and Drop Interactive Game

i made the undo changes to a fresh draw example, and everything works.
i assume that your shape buttons are out of your drawing area and thus are not triggered, because of your mouseposition conditions.

put them to the condition
canDraw = 1

Even though the shape buttons are outside the drawing area, only the circle buttons aren’t working. Irrespective of the mouse position conditions. So mostly the issue is with the first two.
canDraw = 1 too not working.

it does for me.


the only way i was able to get the lines draw from the line origin was, when 2 points of the squares overlap.

maybe you upload your version, or tell me what screen resolution you use and what canvas size ure using (mouseposition values)

To fix the 2 points overloverlapping issue you can set 1 of the 2 points to mouse+1 if shape = square so they never overlapp

1 Like

Aah! In the mouse position event for me, the scene variable of drawing was ‘subtract 1’ instead of ‘set to 1’. Now it works perfectly fine! No issue of the shapes being created from origin as well.

Thanks a ton for all your help. Appreciate it. :slight_smile:

1 Like

haha, ure welcome, but you might want to fix the rectangle issue aswell (comes with the example).
also a little fix of my events, you should add if Shape.size >0 too, because if you click undo, if there is no shape, it will delete the first draw later, if undo is clicked.

if you draw a rectangle and ether the x or y points overlapp while drawing, the shape is missing 2 points to draw the rectangle and will use the origin as points.

1 Like

Thanks for the fix on the Shapes.Size event. :+1:

Although, I’m not facing any issue with the rectangle as the one you mentioned. Maybe it’s according to the position of the shape painter object. Works well for me in my case.

thats curious. maybe ure not positioning them precisely enough. or maybe it really is just an issue on my side.
well, if its not a problem, no need to fix then.

1 Like

Actually I’m creating the shapes just within the yellow frame so that restricts the area and thus the margin for error, I guess. It works according to my requirement so it’s fine that way too.
Once again, I thank you for your time and helping me out. :pray:

Is it possible to add draggable behaviour to the shapes that are created on the screen?

not directly. with some trickery it could be possible.
it would not be the draggable behavior, but you could make your own.
i see 2 ways. 1 would be to draw each shape on its own layer and move the layers (seems not so great, but easier because less math) this would need a redesign of the eventstructure, since the example uses a single shape and a variablestructure.
another drawback of this approach would be that you cannot add layer via events, means you have to have the layers prepared. this means you have a maximal number of shapes you can draw.

the other would be to add a “drag” button. if drag is on, and mouse is down check mouse position. if mouse is inside shape (involes a math check loop thu all shapes) change position to mouse start pos +mouse pos.
hard to do, but it is a possibility.

i tested this a little bit, and the second suggestion would be the way to go, since both methods require the math check loop anyway to determine which shape is being dragged.

E: I have circle and rectangles draggable now (picked last drawn if overlapping), but line is a little bit trickier.
im uncertain how to handle it.

i solved it, after wasting time on google, to get results that used way to long sqare root formulas.
in the end i just compared the length of the line - startpoints distance to mouse - endpoint distance to mouse. if result = 0 the mouse is on the line.
if you want a little bit more tolerance to click on the lines, you can change the condition from = 0 to >-1

Draggable shape painter example.

1 Like

This works like charm!
I can’t thank you enough for this!
So glad that you spared your time, tested it and shared the file as well.
Wonderful logic there.
Finally I’m able to create what I intended to create at the start. :smile:

A couple of questions:

  1. Is it possible to create a triangle shape? Because I think it is limited to circle, line and rectangle in GD, right?
  2. If not, would it be feasible to create a triangle using lines and color it with fill bucket like tool?

If you get the math right you could add all kinds of shapes. Not sure about full color tho.

With events similar to the drag events you could make the shapes adjustable too. Like pick a corner of a rectangle and resize it. Circle is even easier by just changing the radius.

1 Like

Yeah, the resizing feature would be quite helpful actually because it brings in more customisability.
I actually started out wanting to create a game like this.
So I want some custom shapes too (see original post picture) that can be dragged and dropped on the canvas. How to go about that?

to resize the shapes, you would do basically the same as i did with the drag.
except that you would only change the position of certain points instead of all points, and the determination of whats been picked would need an additional check to what point is the nearest. this can be a bit tricky, because i believe there is no pick largest/lowest number function in GD. max(num,num) can only compare 2 numbers, which isnt too useful, since you can just do if a>b instead.
but there is “pick nearest object” function that could be used, possibly creating objects on the points, to be able to use it. but an object approach seems not great.

for the second half of your question, it depends what your custom shapes are.
if there complex things, i would go with sprites.

you could mix the 2 things (draw/sprites), or just have a list of objects to use (sprites only). manipulation of things like angle and size are certainly much easier to do with objects, and the dragging behavior comes with gd.

as for full color custum shapes with the painter, there is “fill path”
never used it, but i assume you can do fullcolor custum shapes with it.

Alright, for the first part I’ll keep it on hold for now because that’s not immediately required right now. Will keep these pointers in mind though.
However, the fill path option for custom shapes would be worth trying. Will give it a shot.

For the second part, yes, I’m actually looking to combine (draw/sprites). The objects that I want to drag and drop are something like this in this picture. So the drag and drop behavior is to be put in them just like the in the case of shapes?

no. no need for that. there is a feature for that. if you doubleclick a sprite object you see on the top right behaviors. there you can add the Draggable object behavior.
then you just need to activate it when you click on the drag button and deactivate it when you draw.
if sprite object and shape paint is overlapping, you have to decide how to handle the behaviors. you can also have 2 differet drag modes, 1 for draws, the other for sprites.
depending on how many different sprites you want to use, i recommend the use of multiple layers, almost like the historic picture thing you linked. have a button for each category or a left/right button menu to show the responding layer. if you do this you need to work with the conditions if “layer is visible”

1 Like

Oh yes, I did add the draggable behavior initially to the objects. I actually wanted to add the resize option and color changing option to it. That’s when I received the suggestion of using the Shape Painter sample. I think the size changing option can be done using events easily, right?

I did not understand what do you mean by 2 drag modes though? The one for the shapes is already present so I’ll have to add one only for the objects, right?

The idea of using layers for each category is cool though. I will do that.

Yes, resizing and rotation can be easily achieved using events. Also the change tint (color).
The question is only where to save these. You can ether store those information inside the object, or continuing using the scene structure.
2 modes to avoid dragging sprites around, when you try to draw over them or drag shapes over sprites, or the other way around.
Using 2 different dragmodes makes the handling much easier

1 Like

Yes, I get what you mean with the 2 drag modes. What I wanted to say was the drag mode for the shapes is already set and controlled by a button. So only one more mode for object control would be required, isn’t it?

Can I find a simple example for reference of the resizing, rotation and tint change of a object?
What I actually want is a single control for all the objects. Say, when I drop objects from tray to the canvas, the selected (or recently dropped) object should be controlled with that same rotation/scaling/color changing mechanism.
Or maybe just enable the mechanism when it is on the canvas, like in the tapestry example.

yes, 1 drag mode is done, the other should be added.

idk of an example that does all the object manipulations. there several doing a little bit.
rotation you find in linked objects, but its only rotate object, which is easy enough to understand and i recommend doing it in another way anyway (a handle, to adjust angle and size).
then there is the change sprite color example, useful, but you have the shape pointer example already, which shows the syntax to change color already.
you can set the values for the colors with the sliders of the draw you got already and apply these color values to the object seen in the example.
resizing is also so simple that it doesn’t need an example, and i dont know any.

this makes sense. or you can select the object when clicked. the problem with the click and change is, that you need some kind of visual indicator of what is selected, which i usually done by changing color, bad idea if you are adjusting its color.

i tested the fill path thing, and it is, as expected to fill color.


its used like this:

with this you can draw any shape you are able to calculate :smiley:

Is there any other shape you want?
I’m having fun figuring this stuff out.

1 Like