ไม่สามารถเล่นวิดีโอนี้
ขออภัยในความไม่สะดวก
Unity Tutorial - Drag & Drop Tutorial #1 [RPGs, Card Games, uGUI]
ฝัง
- เผยแพร่เมื่อ 16 ส.ค. 2024
- Make sure to SUBSCRIBE so you don't miss a video!
Download the complete project: quill18.com/uni...
Also, please feel free to ask lots of questions in the comments.
This channel is mostly all about game programming tutorials, specifically with Unity 3d. You may also be interested in my primary channel, where I play and review games: / quill18
I can be reached at:
quill18@quill18.com
/ quill18
/ quill18
![Unity Tutorial - Drag & Drop Tutorial #2 [RPGs, Card Games, uGUI]](http://i.ytimg.com/vi/P66SSOzCqFU/mqdefault.jpg)
![Unity Tutorial - Drag & Drop Tutorial #2 [RPGs, Card Games, uGUI]](/img/tr.png)
I actually really appreciate that these videos have you miss stuff, "screw up", et cetera. I actually learn just as much about your method of solving stuff as the actual content: REALLY USEFUL.
Great videos, I just finished the second. Thanks!
I enjoy how real you are, not snipping when you mess up. These are things that happen when coding and working through them is a valuable lesson. I really liked that all 3 steps were published on the same day, even though I didn't find them til now.
All three parts will be live today.
you are amazing. i liked that you demo had card reordering when even blizzard's heart stone doesnt and it was created with unity as you may know.
***** That's a design choice, though. Not reordering hand in HS allows people to see when you drew a card, which is important at high levels :)
I have a project for you quill it's a easy one if you want...let me know if you are up for it thanks 😁😁😁
Sounds like you're saying "Dragon Drop". Sounds like some kind of wrestling move.
ty, i always have a hard time coming up with a name for my games; "dragon drop" will do xD
dragon smackdown lol
Great "Dragon Drop" tutorial
@Luka Grouwstra everyone needs a hobby xD
Once you read this there's no different way to hear it
I love how you show the process and how you come to answers and deal with issues that come up (or would come up in theory). The official Unity tutorials seem to often just say "1. do this. 2. do that. 3. enter this 4. done" and you end up not really learning much.
dude, to be perfectly honest I am glad that you didn't edit out the mistakes. Learning and following these kinds of tutorials is one thing, but seeing troubleshooting in action and then understanding why the problem occured in the first place is significantly more valuable than being given a step by step instructional on how to do something! Thank you so much!
Quill, thank you very very very much.
I was just about to give up on doing my card game, because i couldn't find anything that was really useful and i was veeeery lost, so i started to lose motivation. But now i found this video and i am finally starting to understand a lot of things and i am as motivated as ever again. So thanks a lot =D
Situations are exactly the same for me, dude! Lets keep it up
OMG. I have been looking for a tutorial covering something like the Hearthstone interface for a long time now. It really pays off to be subscribed to your channel, Quill.
I just realized this video is 8 years old. I can't believe it, most videos from only 5 years ago have quality worse that an ebay product. This being 8 years old with such good quality is amazing to me
Thanks for not locking your tutorials behind a pay wall. Seriously, it saves me a lot of stress trying to make a complex TCG simulator.
Hey! Just wanted to say thanks for this! Excellent, clear instructions. Your approach to teaching is really natural - warm, exploration oriented, curious - and it's helped me feel welcomed to the Unity dev community (this is my first solo dev project). Thankstytytyty
Thanks for this tutorial, you explained it so I could finally understand. I viewed another similar tutorial that did not explain the reason for everything, but in that tutorial, I did learn that you can right-click on "IBeginDragHandler" and choose "Refractor" > "implement interface", and it will create the function for you, which you can position in your code anywhere by pressing the up and down arrows.
It is insanely valuable to see problems appear in the middle of work and the process of solving those! Thanks a lot :)
Great job with this tutorial! I usually can't stand when people present tutorials and they run into issues like you did. However, I appreciate when coding tutorials do because there's so many errors you can run into without realizing what the heck is going on. Great enthusiasm, great explanation, great tutorial overall.
Liked and subscribed!
Perfect timing! I've been trying to figure this stuff out for a couple of weeks. Thanks.
I havent watched the 2nd part yet so i don't know what you are proposing yet but the way i would do it is to make the Drag Start function save the original location and make the Drag End function check if it is colliding with a slot it can go into and then if it does set it to the slots position and if it doesnt set it back to the original location
I gotta say I love your 'on the fly trouble shooting', makes one less spoiled when it comes to handling errors :) ty!
I've been subscribed to your gaming channel for some time now, glad to finally find out that you have been doing coding tutorials as well.
if anyone's still using this & needs the simple solution to add the offset mentioned at @23:43:
public class Draggable : MonoBehaviour, IBeginDragHandler, IDragHandler, IEndDragHandler
{
Vector2 offset;
public void OnBeginDrag(PointerEventData eventData)
{
Debug.Log("OnBeginDrag");
offset = transform.position - new Vector3(eventData.position.x, eventData.position.y, 0);
}
public void OnDrag(PointerEventData eventData)
{
Debug.Log("OnDrag");
transform.position = eventData.position + offset;
}
public void OnEndDrag(PointerEventData eventData)
{
Debug.Log("OnEndDrag");
}
}
Thanks man! I couldnt figure out how to fix the offset
I've been looking all over for a tutorial about this, you're a life saver Quill
If anyone wants to know how to make it draggable from any position, just do something like:
Vector2 dragOffset = new Vector2();
public void OnBeginDrag(PointerEventData eventData)
{
dragOffset = (new Vector2(this.transform.position.x, this.transform.position.y) - eventData.position);
}
public void OnDrag(PointerEventData eventData)
{
this.transform.position = (eventData.position + dragOffset);
}
Sincerely liked this. You're awesome at explaining, and, for the first time, I'm so sorry I can't donate to someone as talented as you. Also, so "human-ish" to be "improvising", trying to rebuild all of the system on the fly, showing not only ways to do things, but also ways to solve problems and how to look at them to understand where the problem is!
Fantastic video. Love the pace and level of detail you go into. Liked and subscribed!
Extremely helpful, nice slow approach which is great since you actually explain what things are doing, so that when i use these idea's i know WHY I'm using them, rather than just copying blindly. Thanks :)
Simple, informative, and useful tutorial. You're an engaging presenter. Thanks for creating, I really appreciate your time.
"Why am I doing this? Because I have to."
I know that feeling!
I love these videos this is such a relief from most tutorials where I'm like yep this is rocket science. this is much easier to understand.
Great video. Glad to see the channel active again. Out of curiosity, where did you get the sample projects?
***** All the official Unity sample projects are on the asset store now. (The are free.)
i'm hoping these videos will help me create the card game i want to make. I'm going for something similar to Yu-Gi-Oh and Pokemon tcg but in what looks like a battlefield kind of layout. So I hope your videos will also provide how the npc functions. I want to make a card game that can be PvP, PvE, and co-op. PvE referring to you vs. an npc instead of an actual player.
btw, thank you for the video! I recently learned JavaScript so this C# coding you made actually makes sense to me based on what everything is meant to do in your script! My only challenge now will be making the digital art for the pics of the cards as well as the backgrounds.
Thanks for these videos. They still work. This is going to help me make my card game. Again Thank you.
FYI, a perfect card aspect ratio would be 100x140. Poker cards (and, consequently, Magic cards) are exactly 2.5 by 3.5 inches.
We really appreciate your effort Quill. Thanks for the tutorials
Nice tutorial. Just something to keep in mind, layouts (Grid, horizontal, vertical) want to keep a certain vertical or horizontal pixel count which tends not to work well when changing screen resolutions.
Wow, wow, wow I really need to get better at UI and this appears! I'm hyped.
Thanks Quill, thank you so much for doing this, especially in C# and not JS!
Thanks a bunch, this is an excellent tutorial, you don't waste any time, everything is useful and you know how to say things in order for me to understand.
All of your tutorials are so much awesome
Thanks for keeping this video up. I recently purchased the CCG Kit asset for unity, but the documentation only covers how to use their prefabs / assets.
Super quick n helpful. Could you explain a bit more thoroughly how to keep the mouse icon static opposed to it moving to the middle of the object we're trying to drag?
does the object have to be a UI? it doesn't seem to work for me with normal objects..the drag handler is not doing anything
here's the code in case it doesn't have to be a UI:
using System.Collections;
using System.Collections.Generic;
using UnityEngine;
using UnityEngine.EventSystems;
public class draggable : MonoBehaviour, IBeginDragHandler, IDragHandler, IEndDragHandler {
public void OnBeginDrag (PointerEventData d) {
}
public void OnDrag (PointerEventData data) {
Debug.Log ("working");
this.transform.position = data.position;
}
public void OnEndDrag (PointerEventData d) {
}
}
somehow, the sprite i'm trying to drag disappears and never comes back after I trigger OnDrag. did it happen to anyone else? can't fix it, googling didn't help. I tried rearranging objects in canvas so that my bg image is upper in hierarchy than the sprite i'm intending to move, but it disappears anyway :( please help
Hi Aliona, hope you did found a solution but if you don't consider than it's an old tutorial so i guess it's not really useful anymore. Anyway, having the same problem i end on following this tutorial th-cam.com/video/BGr-7GZJNXg/w-d-xo.html , so far it looks more suitable, good luck!
Very cool! Glad to see some tutorials involving the new UI system. Do you plan on doing more with the Multiplayer FPS tutorial too? You gave us a great start but I'd also really like to see the next few steps. Thanks!!
woot! unity 5! :)
thanks for the tutorial!
unity can be confusing at times haha, the thing with "IDragHandler" xD
I love your OCD. "I must make sure there is NO overlap!!!"
This is still great today. Thanks!
OMG - I had no idea you can hold alt or shift to change the auto-anchors! There are a few things I've been upset don't exist and I've had to do manually, but they do exist and are just 'hidden'.
Thank you so much for doing these tutorials, they really help me a lot! :)
I just pause at the wrong point and try and try and try........
Thanks very much, even six years still usefull!
Yay ! I recently asked for a new tutorial and THERE IT IS !
Can't I use these: IBeginDragHandler, IDragHandler, IEndDragHandler, IPointerEnterHandler, IPointerExitHandler, when using World Space? Because I seem to have problems with IPointerEnterHandler, IPointerExitHandler now that I changed to world space. I changed to world space because i need 2 cameras in two different locations of the same canvas...
Please continue the FPS series!
Love you Quill!
Thanks a lot . I was searching that Tutorial from great time . You solved my Biggest Problem .
just looked through your channel and it seems to have many tutorials i'll need, i might be drunk as all fuck but you just earned yourself a new sub ;)
at last the king is back
Duuude.. Finally i know how unity works... Thanks sooo much 🙏
Thanks for doing these, i am planning a side project and this will come in handy! :)
I dunno sounds to me like you should just be able to modify drag and drop behavior through object properties. Still dont get why it wouldnt be a built-in solution that just has a setting for each of the common use-cases..
This video is such a drag...badum diss. Nice video quill, helped me alot :)
You make my day, I kept on doing it wrong. I was using Button + Mouse event !
Thank you :p
Could you tell me how to drag a card on the top corner more specifically? I still cannot understand after you quickly describe the solution at 23:33.
Thanks!
Incase anyone comes across this:
When you begin the drag you find the difference between the center of the object and the mouse and store that difference in a variable, then when it comes to the OnDrag function you have the object position equal the mouse position + the offset
public class Draggable : MonoBehaviour, IBeginDragHandler, IDragHandler, IEndDragHandler
{
float xOffset = 0f;
float yOffset = 0f;
public void OnBeginDrag(PointerEventData eventData)
{
xOffset = this.transform.position.x - eventData.position.x;
yOffset = this.transform.position.y - eventData.position.y;
}
public void OnDrag(PointerEventData eventData)
{
this.transform.position = new Vector3(eventData.position.x + xOffset, eventData.position.y + yOffset, 0);
}
}
Thanks so much for the tutorial, it has been very useful for my project!
You are god. I'm working on a microbiology project and this is perfect!
Question: This works fine for UI images and such. but it doesn't work on prefab gameobjects for some reason, is there anything else I need to do for that?
We use to do it with just one image and a list of polygon points for each "hot area" before things got complicated building solutions that fit many different platforms and more sexy graphics.
I followed everything in this Video to see if this will still work, but for some reason, as soon as i drag something around it dissapears into nowhere :D In the inspector the positions goes nuts, crazy. Maybe if someone read this, maybe even you quill, i would be happy to understand whats happening ^^
Thanks for these wonderful tutorials!
How can I programmatically move a card from one panel to another? and
whether it is possible to set variables on the cards? Thanks!
I use the card as the men in the game.There are 2 windows, the staff and the job is moved from the map window in personnel assignment window, time passes and I need to automatically after a job transfer card back to staff.
Thank you very much!
hi there! i try to drag the card from the canvas "hand" to an cube // i want to make an table with many drag fields. but i hang a little bit :( hope any one have a tip
If anyone is curious about how to create a "smooth" drag instead of one locked to the anchors, this is the solution I implemented to achieve that effect.
Vector2 mousePosition;
public Vector2 difference;
Vector2 currentPosition;
public float smooth;
void Start() {
smooth = Time.deltaTime * 420;
}
public void OnBeginDrag(PointerEventData eventData) {
Debug.Log("OnBeginDrag");
currentPosition = this.transform.position;
mousePosition = eventData.position;
difference = mousePosition - currentPosition;
}
public void OnDrag(PointerEventData eventData) {
position = GetComponent().anchoredPosition;
this.transform.position = eventData.position - difference;
}
What do you mean a "smooth" drag?
This guy is on "Drags" :P
j/k thanks for the great tutorial :)
+SahkanISR I bet he also sits in the cool lunch table with the other cool kids
Can unity be used on Mac? I wanna make my own card game, but I don't know what to use or if it ca be used on my Mac computer. Little help would be amazing. Thank you.
Imbiggen (Embiggen?) has been added to my list of favorite made up words.
Is there any way to drag just a floating copy of the card, and not the actual image?
Very nice. Simple and effective. Thanks.
If you want it to do something when it is in a certain slot. Get the slot and check for the right child then do something. Hope this helps.
[Header("slots")]
[SerializeField]
GameObject godOfLove;
[Header("weapons")]
[SerializeField]
GameObject Heart;
void Update () {
if (godOfLove.transform.FindChild ("heart")) {
Heart.SetActive (true);
} else {
Heart.SetActive (false);
}
Excellent stuff. it works well. Question: do you know how I can access the position of each hand. I am creating a scramble-word-sentence and the user must drag and drop the words in the right order.
This is perfect just what Im looking for ;) will this work on mobile devices as is (without the need to change the code)?
There is a way to make the object be always in the exact mouse point instead of "following" that point when you move the mouse around like in the video?
Nice one ... Superb For Beginners and easy understandable...
Ok there seems to be a bug with my program. I have no clue ,but it does the dragging thing ,but It drops my feel like (-4,-4) is distance from the card.( way lower left). I probably should try a different way or something like that. I am using the personal version and it's up to date.
PLEASE can you remake this tutorial with a grid system? As opposed to making a separate canvas for each of my grid tiles.
And if you manage it so items bigger than 1 tile could be dropped onto the grid (like a city builder) that would make all my dreams come true.
Hi,
How can I programmatically move a card from one panel to another? and whether it is possible to set variables on the cards? Thanks!
Hah, how suitable to use Hearthstone as an example. That game is actually built on Unity.
Any idea of assembly simulation where you drag objects where they should be placed properly. somehow like pc assemble simulations.
Thanks! This was very helpful!
When I basically did what you did in this episode and started dragging stuff around, my FPS went from 2500 or so, all the way to 25-50. Does this only happen to me? Should I ignore it?
Greate video. Keep making these small errors :p they are quite educational
Love your stuff bro! Subbed!
Can I use it to drag and drop an object in android application?
can you use this on objects that are not in the UI? If not, how would you drag something from the UI and drop it in the world space?
i wish there was a tutorial that shows you how to make a deck and make deck shuffle, draw random cards
xD
+Aire
+Serenne
I can't help you guys with how to make a deck, but i can help with some pseudo-code for a shuffle-algorithm i once made:
/// some dataclass representing the cards:
public class Card{
//data: name, values, and that sort of things
}
/// a simple function to shuffle an array of cards! (I believe it also works for lists, with a little adjustment ;-) )
public Card[ ] shuffle( Card[ ] deck) {
int length = deck.length; //how many cards are there?
for(int i=0; i < length-2; i++){
//switch the i-th card of the deck, with a randomly chosen card, one later down the line, (or the i-th
// one itself.
//This way: the first card in the deck wil be chosen randomly from all the cards,
// the second one from al the remaining cards, etcetera
deck = Switch( deck, i, Random.Range(i, length-1) );
}
//you can skip i = length-1, because at this point there is only one card left to pick: the last one, to be
//placed at the last spot... but it's already there so it's a small step you can skip.
//Note: some cards, especially near the top of the deck (the start of the array) might shuffle places several times,
//but that's oke. Exept for the final placement, a card is always moving towards the back of the array, during
// shuffling. And because the deck is finite, this process will end. (So... this algorithm won't work on an infinitly
// large carddeck, but... i'm not really sure that wil ever really be a problem worth considering. :P )
return deck;
}
// a function to switch around two cards from the deck.
public Card[ ] Switch(Card [ ] deck, int i, int j){
Card c = deck[ i ];
deck[ i ] = deck[ j ];
deck[ j ] = c;
return deck;
}
//// I hope this helped you guys!
//// Cheers, and good luck! :D
Check out Sloan Kelly. He does a full tutorial on making a blackjack game with the shuffle and draw mechanic.
This video was very helpful. Thank you.
will this work if i use android platform?(Will the DragEvent respond to touch)
Really confused as to how they implemented this. Why would they implement an interface for each event, as opposed to giving you the ability to just register / unregister event handlers (like we're used to doing on regular C# programs)? They should have put all events on a single IDraggable.
This is a fantastic explanation. Thanks!
Hi, I´m totally new at Unity, my project consists in create a kind of app similar to Packet Tracer, I´ve done the drag & drop of the routers & switches, but I have no idea about how connect these devices with a cable, as I said, it should be similar to Packet Tracer, do you have an idea for this? Or do you know? I would thank you a lot. Thanks and greetings!
Sad doesnt work in 2019 (Unity 2018.3.11f1):(
I tryed to implement it on my Card Game but it just do nothing.
Than I downloaded your Project, but same problem.
in case you (or someone else) are still having this problem, make sure there's a raycast target somewhere on the card then it'll work
If anyone else is having this sort of issue this thread helped me alot forum.unity.com/threads/implement-a-drag-and-drop-script-with-c.130515/
Hey what about making a system like a Minecraft Creative mode were you can pick a Model and can place it were you click maybe with raycast?
That's not drag n drop, and easily implementable. You need a collider on the object, and a raycast on your mouse position. If it hits the collider, check the player's distance from the object, and if it's "close", deactivate it, and add it to your inventory.
I get the wierdest results when doing this in 2d, the card jumps to something like x=2500, y=4000 and z = -5330, is this a feature or a bug?