How do I make dragable objects snap to grid

Hi all,

My name is Jack and I'm creating an educational game for our Computer Science textbook, and am looking for assistance in making our idea a reality. I have a few years programming under my belt (I now teach it to students) but haven't had much experience with game programming (except for text based games in Python) or Construct 2.

The program I want to design is explained here with diagrams, and most of it is things I can implement myself, however there are a few things I don't know how to do. Construct has allowed me to quickly add the dragable squares with touch controls, however the part I'm stuck with is how to make drag-able squares only be moved to certain spots with some particular behaviour. I've copied some of the text from the link below.

[quote:18fchstx]These diagrams show the main interface for the program. The program starts with several coloured boxes in a line at the bottom with a set of scales above. The dotted lined areas are places where a box can be moved to (also the areas where a user should be able to select the box from that area), and only one box can be in one area at a time.

The user should be able to move the boxes (either by dragging with the mouse or with touch) from one area to another (see figure 2). If a box is 'released' (by letting go with the mouse or touch) into an area that already contains a box, the boxes switch position (as in the moved box adopts the new position and the box at the position moves to the origin of the moved box). Boxes that are released into area not surrounded by dots is returned to its original position.

The program does not require physics, each box has a weight property that is used for determining the scales animation. When at least one box is in one of the two scale areas, the scales and box/es move depending on a comparison of the weight property of the boxes.

If anyone could point me in the right direction on where to start, that would be a huge help! I can't seem to find any posts for my particular problem (but I might not be searching the right keywords).

Cheers,

Jack

EDIT: Added text and images from link

From what I can understand by your description you are actually not trying to snap to grid, but to an object?

Ill try to explain how you can do it, without it getting to messy, since there are quite some things involved.

A. Drag/Dropping boxes

Will start with the drag drop functionality as it will be needed later on. So as you start dragging a box you make it go to top of layer.

Object.Move to top (This is important or the returning of boxes might not work correctly)

The reason for this is because it makes it easier to make the boxes switch place later on.

You can use the drag&drop behaviour to handle the drag/dropping.

Also you add the pin behaviour.

For each of the boxes and the dotted areas that holds them in the bottom, you add a variable, could be the color if they are unique. This is so you know where each of them should go If they are replaced or dropped outside the dotted boxes.

So when you have to return them you just test on this variable.

Dotted boxes

These are the collision detectors. So each of the dotted markings should be a Sprite object with a collision mesh that fits there size or smaller depending on whether you want to use some snap functionality or not. As the user drags the boxes you need to check if its overlapping or not.

"This is a simple Box overlapping Dotted box or not on release."

For each of these boxes you add a variable called End which will keep track of which of the dotted boxes the user dropped the box in. So the left one could have a value of 1 and the right a value of 2.

Make the boxes go the right place

Since the dotted collision boxes are static you actually doesn't snap to these as it would make the animation of the scale weird. instead you add 1 imagepoint to each end of the scale. And use these as snapping points. (You will have to move the imagepoint for each of the boxes to the bottom so they will line up correctly).

So when the player releases a box over a dotted area you snap the box to the correct imagepoint on the scale.

Events needed

Event: Snap to scale

If Box is overlapping Dotted box

Dotted box.End = 1 (Left one)

DragDrop on released

Action:

Box move to position scale.imagepoint("Left")

Pin Box to scale ("Position and Angle")

And you add one for the other end as well of course.

(You might have to enable the pin behaviour, so it works correctly with the scale animation)

Event: Replace and return box

If Box is overlapping Dotted box

If Box is overlapping Another box

DragDrop on released

Pick bottom box (This is why you move the one you are dragging to the top, so its always the one already in the dotted box that gets returned)

Action:

