Drag and Drop Interactive Game

I’m glad that you’re having fun with this! :smiley:
The triangle shape does look pretty great!

Since you asked if I want any other shape, here are a couple of examples that I intend to create.
So is it possible to give the players a pencil like tool and ask them to draw irregular colored shapes?
Otherwise the best option of course, is to add these as objects and give them a draggable behaviour.

Arcs and Bezier curves would be possible I think, right?
Because using Bezier curve, it would be possible to create random shapes (closed and colored).

Irregular triangles was already quite some math.
No chance in calculating free drawn stuff. If you cannot calculate it, you can’t drag it.

It might be possible to draw freestyle like this, but could only be added in a way i was descibing earlier in my add drag post. The first method with limited layers.
So you could have like 10 or so slots (layer) for custom drawn shapes. Keep the number low, if you intent on using it on phones, because i suspect this to be quite taxing for the system.
The rest should be sprites.

1 Like

Alright then.
I’ll use sprites only, that would be better.

As of now, the same issue came up while defining triangles. How to resolve this?

Plus, can you share the events of the ‘drag’ event for the triangle that enable the drag?

I had exactly this too.
You used close path instead of finish path.
I’ll try to add free drawn triangle first, add 1 sprite with manipulation options and then upload the example. Because I have the math for irregular triangles done, would be a waste not to implement

1 Like

I’ve used finish path. Check out my file here

Do share your example too.

A little more patience, almost done.
I need to test it for bugs and evtl leave you some comments, so you don’t get completely lost.

i did not fully test everything, so you might encounter some bugs.
i did not fully explain everything in the comments, but i hope they help a little.
but this example should have most of everything you need:
Advanced Draggable Shape Painter

Comes at a good timing:

This is worth implementing

1 Like

Thank you so so much for sharing this example!
There are so many things going around at the back end.
It indeed contains all of the things that I need.
The comments are helpful too, no doubt.
Can you help me out with a couple of bugs though?

  1. The undo is only working for drawn shapes, not for the objects dragged from the menu.
  2. When there are no shapes, the objects can be manipulated with ease. However, when the shapes are drawn, manipulation of objects also draws the shapes on the canvas.

In which part is this supposed to be implemented?

No bug.
You see 3 buttons. You can toggle them on and off. (Blue is off/green is on)
If you toggle draw, you delete draws, if you toggle items you delete items.
If you toggle draw & drag you drag shapes.
If you toggle items and drag, you drag items.
If you have only item toggled on; you can manipulate it, color, size, angle
If you have only draw toggled, you draw.

It should be implemented to the select item.

Yes, I understood the functions of each button there.
It’s only after that I pointed out the little issue.
Sharing my game play video here. Do check it out.

I see.
I switched last minute the scenvar mode to the object var on.
Under the undo group , where the condition mode=draw is,
Change that to
Var on of draw =1

And var mode item to
Var On of item =1

Same with initiate draw block.
Change var =draw
To var on of draw=1
Also add if cursor is not on shapeframe there too

come to think of it,
maybe you keep the multi selection on overlapping. could be called a feature.
this way you can stack all items in 1 place, select them all at once, and change color for all of them at once.
its faster, and you have the exact same color values for all of them.
if you want to change 1 single object, while they overlapp, you have to “dig it out” via drag, place it somewhere alone and change it.

under drags → drawn shapes Triangles:
should only be a >=5
the rest is relics from early testing i forgot to remove

and also under the Variable(Shapes.Size)+1
triangles, remove the “or”

also you can delete the layer drags_undo (and frame, but i assume you want this for your cover frame)

1 Like

Okay, so the couple of issues are resolved with your solution.

What you mentioned about the multi-selection, it is indeed a great idea.
And it’s working quite well too!
While thinking of a work around of the initial shape-item situation, I actually “dug it out” using the drag option itself to separate shapes and items.

Looking deep into the events, it is quite fascinating to see how each and every piece has come together. Math is indeed a useful thing. :wink:
Glad to see that it has been achievable to create in GD. I think it is comparatively easier to do it with the system of GD, isn’t it? Or was it lengthy according to you?

Moreover, in order to optimize this game for mobile screens, should I utilize the options within GD. Or change the UI from my side from the start according to mobile screens? Because my main platform is the mobile web.

