Monster shadow


How to make a drag and drop game in Unity

I'll show you how to quickly get your drag and drop game up and running while teaching you a few key Unity concepts along the way, such as: Drag & drop Detecting proximity (distance between objects) Playing sounds ========= ❤️ Become a Tarobro on Patreon: ========= 🔔 SUBSCRIBE: 🗨️ DISCORD: ✅ MORE TUTORIALS: 0:00 Intro 0:11 Creating the prefabs 1:05 Drag and drop the puzzle piece 7:28 Setting up the slot 9:14 PuzzleManager (spawning pieces) 11:45 Selecting random list elements (puzzle pieces) 16:45 Dropping the pieces into the slot

Can you share the scripts......Its hard to see in this video because of my slow internet connection.
Tarodev: "Hopefully this helped you on your way to making whatever game it is, probably a kiddy game..." Meanwhile, here's me using what I learned from this video to swap weapons and ammo types around in my endless shooter game 👀
You're abusing the power!!
John Angelo Manuel
Hi, this is awesome! Liked and Subscribed. Is there a way to show victory panel when they placed all of them in the slot correctly. Thank you in advance.
Việt Anh Nguyễn
Thanks man, your video is my lifesaver
my brain is too dirty for this
Micaiah Stevens
I recently found Tarodev and love his content. I am HOPING its an accent, my wife was like he is NOT saying what I think he is saying. I can't even think how to say 'Slot' correctly. Its like Slaat, without the 'u' sound.
What do you have in your Main Camera folder? How did you make your Scene the same background as your Game
Micaiah Stevens
I took a look and it was HARD to tell, he could have done it multiple ways. A Camera with the settings to SolidColor (then choose a Green Color) A Canvas with an Image. A GameObject with a SpriteRenderer (More in line with how he coded the rest of the game) Either way you need some Image, or SpriteRenderer to set the sprite to a graphics, I like png's Looking at the video again, it seems more solid color, but all three are options. Than size, place according to your game.
Jadon Mullinex
I recently found your channel... you are my new favorite Unity Dev channel! I'm working on a Mobile Kids Game and this is perfect! Love your content!
Valentin Tercinier
Hello, great tutorial thank you I did not know it could be so easy. Do you know if it is easily feasible in unity to cut a "cake" ( a disk ) into several parts ( quarters for example ) ? And then drag and drop those parts ?
Micaiah Stevens
That sounds exactly like a 'Radial Menu', and then you apply your scripts and logic along the same lines as this video.
Humayra Bakar
I cant drag object. Object not set to an instance
Micaiah Stevens
not set to an instance, was discussed how to figure this out in another video. Basically Unity is saying you did not setup your object in the editor, for prefabs and sprite renderers and such.
Navodya Liyanage
can u plz share the github link as well?
mousa mohamed
i have no function order by for slotsPrefabsSlots List ?
Micaiah Stevens
This is because you need to include.. 'Using System.Linq' At the top of your files with the other using.
how can i set the position of the the dragndrop button ? not to random place the position
Micaiah Stevens
Will include both replies to address random, see other commentor Vector3 pos; One way is to set the pos.x = Rnadom.Range(-25, 25) myObject.transform.position = pos; (Since you can't change position directly) and do that for each x/y/z you want, depending on how you see your scene up. This DOES run into overlap, but that's a BIT more complicated.
Alana do Nascimento Freitas
Thank you! Perfect clip!!! Awesome! AMAZING!
Dat D
Hello Tarodev, thanks for your tutorial. I wanted to know whether you can make a tutorial where you can drag and drop the items. In Addition the item should rotate with a mouse movement. Thank you in advanced.
Dat D
@Tarodev Thank you. I will try it. I also joined your discord server.
@Dat D Ah! So to achieve that, each shape should have an object as a child which will contain the outline and the handle which pops up. When the player clicks the shape you enable the child object. Once they grab the rotation handle it should be as simple as rotating the shape on its pivot... If you put the rotation handle on the up axis you could simply do something like: transform.up = Camera.main.ScreenToWorldPoint(Input.mousePosition); Come into my discord if you need additional clarification :)
Dat D
@Tarodev A example can be found on this website:
Dat D
@Tarodev Hello Tarodev, thanks for your reply. I meant for example: Rotate the figure 6 to the figure 9 with a 180 degree mouse movement. I tried to recreate a tangram game, where you have to move several pieces and rotate it to complete a big geometrical shape.
Do you mean adding a bit of swing to it as you move it left and right? You could compare current position with the position n seconds ago and lerp rotation based on the delta. If you mean rotating the more you slide it across the screen you could just add rotation based on the x position. Or did I miss your objective completely?
Hdgg Fhjb
Your work is great
Suppanut Pongvijan
Sir, can we random the place of object? Thank you so much
Micaiah Stevens
Will include both replies to address random, see other commenter transform.position = Random.insideUnitSphere * 5; (This will need to worked around a bit if your in UI or Scene view placement of your game.) This DOES run into overlap, but that's a BIT more complicated.
hi, this is a great tutorial, thank you so much! you're awesome
Glad I could teach you something :)
Can you make a video on how you made such good graphics in unity 3d ?
@Tarodev OH just a recomandation you can make a discord server for subscribers to talk hang out give video ideas and stuff
@Tarodev very cool
I sure can! Stay tuned :)
Now I know how to add sounds to my game. :)
@Micaiah Stevens thanks
Micaiah Stevens
I would follow up with his longer explanation of using a AudioManager, such as the Structured video. This gives you more flexibility and can adding settings later. You can also spawn an audio prefab, and initialize it, with your sound as an alternative.


