Add the “SpellBar.js/.cs” script in your scene:
1) Creating Spell Bar Slots:
The size of the “Slots” array determines of the amount of spell bar slots. For each array/spell bar slot, you need to set the slot object, the icon (image object) and the trigger key used to cast the spell associated with this slot. To create a spell bar slot:
For each spell bar slot, create a new UI element and drag it to the “Obj” field in the “Slots” array. Then you can use the same object as the spell “Icon” by adding an image component to it and dragging it in the “Icon” field or you create a separated object. Then add the “SpellSlot” script to this object with the “Spell Bar Slot” bool only checked to true. Then add an Event Trigger with the current events:
– Begin Drag event: Drag and drop the spell bar slot object and select: “SpellSlot -> StartDragging()”.
– End Drag event: Drag and drop the spell bar slot object and select: “SpellSlot-> StopDragging()”.
– Pointer Enter event: Drag and drop the spell bar slot object and select: “SpellSlot -> SetDraggingDestination()”.
– Pointer Exit event: Drag and drop the spell bar slot object and select: “SpellSlot-> RemoveDraggingDestination()”.
2) UI Canavs Transform: Drag and drop the canvas object that contains the spell bar slots.
3) Drag Slot: Create a child UI object of the UI canvas object and add an Image component to it. Preferably, the size of this object should match the spell bar slot’s size.