Box disable pin to object behaviour. (This will make sure that the box that are returned doesn't follow the scale as it moves.

Sub event: Return the bottom box

Pick "Box holder" where color = box.color (This will pick the correct box holder in the bottom)

Action (Sub event):

Box set position to "Box holder" (This will move the box to the correct box holder, also you might have to correct the imagepoints if they don't match up)

That should do it I think, you might have to add a bit here and there depending on how you have made it. Then you just have to add the animation of the scale based on the weight of the boxes or something.

Hope it makes sense

Thanks nimos100! That was really helpful. Thought about this overnight and had thought of some of those methods myself, it just learning how to do it within C2. There are some things I didn't understand from your post, hopefully you can help me understand them.

Also you add the pin behaviour.

For each of the boxes and the dotted areas that holds them in the bottom, you add a variable, could be the color if they are unique. This is so you know where each of them should go If they are replaced or dropped outside the dotted boxes.

So when you have to return them you just test on this variable.

I didn't state this properly in my original post (so my fault), but the blocks should be able to moved multiple times and reordered (so it could be green, red, purple, yellow, blue, etc). From what I presume you said, this would fix the objects to a container.

I have been able to implement a few things based off what you said and some investigation of my own, the capx is available here. I currently only have the free version, but am in the process of getting the full version shortly so I can use families instead of objects.

I have implemented:

• Moving shapes
• Boxes snapping to containers
• Boxes returning to container if not moved to container

What I would love help to implement is how to make objects switch positions. When a box moves into a container that has a box in it, it needs to send the box that was there to the container the new box came from, so their places 'switch'. I put a note in the .capx.

I'm really impressed with how quickly I can prototype in Construct 2.

Cheers, Jack.

[quote:hi77516l]I didn't state this properly in my original post (so my fault), but the blocks should be able to moved multiple times and reordered (so it could be green, red, purple, yellow, blue, etc). From what I presume you said, this would fix the objects to a container.

Might be me that misunderstood your pictures, it looks like what you wanted was as the boxes are placed on the scale that the scale should be animated so the heavier boxes tip the scale.

If that's the case, then the objects will only be temporarily fixed to the scale so they line up with the animation, and then unfixed as a new box is move to the dotted area to replace it. The pin behaviour allows you to do this.

[quote:hi77516l]What I would love help to implement is how to make objects switch positions. When a box moves into a container that has a box in it, it needs to send the box that was there to the container the new box came from, so their places 'switch'. I put a note in the .capx.

You can do that by changing and adding a few things to what I wrote.

1. If you added the variable called "color" you can remove that.

2. To the boxes that you move around you add a variable called "Container_UID" which will hold the UID of the container where the box is currently placed. (You just initialize these from the start in C2 design mode according to where they are placed and then as the boxes are moved around you overwrite them get overwritten)

3. As you start moving a box you save this "Container_UID" in a global variable.

4. By doing that you can then use this variable both when a box is dropped outside the scale and when you need to replace a box.

Event: Start moving box

On DragDrop of box

Action:

Set <Global variable> = Box.Container_UID

Event: Replace and return box

If Box is overlapping Dotted box

If Box is overlapping Another box

DragDrop on released

Pick bottom box (This is why you move the one you are dragging to the top, so its always the one already in the dotted box that gets returned)

Action:

Box disable pin to object behaviour. (This will make sure that the box that are returned doesn't follow the scale as it moves.

Sub event to "Replace and return box": Return the bottom box

Pick Container where UID = <Global variable> (Will pick the container from where you took the box)

Set Box position to Container

Box.Container_UID = Container.UID (This will store the Container.UID with the box, so next time you move it, you again know where you took it from)

Thanks for that again! I'm away from my computer but that makes a lot of sense, except I have a question about one part:

Pick bottom box (This is why you move the one you are dragging to the top, so its always the one already in the dotted box that gets returned)

If I have 8 boxes on the same layer, wouldn't the box that is being overlapped might not be the bottom box on that layer? Or does that function select the item that is below the box and lower on the same layer?

Tried to find some documentation on this but haven't found anything useful yet. Will try and implement what you sent me in a few hours and will let you know how I go.

Thanks! Jack.

If im correct, which I think I am, but have to admit I haven't actually tested it. But then you need to take the other conditions into account as well.

If Box is overlapping Dotted box

(So its only the boxes that are overlapping the Dotted box, Which will only be the one currently there and the one you drag, and if there are one in the other dotted box. And since you move the one you are dragging to the top. It also means that the others ofc must be the lower.)

If Box is overlapping Another box

(This make sure that its the correct box that gets selected, so its not the box in the other dotted box should there be one there)

DragDrop on released

(Will just make sure that it doesn't trigger at the wrong time)

Pick bottom box

(This just pick the lowest box, so you can return it.)

I think I have it, but it doesn't work because I'm pretty sure I need families to properly detect two of the same objects overlapping, hopefully I can get the full version in the next day or two.

If anyone wants to download my capx and try and get the boxes to swap if overlapped (see posts above for more info), that would be terrific!

[quote:3969sg9s]I think I have it, but it doesn't work because I'm pretty sure I need families to properly detect two of the same objects overlapping, hopefully I can get the full version in the next day or two.

You can do it without, but as you said it would be easier to use families. But you can do it like this:

Example;

If Box is overlapping Dotted box

DragDrop on released

Sub event

If Green Box is overlapping Another Red box (If it does you add Pick Red box)

else

If Green Box is overlapping Another Blue box (If it does you add Pick Blue box)

else

etc etc.

But it will quickly get messy, so if you get the full version soon, I would probably wait as well

Righto, so I got access to the standard edition of C2 today (it doesn't show up on my profile as it's a business license and this is my personal account).

I rewrote a lot of the code to have the following functions:

• Boxes snap to containers - DONE!
• Boxes snap back to original container if dropped in empty space - DONE!
• Boxes switch places if dropped on one another - Still broken!

The code works in my head, but I'm obviously not understanding one of the ways C2 works. If anyone can have check out my .capx attached and see how to fix it, that would be grand!

Cheers!

[attachment=0:qj3ltdd8][/attachment:qj3ltdd8]

I have tested your file not working properly. If you place Blue on top of Red the then nothing hapeens. Only things happen is Red is replaced by Blue and Red is in background

It's still broken, but the logic makes sense to me, but I'm obviously missing something. I would love some advice on how to get it working.

Here is an example of how to do it. Its not a fully working example, but just shows the principles of how you do it. So you can drag boxes from the bottom container to the scale and they will switch position. But dragging from one container to another container will not make them switch position. Same goes if you drag from the scale to a container. So always drag from a container to the scale or return the box from the scale to an empty container in the bottom first.

However you can add all these things to it if you want.

Thank you Nimos100! Your example helped loads, and with some tinkering and tuning I got it working the way I wanted. I've attached my capx.

[attachment=0:31tu4r7y][/attachment:31tu4r7y]

Seems like there is no bugs currently and is as optimised as I can make it.

Thanks to everyone for their help, onto the new stage of development, animating!

Thanks guys!

I was searching for how to best implement a snap feature and this post helped me to understand a lot more about how to do this with c2.

Cheers,

v