Diablo like Inventory.

Development Programming & Scripting Blueprint
1

Hi guys. Didnt know if I should post this in work in progress or in blueprints. Feel free to move this post if it is in the wrong place.

I have never posted anything I have made before. I am not a coder, but I do love to do blueprints. I think its amazing, and really fun. I started with it when Ue4 was released.So I thought I would show off an inventory I am working on these days, its inspired by Diablo, but I made some of own choices.

It is all made in blueprint.
The inventory is using several data tables. One for armor, one for consumables and so on.

To create a world item, all you have to do is to duplicate one blueprint. Example, duplicate ArmorBase (wich is a child of a main itembase), in the new armorbase, set only a name in a rowname variable (example HelmetOfTheSparrow). Then make a new row in the ArmorDatatable, give it the same name. Fill out the rest of the information in that row, such as worldmesh, equipmesh, icon, strength and so on. Drag the new blueprint into world, and you are done.

In containers such as chests, ai, lockers. It spawns a random number of items depending on drop chance. It can spawn 1 item, it can spawn 3 items, or it can fill up the container to max. I have a 8 slot container, so max 8 items are spawned.

I am also going to make a crafting menu, that lets you make items and small camps. (such as a telt, fireplace, defence).

What the inventory can do for now.
-Visually show what quality the item is. (no outline = inferior, white = common, yellow = rare, purple = legendary)
-Drag and drop (works from all windows to all windows)
-Armor gets put into the correct equipment slot (legs to legs, head to head, chest to chest, and so on, if item is not armor it cant be used in equipment slots)
-Drop item into world
-Pickup single item from world
-Pickup item from containers (such as ai, chests, lockers, and so on)
-Single click, or drag item from “loot window” to main inventory to pick them up.
-Swap items correctly
-Stack Items correctly.
-Over stack limit adds a new item with the leftovers.
-Randomly spawns x number of items to loot, if its stackable, it will spawn x number for that item, will not go over stacklimit.
-You can set spawn chance on items from 0.1% to 100%.
-Tooltip with name, information, class, quality and equipment position. (early work in progress, more to come)
-If Inventory is Full you cant pick up items from containers or world. (if it is a swap it works)
-Stores loot, if you pick up an item from container, that container will no longer have that item.
-loot window closes when moving to far away from container, can also be closed by hitting the X button.

To do list :
Loot all button
Pretty design.
Better icons.
If item is spawned in loot container, do not spawn it again in the same container.
Give character and ai stats. (health, strength, agility, so on)
Give items stats. (strength etc if armor, damage etc if weapon, health etc if consumables)
Make item stats effect character stats
Make consumables usable and effect the character.
Make equipped mesh show up on character and ai trough basecharacter.
Make crafting
Make tooltip more complete when Items have more meaning.
Make coin count and spawn of coins to loot.
Cleanup blueprints, check for errors, and make them easy to figure out and look at (a work in progress)
Tool tip if you hover over a world item, should give you some information of what the item you are hovering over is.
Increase drop chance for items depending on main characters level. (is character level 3 produces bigger chance of dropping a level 3 armor)
Make hover over and clicked icon for different item quality (legendary, rare, common) Right now when hovered it just turns to the regular inferior icon)

Currently I am using a lot of random icons I have made fast, so its not very pretty, the overall design is just black. Its ugly, yes, but it works, and it can be redesigned to a high quality look :slight_smile: I will continue this when I have time.

I made a legendary item with 0.2 % chance for dropping. It has never been seen again… :stuck_out_tongue:

Shows inventory and tooltip and a lot of items I have dropped from inventory to world. You drag item into world to drop it, best way to drop item from inventory in a top down.
InvScreen01.jpg

tooltip isnt there when you are not hovering over item
InvScreen02.jpg

**Shows that items that are armor has a specific slot they need to be put in. Also shows loot window that appears when a container is clicked **
InvScreen03.jpg

Blueprint of move/swap item. Its probably the most chaotic blueprint I got in there. I try to organize as best as I can, but sometimes things get out of hand.
cff714b4c956d28938ff0a0f4aed734d9be18924.jpeg

Shows Armor data table. Easy to add new items both in world and make them drop on containers.
f6c9eb3b64b298e8a6c1e082edc41b57f61a83ca.jpeg

Shows that different loot containers has random items.
94cfe64c63ac116bc8c837de8779f3bbe44ac6e2.jpeg

2

Looks good, do you plan on making item size? For example 1 item takes 2 slots or more?
Also it looks like your blueprint is rather complex/complicated, is that all 1 function/event?

Do you plan on showing how you did it, or do you want to sell it later on in the marketplace?

