Drag and drop (with snapping) a 2dSprite for a Dress Up game

I’m trying to make a dress up game, in which clothes will appear in a closet and the player will drag-drop (with snapping) them on the character.

I followed this excellent tutorial by quill18:
youtube video on dragging-dropping-snapping images
where he drag-drops images children of panels children of the canvas.

I’m afraid that the images will not be that flexible later on (if I want to give the draggable objects a fancier look/behaviour) so I was thinking if it’s possible (I guess everything is possible theoretically but I don’t know how easy it is) to use sprites instead of images.

Hi schwertfisch,

I haven’t coded anything like you need, but theoretically it is possible. I’d do it this way:

  • Make sure every clothe has the same pivot point for a bone (like gloves for hand bone, pants for pelvis bone)

  • Get mouse position on the main sprite position (ScreenToWorldPoint might help) and use raycast.

  • Whenever your mouse is near the bone with the selected clothe (for example, pants close to pelvis bone) you can update clothe transform to pelvis bone directly, which will be snapped to the correct position.

  • This way, every kind of clothe can be dragged and dropped to previously determined points. Since raycasting will be on real time, you character can also move while dragging.

Let me know if this helps, or if you need more explanation on specific points.

It’s definitely possible to do it using sprites, you just need to make sure all the sprites have the same dimensions so they’re not offset when you set them to be at the same location. What you need is to categorise each type of clothing e.g. trousers, hat, shirt and for each category you have an anchor point located somewhere on your 2d character’s body. And you make the clothes snap to their specific anchor point.