Tutorial - Inventory System with the new UI System 4.6

Hey,

I have started a tutorial series where I create a Inventory System with the new UI System.

• Part 1(Creating Item-, Database - Class, SlotScript and the HUD):
  https://www.youtube.com/watch?v=6twPV3e4crE
  
• Part 2:
  https://www.youtube.com/watch?v=dBBLq02bhNs
• Part 3(Creating tooltip):
  https://www.youtube.com/watch?v=XfFQuGGxxyg
• Part 4(Dragging Item between slots):
  https://www.youtube.com/watch?v=2Z4zdPM2SAM
• Part 5(Stacking items and drinking consumable):
  
• Part 6(Dropping/Picking Items, environment-box like in DayZ):
  
• Part 7(Gearing items, fixing some bugs, resoltion fix):
  

Craft System(works with inventory):

• Part 1(Creating the whole craft system):
  
  
  
• Part 2:
  

PS.: Im sorry for my bad english I hope it is good enough for you guys . Ask if you have some questions.

 

I recommend you add a Layout - Grid Layout component to the inventory panel instead of coding the slots' positions. This way it's very easy to adjust the slot size and offset from the Inspector.

 

OK thank you very much.

 

Thanks for this alot, we really need some practical tutorials on uGUI.

 

I doing another one with dragging item from slot to slot..I hope I gonna finish it this evening.

 

Are you going to make a video about using grid layouts, that seems to be the preferred way to handle placement of slots. I'd like to see it in action.

 

I gonna do it later I guess. I will finish the inventory, which is going pretty fast I guess and than I gonna do another video where I optimize everything.

 

Zee Germans always apologizing about their "bad" English
Gotta love them

 

I understand english perfectly but I do not speak it often. It is a different to hear a word and knowing what it means and speaking with someone where you have to know the words. But I notice that am getting better from video to video.

 

Dragging Item is in as a tutorial aswell...

 

These are fantastic, thank you for sharing

 

Thank you for this wonderful tutorial implementation of the new ui tool

 

Thank you. I gonna create another video, after the inventory tutorial, where I gonna optimize everything so that the inventory is good perfomance wise. And later I gonna create a environment panel - like in DayZ - which will show dropped item near you.

 

Added another video about stacking items and drinking consumable.

 

Always as well. Deeply the continuation...

 

A download link coming so we can check out the code in a little bit more detail?
Either way thanks for the work it's been very helpful.

 

To be honest. I do not like the guys who only come for downloading the sourcecode (no offense). I know what you mean but this is not the intention of this tutorial. People have to watch the video. Maybe I gonna attach it at the end of the video, that you can click onto it like the "part 2 ---->" things.

 

Added Part6 with Dropping/Picking Items, environment-box like in DayZ.

 

Thank you for the new video

 

Great tutorial, thanks man.

Btw, i've got a question: i want to drag item in the inventory like drag and drop, i mean i press the button, move the item to another slot (button is still pressed), release the button and item move from inital slot to the one which over i released the button.

I can't do that. I tried to use OnEndDrag method, but it has slotNumber of initial slot, not the one i finish dragging. do u have any ideas how to do that?

 

Mh...I gonna look for it. To be honest I do not know it now. But I gonna post a solution when I got one.

 

i think i've found it:

public void OnEndDrag(PointerEventData data)
{
int targetSlotNumber = slotNumber;

if (data.pointerEnter.GetComponent<SlotScript>() != null){
targetSlotNumber = data.pointerEnter.GetComponent<SlotScript>().slotNumber;
}

if (inventory.items[targetSlotNumber].itemName == null && inventory.draggingItem)
{
inventory.items[targetSlotNumber] = inventory.draggedItem;
inventory.stopDraggingItem();
data.pointerEnter.GetComponent<Image>().color = defaultSlotColor;
}

}

this works fine, except
data.pointerEnter.GetComponent<Image>().color = defaultSlotColor;
this string.

I paint an empty slot with green color and a filled slot with red color. I do it in OnPointerEnter method. Then i set the default slot color in OnPointerExit method (like when dragging an item you can see if you can put your item in this slot).

It works fine with an empty slot, cuz data.pointerEnter return Slot GameObject. But a filled slot return ImageIcon, so the filled slot remained red,after Drag ends. I'm confused...

 

Hi, and thank you for the tutorials, but I found a bug-problem with your solution.

If the canvas have reference resolution component the tooltip and the mini drag-drop icon position are wrong.

 

Actually I do not know what you mean. I do not get this bug. Do you have a picture or something?

 

I gonna do something like that soon. The problem is that I have to learn for my university . But anyways thanks for posting this script. Gonna test it soon.

 

well, it seems i found kind of solution.

i use static variable GameObject wrongSlot;

In OnPointerEnter method i check if slot isn't empty, paint it to red and remember this slot GameObject:
if (inventory.items[slotNumber].itemName != null && inventory.draggingItem)
{
gameObject.GetComponent<Image>().color = Color.red;
wrongSlot = gameObject;
}

