Creating a Drag and Drop Spell Bar
Implementing a Drag and Drop Spell Bar:
by Mike Cook.
I am sure this has been covered somewhere in the Unity Forums, but I couldn't find any relevant information when I was starting out on this, so hopefully this tutorial will help someone starting out with Unity. Basically we will be mimicking the spell bar seen in such games as World of Warcraft, or Aion.
Step 1: Plan what you want to do before you do it
I have a very bad habit of "rushing" into things. I get an idea, and I HAVE TO IMPLEMENT IT THAT VERY SECOND. So I quickly slap things together in my main script and it usually results in a mess. I can't stress enough the fact that careful planning will go a long way. For our custom drag and drop spell bar, we want to implement the following features:
- Easily add items to the spell bar.
- Drag and drop items off spell bar to delete them.
- Drag and drop item into empty slot to switch its location.
- Drag and drop item into occupied slot to swap the items.
- Drag and drop feature will be "sticky" meaning the user will have to drag a ways for the icon to disengage from the slot.
- Clicking an item will activate it, or use it.
- Right clicking while dragging will cancel the currently dragged item.
Unity out of the box does not support any button that will accomplish what we want to do (that I am aware of). The default GUI.Button only registers when you release the button, and the Repeat Button only registers when the user is holding the mouse down while above the button. It became clear when I first started this project that I would have to implement my own buttons and ditch Unity's all together.
We actually only need to know 2 things to implement this drag and drop system:
- Where the mouse is when the user presses the mouse button down.
- Where the mouse is when the user releases the mouse button.
Thats pretty much it. It will get a little more complicated then that, but those are the key points to get the drag and drop system to work. One of the hardest parts of this script was "knowing where the mouse is" at all times. I struggled with different ways to loop through different Rect's and try to figure out where the mouse was at. Then I had an idea, what if we check if the mouse is inside a button, as we draw it? It is definitely the way to go, and so we will create our own function to draw each icon that records if the mouse is inside it or not.
Ok so on to the rest of the tutorial. If you haven't yet learned these features yet, you will know them pretty well by the time we are done. For our drag and drop system we will be using:
- Multi-Dimensional Arrays.
- Passing variables by Reference (kinda similar to pointers in C++)
Sounds confusing and scary doesn't it? It's not, just bare with me and I will explain them to you as we go.
Step 2: Different systems working together
There's going to be a couple different things happening simultaneously so we will break them down here.