i would not have been able to do this in any other engine, simply because i cannot code.
i am a learned german technical drawer, so the math around shapes isnt the hardest for me. i am also fairly used to gd, since i used it almost daily for the last year, and also worked on non-standard games only, so im used to think around the corner with gd.
this in total may have taken me around 5h, because the basic structure was there already. i only needed to modify it.
it was a welcome distraction from working on my game.

as for your resolution thing, you should make your own ui, according to mobile use.
you have to do some adjustments, but its doable.

funfact, i never needed so much math in my job (or ever), then now for making games. and my job was math and draw, lol.


Sure. I’ll do that.

Technical drawer means working on the orthographic/isometric and engineering drawings?
Studied (and practiced a bit) in my mechanical engineering course.
Happy to hear that you had a good time too working on this.
Do share the games that you’ve worked upon. Would be happy to play.

haha! No wonder why creating games is as much fun as playing them.

Since the items are created on a upper layer and the shapes are created on the base layer, the shapes can’t be drawn over the items on canvas.
So is there any workaround that?

the items are on the baselayer too, when dragged into the canvas.
the problem is, that all draw shapes are drawn every frame, with 1 object.
so if you change zorder of drawer, you change the zorder of all drawn shapes.

funny enough, while i implemented the save function and rewrote the variable structure from scene var to global vars, i missed something, and the result was, what you are looking for right now.
when i drew, it overlayed the items, and items dragged over it, overlayed the shape. no clue what was happening there. i assume i missed the z-order change of the objects, so object had z? could have been z-fighting. that happens when they have the same z-order. thats not good at all. but the shape painter has z1 and a ?z should return 0, so idk.
also a problem, i use the z-order of the items as counter for both, saving and deleting.

the only solution i see is (without trying to replicate the bug i earlier encountered) to have each shape drawn with a unique drawer object.
this will lead to a drawlimit, because you need to have all those shape painters already created in gd and the events need to be changed a decent chunk.

I could try to toggle the refresh of the draws on and off. But this brings several other problems with it. But would also increase the performance, so might be worth a try.
As of right now on the fly I can’t think of a good solution, that would not introduce many problems

What you can do is have 3 or so layers.
Put number toggle icons in the top right corner.
If you click on the number, change to that layer.
If var layer =1 draw with drawer from base layer and put items that are dragged into the canvas on base layer
If layer = 2 draw with drawer3 from layer2 and put dragged items on layer2
If 3 then drawer 4 on layer3

This way you have at least some control over what’s in front and back.

Advanced Draggable Shape painter with layers & save

1 Like

Thanks for this addition and sharing it here!
Two more things that I would like to ask you:

  1. Would it be possible to add a feature which selects a particular shape and deletes it? Like, after drawing a picture, one realizes that the first shape that was drawn was not needed. So would this task be easily achievable?
  2. Is there any option to recall the color for shapes? Maybe like eye-dropper tool or something. One person pointed out that if I need the same colour again, there seems to be no way to remember how the colour bars have been positioned. Although I think it can be easily achieved by eyeballing it. :wink:

I already thought about those 2 functions As well, as I tried the useability by drawing a picture.

The pipette tool is easy, since the select functions for sprites and shapes is in place already, and ther color values are stored.

The delete is not so easy.
The reason is that the order of the structure gets messed up if you remove a child that is not the last one.
There is a feature, which would enable the delete and the resorting of the structure. The problem as of right now is, that it works only for scene variables.

It would be possible to write the structure into a scene var, resort it and write it back in to the global var structure, but that’s not very efficient.
Hopefully someone ( looking at you @arthuro555 :eyes:) will implement the for each child event for global variables too.
The reason for the variables to be global is mainly for the globalvartojson expression, which does not exist for scene vars.
I wish every variable function would work for all variable types and i am wondering why this is not the case

1 Like

There do is actually, the ToJson expression.

That’s a bit tricky because of how code generation and the parser are made, but there were discussions about that before and I’d definitely appreciate auch a thing as well.

Oh yes I forgot about this, I’ll try to do it.

1 Like

My hero.
Thanks for pointing out that tojson exist.
I didn’t find it while I looked for it