In OnEndDrag method i check if the object has SlotScript component (it means it's a Slot object and pointed slot is empty, otherwise it is an ItemIcon object and pointed slot is filled):

if (data.pointerEnter.GetComponent<SlotScript>() != null)

If it is true i get the slotNumber of empty slot and paint it to default color:

targetSlotNumber = data.pointerEnter.GetComponent<SlotScript>().slotNumber;
data.pointerEnter.GetComponent<Image>().color = defaultSlotColor;

otherwise i paint the object i stored before:

wrongSlot.GetComponent<Image>().color = defaultSlotColor;

and in any case i put item in the proper slot (the one we point or to the initial slot if there is an item in the pointed slot) and stop dragging:

inventory.items[targetSlotNumber] = inventory.draggedItem;
inventory.stopDraggingItem();

It works perfectly, but i'm not sure if it's a "clean" solution, guess there's something better and simplier. Anyway, i hope it will help someone.

PS Sorry for flooding so much in ur topic^^

PPS am i the only one who don't know how to post the C# code well here?

 

When drag:

reference resolution off (work fine)


reference resolution on (bad position)


In both images mouse is at the center of the slot.

 

Added another part about gearing system for your character. So that you have only one slot for gearing a chest, head, shoes and so on and we fixed some small bugs.

 

thanks for ur new vid.
Btw, i think it's better to use foreach loop to look for smth in database:
foreach (Item item in database.items)
{
smth...
}

instead of

for (i=0; i < database.items.count; i++)
{
smth...
}

 

You think or you know?^^
I actually do not know what perfomance wise is better. Someone knows it?

 

you need a little less code with foreach. You don't need i counter, you don't need to check List.Count in the loop head and you don't need to create a new Object in the loop, cuz u already created it in foreach().

I'm not sure there's much difference in performance though...

 

Hi Sander,

first of let me say thank you very much for this great tutorial. It is pretty much appreciated!
I noticed when you click on the left top of an inventory Slot and do some sort of back and forth while clicking, the consumables get duplicated. I tested this quiet a few times so it happens all the time. Did this occur to you too ?

Thanks for your reply!

Keep up the good work ! If you are bored and want to expand this an implementation of a vendor in this tutorial would be absolutely awesome !

 

The problem is that there is no right click at the moment. This will be fixed soon. So atm dragging and consuming consumables with left click. So dragging = consuming...
When it will be fixed by Unity I gonna do this with right clicking(consuming) and will do another video for it

 

Thank you man! i'll watch.
Also.. can you make tutorial about hud text?

 

What do you wanna see exactly with texts?

 

Assign with a game object, and stick on top this object. Like this plugin http://forum.unity3d.com/threads/ngui-hud-text.143377/

 

Yeah could do a tutorial for it. It is pretty easy to be honest . But firstly my craftsystem tutorial will come.

 

CraftSystem is up aswell. Working with the inventory System.

 

Cool ! Thumbs up.

 

Thank you very much. Further videos will come after my exam time.

 

I know that you guys thought that I would do some more tutorials. At the moment I have to do some stuff for my university and I hope that I can finish it pretty fast. Will keep you on update .

 

For someone reason on Part 5 it doesn't behave like yours, it doesn't add the items to the empty slot.

Code (csharp):

1.  
2.     private void CheckIfItemExists(int id, Item item)
3.     {
4.         for(int i = 0; i < items.Count; i++)
5.         {
6.             if(items[i].itemID == id)
7.             {
8.                 items[i].itemAmount = items[i].itemAmount + 1;
9.                 break;
10.             }
11.             else if(i == items.Count - 1)
12.             {
13.                 AddItemToEmptySlot(item);
14.             }
15.         }
16.     }
17.  
18.     private void AddItem(int id)
19.     {
20.         for(int i = 0; i < _database.items.Count; i++)
21.         {
22.             if(_database.items[i].itemID == id)
23.             {
24.                 Item item = _database.items[i];
25.  
26.                 if(_database.items[i].itemType == Item.ItemType.ItemResources
27.                   && _database.items[i].itemType == Item.ItemType.Miscellaneous)
28.                 {
29.                     CheckIfItemExists(id, item);
30.                     break;
31.                 }
32.                 else
33.                 {
34.                     AddItemToEmptySlot(item);
35.                 }
36.             }
37.         }
38.     }
39.  

Basically it doesn't even do this

Code (csharp):

1.  
2.             else if(i == items.Count - 1)
3.             {
4.                 AddItemToEmptySlot(item);
5.             }
6.  
7.  

Any solution ?

 

Could you please add a chest or backpack system?
Like how chests in Minecraft work, you can put items in it and take items out of it.
Backpacks would be similar, just that they open up an extra inventory.

 

I dont know if anyone who did this tutorials hv this problem. All my inventory is working the only problem i hv is when i drag the item to the character window slot, the item goes to proper place but the icon doesnt show up in the character menu. I check all code and i dont find anything.. i dont get any console error or message too.. Can anyone help me plz? Everything works perfectly in the inventory one

i try ask help here in forum but seams no one know wts going on. If u can take a look i will appreciate Sander1991

http://forum.unity3d.com/threads/character-window-issue.312697/#post-2031654

 

I love you bro <3333333

 

how to make unity UI inventory like hitman blood Money in a sphere shape weapon selection menu?