3

Hi. I wanted to do a item size inventory, but I couldn’t wrap my head around how to get the image to appear in several slots.
I could do it so that one item takes up 4 slots, but then the same icon would show up in all those 4 slots, and that is not what I want. I want a single image taking up 4 slots.
So if anybody has any good tips on how to do an item size Icon (how it works)? I will gladly listen and try my best to implement it.

The reason it looks so complex is because that one function checks where the item came from (loot, equipment, or inventory) and it checks where it is going. So it knows where to place the item (inventory, loot or equipment). I think I know a better solution now, and I will test it out and implement it if it works, which will lead to a more clean blueprint.

The rest is pretty much checking if item is stack, add to stack, start new stack and so on. Its also checking if item is armor and going to the equipment slot (if its not armor you cant drag that item to equipmentslot). Then it needs to check if its legs, chest, head etc. I will probably find better solutions for a cleaner blueprint as I go along, and then implement them. And its also checking if where you are dropping already contains an item, and if so, swap them.

I will either do a tutorial at one point, or put it into marketplace for a cheap price. :slight_smile: I will also use it for a game when its done. I really like doing these things in my spare time because I just find it fun.

4

Always try to make 1 function for 1 job, this way you can always use it again for other tasks, if you pack it all in one its just useable for this one thing and thats not a good way to code.
Not too sure how you would implement it, probably you need to write your own “Grid” system which starts with an array of slots of size 1, and depending on what you collect it removes the size one slots and “creates” 2 or 3 size slots.
Would be fun to make but no time :confused:

Seen some people who wanted to make an Diablo like item system but i have not seen a “free” project or tutorial for that.

5

I would love to do a tutorial at one point, but I still have a lot to learn, and I need to finish this in the cleanest and most understandable way possible. Then I will probably do a video tutorial and put it out on market.
Like I said, Im not a coder, its hard to tell if my solutions are wrong, so people pointing out that what I am doing is a weird solution or wrong is a great way to learn and get the best solution. :slight_smile:

What you said about functions makes sense, that is a very good way to think of it, I think I will clean it up and make sure that one function does one job. Thanks for the tip! :slight_smile:
I like it to be as clean as possible, and looking at it now, particular that one blueprint, it looks like a big mess.

6

There is never a wrong way as long as it works.
Only “good” and “bad” ways of doing something.

I hope you update your progress and show some stuff in case some people want to make something like you do.
Also if you have questions feel free to ask.

7

Your system looks interesting. Like you my first system I made with blueprints was an inventory system. They are really quite fun to figure out. The diablo grid style is the one I haven’t quite finished yet but it’s really quite fun as well. I’m sure once you polish this one off you could figure it out.

8

You mean like this:

www…com/watch?v=mfbjP_F8-Ko

I tried to do that for a year or so, I was in front of a complexity wall when it came to make multiple sized items.

The solution I found is to simply split the system in two: one part inventory slots, second part items displayed.

I have an inventory of X slots, whenever I drag something hover it I check lots of things and do things based on that.

I’m basically “clipping” item images on the same position than inventory slots.

BUT, this only works in 1920*1080 screen resolution and you can’t single click to start dragging an item, nor can you drop an item hover another and start dragging the new one.

It is basically a “cheap” diablo-like inventory.

But honestly, I had serious troubles getting this implemented, if you don’t have a serious reason to want a multiple sized inventory, you should not go for it.

9

I have actually figured out a way to do it. It can be run on all resolutions. :slight_smile:
So I basicly did the clip on thing, but I made 4 different type of images. 1x1 = 100px x 100 px. 2x1horizontal = 200px X 100px. 2verticalx1 = 200px X 100px. 4x4 = 200px X 200px
I did this in a new template, so I started from scratch, I still have all the old work, but I have to implement it into this new system.
Stacking and swapping is not working yet. For now I have only implemented picking up objects, drag and drop (only works on empty slots) and obtaining the correct slots if item is 1x1, 2hx1, 2vx1 or 4x4. So if an item that is 4x4 is at slot 0, it also takes up slot 1, 10 and 11. There are 10 slots in one row. And 4 rows.

I do not own the icons, they are just temporary, found on google.

Thanks for all the replies, I really appreciate it. :slight_smile:
Oboy is it a lot more work setting this up than a normal inventory! :smiley:

Image shows item moved. (they are picked up in top left corner)
invent01.jpg

Image shows me sorting the inventory to when filled up… I forgot to move a ring into the bottom right slot, but it works… Trust me :stuck_out_tongue:
176084cb7f8e7ff5d4e23576f56b45a68a7d836a.jpeg

Image shows inventory working 50% of original.
invent03.jpg

