Drag and Drop Interactive Game

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.

3 Likes

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

So I exported the earlier version of the game and was just trying out how it looks.
When I embed on to the website and checked the mobile version, it looked something like one in the image below. (This is a zoomed out version) I don’t want the black sections to pop out.
Do I need to upload it to a website like itch.io and then embed it to resolve the issue? Or change the resolution?
Because now I’ve directly embed the link to the GD web export, hosted on GD server.
I’ve set the resolution of this game to 720*1080

i assume your phone has a 16:9 ratio. you can google your device to find out.
so if you don’t want boarders, set the resolution to something in a ratio equal to your phone
you can set the resolution exactly to the res of your phone.

i tested the delete and it doesnt seem to work as i expected.
i will do some more testing, but its not working as well, as i hoped.

the repeat for each child is also not working super well,
firstly its not possible to use dynamic children, or children in general, or a variable as a variable to store the child data.

however, i got it working with the use of an extra structure where i store the data of the first structure as json and after the for each child loop, i parse it back to the first structure.

im not too happy of how it works, but it is working.
I´ll have to do some more testing before implementing it tho.

E:
i did some more testing, and the repeat for each child event in general ironically does not know what children is :confused:
so for both the mother and the children values i cannot use a dot(.) or structure[]
this means i have to rewrite the data with the children first into a new variable as JSON, so i do not have a mother to the structure anymore (data transfer count 1)
then i have to parse it into another variable, to not have it as a json anymore (data transfer count 2)
then i use the new motherless structure to check each child with the for each childevent and store it into childvariable (data transfer count 3) and then into another variable to have it sorted again. (data transfer count 4)
then i finally write the data back into the original structure (data transfer count 5)


save.shapes → test ->test2->child->shapes2->save.shapes
it is fully functional, but transferring the data 5 times just to resort it seems stupid.

1 Like

i did not find a much better way to do this.
i thought about a loop that rewrites all children with a higher count number into another structure and rewrite it back with a -1
i assume that it would actually work better then the mess i showed above.
but since the mess above actually works fine, even with 500+ objects, i do not feel the need to change it.
Here is the example using delete & pipette.

1 Like

That does seem a long process to achieve the desired the output, but eventually it serves the purpose.
It was fun to get lost in the events, to try and understand the logic behind each step.
However, can you explain me a bit about what is Parse JSON exactly? I’m unable to get a grasp on it.

On another note, the game is finally live on the platform.
I can’t thank you enough for helping me out with this. Wouldn’t have been possible without you.
It has been a mini-journey for me to try out various options, fail at them and eventually settle with GDevelop. Happy that it’s come to fruition. :blush:

With the mobile version of the website though, we’re facing an issue with the embed window. Black spaces are popping up, above and below the game. Can you suggest a workaround that? We tried tweaking our embed settings but they don’t seem to be working.

We’ve set it to 720*1080. Despite that the issue seems to come up.

with the expression ToJSON you translate the data of a structure to a single Sting.
In order to make the JSON string readable again and sorted into a structure, you parse (translate) the JSON string back to a structure. In order to see what happens there exactly i recommend to play around with the debugger, where you have visual access to the variables.

not despite, its because
a 16/9 ratio would be 576 x 1024 or 720 x 1280 for example.

E:
i tried the online version, and your values for your Yposition for the drag items to canvas is off.
Also the drags for color/alpha are not correctly calculated. i cannot set the alpha to 255 (therfore i assume nether the colors)

Sure, I’ll do that.

Yes, I encountered that too before putting it up. However, I had to push it since we had to publish it on the artist’s birthday, the one we’re celebrating. From whatever we’ve seen, not many seem to use those items. Nonetheless, will remove the bugs and update it.

For the record, this was a bug and has been fixed on newer versions of GDevelop.

yes, i am aware, saw it in the update notifications

GJ :+1:

1 Like