in this video i'll show you how to create a classic drag-and-drop game for
kids you'll learn how to drag and drop detect
proximity play sounds and pretty much have the
most fun you've ever had in your entire life
let's get into it okay to achieve this we'll need
three components one will be the actual puzzle
manager the the board if you will another will be the
puzzle piece which can sit over here and then another one will be like the
puzzle where they actually have to um you know drag the drag the puzzle
piece over to to finish the game so let's make our
prefabs first we'll make our puzzle piece so
let's call this puzzle piece um and then let's
create a script here called puzzle piece let's also
create a puzzle manager while we're at it
and we'll also create a puzzle sludge puzzle sludge okay
so for our puzzle piece let's put on our puzzle piece scripts
now what do we actually need on a puzzle piece
well we need to be able to actually grab it first so let's add a
way to do that add a box collider and now
depending on what you're aiming this for probably kids
and it'll probably be on an iphone or something like that uh you want them to
be able to grab it without getting annoyed that they're not grabbing it
just remember that their fingers are not too dexterous yet so
maybe increase the grab area of the box um it'll just make for a better player
experience so we've got that let's add a audio source
just so that we can play some sounds maybe when we pick it up and drop it
um and that might actually be it for now so
let's just create that in our prefabs folder
and then here this will be our puzzle slot
and let's actually make this call this base because i'm actually going to
create a whole bunch of prefab variants for all these different
pieces here that will have their own sprites and their own
unique sounds and and such so on this base
let's add the slot let's add an audio source
and then let's make that a prefab so let's go into our scripts let's start
with a puzzle piece let's actually start
dragging it around okay so close that up as we don't need
it all right let's hook into our on mouse
down events and we need to do a few things here so
let's create a boolean to determine if we're dragging or not
then it would be nice to give the player some feedback that
they've actually grabbed it so let's add a little
audio clip let's let's grab a reference to our audio source
and a reference to uh [Music]
have a pickup clip and a drop clip now technically you should be
using a sound manager and i will leave a link to a video that
i did on a sound manager just up there but this is good just for the sake of
the clip so now that they've pressed their mouse
down let's say dragging equals true and then let's
take our audio source and play one shot and our pickup clip just like that
so let's just first get that organized so on our puzzle piece let's
drag in our references so put in our reference there
and i've got some audio here one for each of the
numbers and then a drop and a pickup so let's put the drop in
and the pickup and if we just simply press play already
we can already hear that it's picking it up not really
too exciting yet so now that we're dragging we need to actually drag it
so let's hook into our update function and we'll say if they're not dragging
and just return we don't want to do anything unless they're dragging now we
want to set our transform position equal to where the mouse is so what
we're going to do is we're going to grab our mouse position by saying
camera dot main screen to world point and simply putting in our
mouse position and we only need the vector 2 of this it
will actually include the z-axis so i'm just going to cast it directly to
vector 2 that way it won't actually pin it at
wherever the camera is minus 10 or um and it will be on zero so transform
position equals mouse position now this will work
but you'll see it doesn't yield the best results i'll show you why
so if i grab it right here it's going to snap
up to my up to my mouse okay and it doesn't look too good so
what we need to do is we need to grab a reference
to our offset and the way we get our offset is when we put our mouse down
we'll say offset equals and now we actually need
this here in two different places so let's create a function
vector2 get mouse pause and we'll just return that and as we're
already declaring that's going to be a vector 2 we don't need to cast it
very much position just like that and our offset will be the mouse
position minus our current transform position
and let's just cast that vector 2 to make that work so there we
go and now when we actually move it we'll say
uh we're moving it to the mouse position minus
uh offset that we originally set and now you'll see it should
be nice wherever you grab it it'll stay stay where it is okay
now when we actually drop it so on mouse up and as we haven't set up our slot
right now uh regardless of where we drop it let's
just send it back to uh its original position so we actually
need to grab that don't we let's get another reference to another
vector 2 called original position
and on awake let's say original position equals
transform position and then as soon as we let go of our
mouse we'll just say transform position equals original position
and then we'll also say dragging equals false
all right so now we should just be able to grab it and it will go back
to its original position and we'd also like to play a little sound here
wouldn't we say source play one shot
and drop clip okay let's work on the slot a little bit
so let's grab some references this one will also need
a audio source and i would like to play a sound
whenever the player actually completes this puzzle piece so
let's grab a audio clip reference and call this the complete clip
like that all right so let's go back on here and as i'm going to be creating
prefab variants for this um i'm going to just in my
in my slot i'll add my reference there and then i'll save my overrides and
delete it from the scene and now i'm going to create prefab
variant and let's call this puzzle slot 1
and i'm going to do this all the way to 9 as that's how many numbers i've got
so on my puzzle slot 1 i'm going to add this here and i'm going to put in
obviously it's already one and then i'm going to do it for the rest of my
slots so here two in my audio source and two there
okay that was uh really confusing me that was hard for me to do for some
reason um all right so we've got uh puzzle
slots and they've all got their own completion sound and uh we better
actually turn off on awake so on the puzzle slot base just
change ion awake and then that would change for all of your variants
which is the power of variance if you have not been using them
um okay so we want to actually play this clip when
we get placed so let's do let's make a placed
function which will be called from our actual puzzle piece and we'll
say source play one shot and a complete clip
just like that let's actually spawn these pieces so in our puzzle manager
let's create a function called spawn and we need a reference to our puzzle
slots so private list puzzle slot
slot prefabs and we need places to spawn our slots and
just spawn up puzzle pieces so let's create
two references to two different transforms and this will be parent
and peace parents and let's just set that up in
the editor i'll make a empty game object call it
puzzle manager and i'll just zero that out
then i'll create two uh two children call it slap parents and
peace parents and now
i'm just gonna make these kind of like scattered
um obviously you could write a little function to do this but i'm just gonna
do it just like that and then on the piece
parents i'm just gonna just copy them for gravity
just like that so now on our puzzle manager
let's put on our scripts and then put on our
references slot parent peace parent and then to put all these in here an easy
way to do is to just lock the editor up here
and that way you can click away from it and it will stay there let's grab all of
our slots and put them in there and now that i'm
thinking about it we need um we need a reference to our puzzle
piece prefab too puzzle piece
[Music] let's just quickly set that so we don't
forget make sure we've saved all of our changes
and we can delete that now puzzle manager puzzle piece put in a
piece parent so we've got all of our references there
now we need to actually spawn them so just for this i'll probably just
spawn uh three or four of them so let's grab
random pieces to spawn so random search and
we'll say uh slot prefabs just
so a good way to just grab a random selection from a group
is say just order by and we'll order by slot and then here we'll just say random
value so basically it's going to be iterating through the list
and it's just going to be assigning a random value to them all and then it's
just going to order the list to those random values so and then you
can just take three like that or however you want
to grab and then just set it to a list
so this could be this could be based on uh
difficulty level or you know whatever you want to do so now you've got your
random set let's spawn them so let's iterate for random set dot
counts and the first thing we need to do is
spawn a sludge spawned slot equals
um instantiates and we're spawning something from our random set there
and then we're wanting to spawn it on one of our points
of the slot parent so let's say slot parent
dot get child and let's send in i there and then just position so that's
that's going it's grabbing the slot parent and then
it's going to it'll be this one first and then we're just setting it to the
position of that um that object and then just with turning
on an identity just keep it as it is uh now that we've got
our slot there we want to spawn uh puzzle piece
so spawned peace let's instantiate it um and basically we're doing pretty much
exactly this here right we don't need a random piece
because we're spawning our puzzle piece and instead of the slot parent we'll use
our piece parent okay now that we've spawned this puzzle
piece we actually need to instantiate it don't we we need to we need to
tell it that this is the slot that you belong to and
that you need to use the same sprite as the slot don't we so how would we do
that an easy way would be to create a public
reference to your sprite renderer here like that
and that's actually all you need to do there and then in the puzzle piece
we can create a public void initialize function and this will take
in a puzzle slot so basically it's um
it's brother or sister or whatever you want to do the slot that it belongs to
and let's create a reference here to our puzzle slot
and we would like to change our sprite render as well
so let's grab that sprite renderer okay so in our knit function let's set
our renderer.sprite equal to the sludge renderer dot sprite
the what the renderer that we just exposed there
let's also say sludge equals slot all right so now in our puzzle manager
we can say
and then let's just send in our spawned slot
and that should initialize just fine now if we look into a start function here we
can actually call spawn and let's see how that goes we set up
all of our references i know on a slot base we need to put in
sprite renderer reference don't we ah and i've just realized i put my complete
clip for all of my puzzle slots actually in the audio
source instead of the complete clip puzzle slot
uh but that's fine instead of saying this
we can just remove complete clip and then we can say
just play because it's already in the source and we can
we're not playing anything else we can just play it straight away
okay now we should be able to press play
and the variable renderer of puzzle piece has not been assigned
we can do that renderer puzzle paste let's try that again and there we go so
we've got our puzzle pieces and still no functionality between them
and also our puzzle pieces are ending up behind so let's actually go into our
puzzle piece renderer and just change the order to
one and now that should always be in front all right so last
thing we need to do is actually determine if we're dropping it into the
slot or coming back here so let's add that last bit of
functionality puzzle piece okay on mouse up
so instead of just immediately saying nope you've lost
let's say if vector2 distance and we'll say our current transform
position and now that we've got our slot reference we can say
slot transform position so the distance between those two points
is less than let's say three they win so what we want to do is set
transform position equals to slot transform position
and then we can say slot dot what did we call it we said placed so
that we can play that the sound and then we can say and let's
actually say add another variable here called
placed and we'll say placed equals true
then else so if they did not manage to get it
close enough because it is pretty tricky let's say
transform position is back to the original position and dragging is false
and actually we only want to play this sound
if they didn't get it right because the the actual like one
two sound will be playing uh if they do get it right
and now we want placed to override everything so
uh we don't actually need to set dragging to false here because
if we say that we've placed the object regardless of
them clicking we just want to return so um
if they're placed return and or if they're not if they haven't placed
and they're not dragging also return okay and that should actually be it that
should be a full game let's try it
by three three beautiful six excellent nine beautiful it's too
easy for me so there we go uh pretty easy
uh probably a pretty long video actually but uh we went through a few things
uh hopefully this helped you on your way to making
whatever game it is probably a kitty game if you liked it or
if you learned something give it a thumbs up remember to subscribe
and i will see you for the next tutorial you