10

Could you be kind enough to post a screenshot of your widget setup and your calculations to retrieve the slot position please?

When I say widget setup I mean how are widgets organized around each others (what is inside a canvas pannel, what’s not, what’s inside some sort of box or not, such things, how you spawn them).

EDIT: Thanks already for replying so openly, I’m really interested in this as you can see :stuck_out_tongue:

EDIT2: Are you using the all-implemented drag & drop logic? If so how are you planning to work around the fact that you can’t trigger drag & dropping with single clicks (or at least didn’t find how to)?

EDIT3: 1337 gold ma friend :slight_smile:

11

This is going to be hard to explain, but I will try my best.

So what you have is 4 different pictures representing each of the slots, I just gave them a different color, and a pixel size. 1x1 slot 100 x 100. 2x1 slot 200x100 horizontal. 2x1 slot 200x100 vertical. And finally 2x2 200x200 pixels.
These icons are very important to have (not only for testing purpose, but this is also what is obtaining the slots that are icon empty.)
So I have a icon of the chest armor that obtains slot 1,2 and 11, 12. The very chest icon is only in 1. The rest have the red icon 2,11 and 12. (in item structure, 2 different texture2d reference)

inven04.jpg

Now what you need to do is to is make a lot of uniform grid panels. 1 grid panel for the normal buttons, 1 grid panel for all the 1x1 slots, 2 grid panels for the 2x1h, 2 grud panels for the 2x1v, and finally 4 grid panels for the 4x4.
The reason for this is because we need to know every position a image of different size can be in.

inven05.jpg

Now that every position has been counted for, its a matter of setting up the logic. And what basicly happens, is that I have an enum in my item structure, that is set to be either one of the sizes. So when the item gets into the inventory, it checks for how many slots it should obtain (the true chest icon only obtains one slot, the red icon obtains the 3 others I need.) So chest icon in 1, the red icon obtains 2,11 and 12.

All the measurement icons are hidden by default. Now, when you put a item in, its a matter of taking the “placed in slot”, get if item is 4slot, if it is 4 slot, set the 4xBox to visible, and replace the texture with the chest icon.

I am really bad at explaining… but I hope it helps you understand how I did this.

12

here it is in action, there are still some bugs to ironed out, and you cant swap yet. It seems that if I drag the mouse to fast, the icon wont keep up with the cursor… I need to figure out if this can be solved easy. =)

Notice that you can drag from any slot. If you drag from lets say the sideways sword. If you drag som the left side of it, it hits the right spot, and if you drag from the right side of the sword, it still places it in the correct slot… It was tricky to figure out, but I found out how to solve it. :slight_smile:

httpoyvindberget.com/UE4/inventoryGif_02.gif

13

Thank you very much for these detailed information. It’s tons useful :slight_smile:

Have you tried to look at where you’re anchoring the dragged image? Might just be as easy as this.

14

Very nice & interesting work, would love a tutorial or at least download the project to try it out

Keep going !

15

Hi everyone,

I had done such an Diablo-style inventory some time ago and even started to write a tutorial about it, but never had the time to finish it up.
It was basically the same idea: overlaying buttons with images and then “stretching” the images according to the space the item takes up in the inventory. I’ve a free day tomorrow, so I can either try to upload a project with the inventory or complete the tutorial if you want.

Cheers,

Data

16

Was their ever a tutorial put out for this? Would love to implement something like this to my project.

17

Hi, there is no tutorial on this currently. I am sorry.
I became a father in december, and as you can image, I dont have much time for ue4.

This is scrapped for now as I am making some different stuff on the little spare time I have left.
I am currently making some random created dungeon stuff like this : httpdonjon.bin.sh/fantasy/dungeon/ in ue4.

So who knows, I might come back around to this one day, and if I do, I will make the tutorial as I go along.
However made some interesting stuff with the little explanation I gave him in this post.

Sorry again.

18

Hi,

This looks really awesome.

How did you do the snapping of the tool-tip widgets for the items in the inventory. I hit a brick-wall trying to get them to snap outside the hovered widget and in the screen.
Any tips are much appreciated.

Thank you!

19

I ended up doing exactly what the author said just above your post!

20

This is not a good way to go about doing this as you would have plenty of hacking down this road I tried to do the inventory this way for a good couple weeks only finding out that it would be a serious pain in the **** to do all the stuff you need to do with this beastly inventory. I instead found a better and faster way to do this that you can have an inventory of all sizes 1x1, 5x5, and even 10x6 Diablo style. I can also make items any size 1x1,2x2,1x2,2x1,2x3,3x2,2x4 and hardly does math making it efficient