0
Answered

Snap to object

Anita Sølver 6 years ago in By Screen / Design • updated by Inna Komarovsky 6 years ago 6
Is there any way to make an object snap into a specific place on another object?

I would use this for puzzles and dress-up games. 
It could probably be used for a lot of other things, but these two were the things I would like to use it for.

Puzzles:
When the user drags a puzzle piece really close to where it should be, I want to snap the piece to the exact location where it should be. So when the center is perhaps 10-15 pixels away from the target, it should snap into the right spot. 

Dress-up games:
When the user drags a piece of clothing near the character, I want to snap it in place, again using the same behaviour with a fixed point and a radius around that to trigger the behaviour. 

So, is there such a behaviour, or is there a way to make a behaviour like that, through existing actions/behaviours?

Answer

Answer
Answered
After the element snaps into place, if you'd like it to no longer be movable, then it will need to be a separate element that looks just like the movable one. I recommend using intersections for the effect you're describing.

If you go to the manage screen in InteractBuilder, click the gears on the top panel, and select "Download Sample Apps…," you can download "Butterfly Puzzles" and see the jigsaw puzzles in the builder to help understand how they were put together. Here are the basics:

There should be three copies of each puzzle piece:
  1. The correctly placed piece that is not movable. This piece should be invisible at runtime.
  2. An intersection piece in the same spot as the correctly placed piece. This one should be visible but with 0% opacity.
  3. A movable piece (Drag-Move Self) that is visible at runtime and in a different location.
Use the intersection feature to make the following behaviors happen when the movable piece intersects with the center of the intersection piece:
  1. Hide the movable piece.
  2. Show the correctly placed piece that is not movable.
You can also use the intersection to play a sound effect or add points to a page counter if you want something to happen once all of the pieces have been placed.
GOOD, I'M SATISFIED
Satisfaction mark by Anita Sølver 6 years ago
Answer
Answered
After the element snaps into place, if you'd like it to no longer be movable, then it will need to be a separate element that looks just like the movable one. I recommend using intersections for the effect you're describing.

If you go to the manage screen in InteractBuilder, click the gears on the top panel, and select "Download Sample Apps…," you can download "Butterfly Puzzles" and see the jigsaw puzzles in the builder to help understand how they were put together. Here are the basics:

There should be three copies of each puzzle piece:
  1. The correctly placed piece that is not movable. This piece should be invisible at runtime.
  2. An intersection piece in the same spot as the correctly placed piece. This one should be visible but with 0% opacity.
  3. A movable piece (Drag-Move Self) that is visible at runtime and in a different location.
Use the intersection feature to make the following behaviors happen when the movable piece intersects with the center of the intersection piece:
  1. Hide the movable piece.
  2. Show the correctly placed piece that is not movable.
You can also use the intersection to play a sound effect or add points to a page counter if you want something to happen once all of the pieces have been placed.
I checked out the butterfly puzzles yesterday, to see if something like this was used, but only found drag/self and drag/end.

But as you explain it, it sounds like it could work the way I want it to, so thank you so much :)

I'll give it a spin.
Here is a sample app to show you how the Intersections are working to.
286 - Puzzle Test.zip
You can check them as in the image bellow:

Alin, you are a rockstar! Brilliant!
I've only done 2 pieces so far, and I'm already going crazy: For each visible puzzle piece, I have 3 images to place, 3 intersections and 1 actionset. And I suppose that I should make a counter and AddCounter, if I want to do something when all pieces are placed correctly? That would make intersection number 4.

Is it possible to copy intersections? I guess not, since I would have to change all 3 targets anyway.. just thought I'd ask if there should be any shortcuts, or if there's only a long and winding road ahead of me in this department?

The sample app was really helpful, along with Inna's explanation, by the way.
Thank you once again to both of you =)


Right now this is the only solution, no shortcuts.
Okay. Then I'll just keep going :