Before start you should watch this tutorial from Epic. Creating Inventory isn’t so hard but it requires Arrays and Structs to work with.
What I would like to accomplish:
- Player will have his backpack which will be global inventory with all of the weapons collected,
- Player can choose which weapon he would like to use in mission,
- Inventory should be generic. I don’t know yet which weapons I will use and which stats they will have,
- Game should remember which weapons I’ve chosen so I don’t need to choose them again,
This Tutorial has been created using Unreal Engine 4.8.2. Make sure you are working on the same version of the engine.
We should start by creating new Structure – WeaponBackpackItem. It should contain necessary information about our weapon:
WeaponToSpawn (Actor) It will be reference to actor that should be spawned in Menu or begin play during gameplay,- BackpackImage (Texture 2D) texture reference which we will use in UMG inventory,
- IsSelected (bool) This will tell us if this weapon was selected in inventory screen,
- InSlot (int) in which slot weapon was selected,
Basically you can add otherdata here like Damage, Price or whatever you like. I’m not doing this right now because I think I will have menu in 3D and detailed data will be directly in WeaponToSpawn Actor.
USEFUL TIP: When working on structures using blueprints you need to be careful. During this tutorial my editor crashed 3 times when adding new variables to structure or updating arrays which are using structure. There are some known issues with structures that are placed in arrays. Be sure you save your work often! Basically I recommend putting structs and all operations on them to C++.
Now go to ShooterGameInstance
- Create new variable from WeaponBackpackItem and name it Backpack_Weapons. It should be array:
Now let’s fill our array. Create couple of elements (I’ve created 5) and assign different textures. I’m using icons placeholders from here. Just for test. Make sure you have different textures assigned to each elements. - Create new function: CanAddWeaponToWeaponSelected
– it should have one local variable: HowManySelectedItems.
– And it should return CanAdd (bool), HowManyItemsSelected (int)
– This function will tell us if there is a space in player inventory to select another weapon.
- Create another function: SetBackpackItemSelected
– It should have 3 variables in Input:
BackPackItemIndex (int)
IsSelected (bool)
WhichSlot (int)
This function will update data in Backpack_Weapons. For now it’s setting only InSlot and IsSelected but it can be modified later. Basically you could just pass WeaponBackpackItem as input but for this tutorial I wanted to break this.
This is all in ShooterGameInstance. It will store our backpack weapons information so everyone can assign / or modify the data.
Now create new User Interface -> Widget Blueprint and name it UI_Debug_WeaponInventoryItem
Explaining UMG using text is difficult but I will try it :) |This UMG widget will be our inventory icon. Let’s start by creating Hierarchy.
- Delete CanvasPanel. We will be adding this widget to other widgets.
USEFUL TIP: When doing that you should’t have CanvasPanel. CanvasPanel have information about anchors and our base widget will have those. Duplicating them can affect weird behavior in different resolutions.
- Add Overlay on top,
- Add Button with Horizontal and Vertical Alignment set to center. Go to Style and change Image Size for all of the Brushes to 150×150. Remember to change the Size for all of them! (Normal, Hovered, Pressed etc)
- Add Image which should have center alignment as well and size 130×130.
– Remember to set it as variable so we will have access in blueprint graph,
– Set visibility to HitTestInvisible,
We are making sure that our mouse events will go behind the Image and hit our Button.
Now let’s go to Graph.
Create new Event Dispatcher: WeaponItemClicked which should have two inputs: WeaponReferenceIndex (int) and WidgetReference (User Widget)
WeaponReferenceIndex will be just an link to our Backpack_Weapons array index.- Create new variable: WeaponItemReferenceIndex (int) which should have ExposeOnSpawn and Editable selected. Thanks to that we will be able to assign something to this variable when spawning Widget!
- Create another variable: IsInInventory (bool) and set ExposeOnSpawn / Editable as variable above,
- Create new Function: GetGameInstance which will return ShooterGameInstance and will be a pure function.
Being in graph create new event – Event Construct (it should be there already) and let’s do something with variables that we have set Expose On Spawn.
We are changing Image texture and we are disabling button if it’s selected. Simple enough.
Now select Button in Designer view and add OnClicked event.
In graph let’s call our WeaponItemClicked dispatcher.
Thanks to this dispatcher we will know in our base Widget that this button was clicked. This is all in this Widget Blueprint.
Now let’s move to the hardest part. We need to create an UI with all of our inventory items and items that we have selected. We need to implement selection functionality as well.
Create new User Interface Widget Blueprint and name it UI_Debug_WeaponSelection.
I’ve created short video demonstrating Designer Hierarchy, you can watch it here, but I’ll try to explain this by text as well.
- Add Overlay panel. We will show inventory items here so it should be big,
- Add Border and insert it to Overlay.
– Horizontal and Vertical alignment should be set to FILL.
– Brush draw as should be set to Border,
– If border is selected Margin should be set to 1!Thanks to this border we will see where is our inventory.
- Add ScrollBox and insert it to Border
– Horizontal and Vertical alignment should be set to FILL as Border, - Add UniformGridPanel and name it UniformGridPanel_Backpack. It should be set to FILL as well,
That’s all for this overlay. Let’s move to another one.
Create another overlay and put it on the screen somewhere in bottom.
- Insert border to the Overlay like we did earlier,
- Insert Horizontal Box to Overlay and set alignments as FILL,
- Insert 3 Overlays to Horizontal Box and name them: Overlay_Slot_1, Overlay_Slot_2 and Overlay_Slot_3.
– Size should be set to FILL,
– Alignments should be set to FILL,
– They should have “Is Variable” so we can mess with them in Blueprint Graph.
That’s all here in designer.
Now let’s move to Blueprint Graph and add some variables and functions.
- Create three bool variables: FirstSlotTaken, SecondSlotTaken and ThirdSlotTaken – they all should be set to false by default,
- Create new function GetShooterGameInstance which should return ShooterGameInstance and should be pure, we have done this earlier so I won’t post screen here,
- Create new function FindFirstFreeSlot which should have one OUTPUT – Slot (int) and one local variable CurrentFreeSlot (int),
This function will return first free slot that we can use when selecting a weapon.
Event graph is to big for one screen. Let’s move step by step.
Create Custom Event – CreateBackpack with one input: WithoutSelectedWeapons (bool) try to copy this:
What this is doing:
- It’s iterating for all inventory items in Backpack_Weapons,
- Then it’s creating new widget “UI_Debug_InventoryItem” which we have created earlier. It’s passing data to the widget,
- We are connecting our WeaponItemClicked dispatcher.
- After that it’s adding new widgets to Grid Panel,
- And it’s setting column and row,
- Then it’s checking if the IsSelected true,
- If yes create another widget and place it to the Panels,
This should run only in the beginning of the widget. Here’s Construction Event which is firing CreateBackpack and letting us to select something using mouse.
USEFUL TIP: Event Construct will fire every time the widget will be added to viewport!
Now let’s focus on first dispatcher which was in Sequence 0 of the CreateBackpack function.
It’s setting IsSelected and putting IventoryItem to panel.
The last two dispatchers are connected to the same custom event: ItemClickedInBackpack
Which is removing items from selected weapons panel. It’s really hard to describe those using screenshots so here you can download my Blueprints folder. If you want to test this out just create widget UI_Debug_WeaponSelection.
Creating ShooterTutorial takes a lot of my free time.
If you want you can help me out! I will use your donation to buy better assets packs and you will be added to Credits /Backers page as well.Implementing game is taking time but writing about this is taking much more effort!
Pingback: How to add weapons – basics + equipping | Shooter Game Tutorial
I have done everything here but my selection is not working. When I click on weapons in inventory nothing happens.
LikeLike
Same here
LikeLike
same here…
LikeLike
im having trouble getting ShooterGameInstance into my project i tried migrating it from the shootergame to my project and it wont let me its like its lock in the shootergame
LikeLike
Hi Alexander as far I can know there is some issue with changing Game Instance in 8.1 – I am able to change Game Instance in 8.2 without a problem. Can you please send me screens or video what issue do you have? It’s hard to say what’s wrong.
LikeLike
also i cant seem to locate or create the variables button_weapon and image_weaponImage
LikeLike
Can you please send me screenshot or video of what kind of issue do you have? It will help me navigate what’s the problem!
LikeLike
hey Im having a slight problem when its comes to the zsection in the UMG blueprint It wont allow me to cast to the game instance or at least will however I can return it. I keep getting the note
Info The execution path doesn’t end with a return node. Cast Failed
So then in the event graph Im not able to get the BackpackWeapons
many thanks In advance
Lewis
LikeLike
hey For some reason It wont to the cast to the ShooterInstance in the UMG function getgameInstance Keep getting the Error “the Execution path doesnt End with a Return Node”
Even though its connected to one, is there any settings I may of missed ?
Thanks In advance
LikeLike
More people are having this issue – its working for me in 8.1 and for my friends maybe its good time to post it on AH
LikeLike
Hello,
I have a problem with the game instance : http://prntscr.com/7w39j7
Could you help me, please ?
LikeLike
You need to cast it to shootergameinstance to get variables from it. Let me know if you figure this out if not I will post screenshot.
LikeLike
Hi,
Its already done but don’t work :s (ArmeInstance is shootergameinstance with an other name ;))
http://prntscr.com/7w7x3n
LikeLike
Make sure your ShooterGameInstance is added to GameInstance in Project Settings.
LikeLike
I have an error : “Accessed None ‘CallFunc_GetShooterGameInstance_NewParam, from node ForEachLoop in EventGraph in blueprint UI_Debug_weaponSelection “
LikeLike
Make sure ShooterGameInstance class is GameInstance class in Project Settings.
LikeLike
ok here is my problem i create the game instance like you ssaid to do in a previous tutorial but it give me a warning say that its not inherit from gamemode… i also cant get the get game instance to hook up in ui_debug_weaponinventorysystem
LikeLike
Are you sure you have ShooterGameInstance added to GameInstance in project settings?
LikeLike
Have done everything correct. But – like the other guys here – i have still issues with the Game Instance. It just dont work, even if i add all the Game Instances in the project setting.
any suggestions?
LikeLike
Others resolved it by disabling “pure” in GetShooterGameInstance function.
LikeLike
Thanks for your fast reply & the supreme tutorial series
LikeLike
Hi,
It is great that you are making tutorials and I am happy for you that you got your first backer.
But I have downoaded your inventory blueprint and it is just not working.
A/ First of all the slots are not assigned correctly: if I select one item it is added to slot 1 like expected. But if I select a second item, the second item is added to slot 1 and the previously added item is moved from slot 1 to slot 2. (the first added item remains visually in overlay 1)
B/ If I select only one item the WeapontoSpawn is correct. As soon as I select a second item, all WeapontoSpawn values are set to “None”
C/ The “selected” boolean of any selected item is never set to “true”
LikeLike
Thanks. My downloaded blueprints are just reference for you! Im using lots of references to assets that you dont have. You should do tutorials step by step and read all links that I provide.
I can help you resolve the issues if you provide whole project. Mail me at shootertutorial@gmail.com
LikeLike
Hi andrzejkoloska,
Thank a lot for your swift reply and offering to help. I am actually following the tutorials step by step and reading all the additional links. I am doing a third person shooter though so I have to adapt a bit your blueprints.
Nevertheless I have managed to debug and fix the problems.
The main cause was that the “WeapontoSpawn” pins between the node “BreakWeaponBackPackItem” and the node “MakeWeaponBackPackItem” in the “setbackpackitemselected” function of “ShooterGameInstance” were disconnected. This was due to changing the type of the “WeapontoSpawn” variable from “Actor” to “BP_BaseWeapon” as asked at the beginning of Chapter 5 “How to add weapons – basics + equipping”.
You have added a tip to advise us to verify the connections but you might want to add some additional information pointing to that specific issue.
Thanks again.
Laurent
LikeLike
As I have emailed you my project and had no reply, I thought I would post this on here.
I have created a second project and gone through it all again from start to finish, and again the inventory buttons are not disabled when you select an item, thus allowing you to select it again in another slot, which breaks the slots.
It is either something wrong with 4.8.3 or something wrong with your blueprints, as, as I mentioned, this has now happened to two separate projects that I have created using these tutorials.
LikeLike
I think there is an error in his blueprints it should not be toggling “IsSelected” every time you click the item in the backpack as i don’t think you want the same item added to selected weapons twice. here is an easy fix:
In the event graph for “UI_Debug_WeaponSelection” find the branch node connected to the customevent “ItemClickedInBackpack” and break the true pin so it does not execute the “SetBackpackItemSelected” node. recompile and test it should work as i think it was intended.
LikeLike
Hello andrzejkoloska:
“Ui_Debug_WeaponInventoryItem: Compiler Results 1 Warning:
‘NewParam’ is already a ‘Shooter Game Instance’, you don’t need “CastToShooterGameInstance.
The execution path doesn’t end with a return node. Cast Failed”
Any idea?
LikeLike
Cmon man… The last few steps I have to download your blueprints? They aren’t that much more complex then the first picture but I can’t follow them since half of the stuff is broken.
Can you please update this and actually finish the tutorial?
LikeLike
Its really hard to describe more complex blueprints. Its working please read Laurent comment and try to debug it yourself. There are problems when copying downloaded blueprints. Pins will broke and game instance isnt reconized.
The main thing here which Im trying to learn is take your time, try to figure it by yourself only then you will learn.
LikeLike
You dont have do download the BPs. Just follow the Tutorial Step by Step and you ll finish up.
What the author ment is, that the BP network is hard to explain. you need some experience to understand.
I suggest you just do it and come back later to fully understand. The other Tutorials are waaay easier. :)
good luck
LikeLike
Alright, this time the tutorial is pretty straightforward. The only problem you will probably find is lefting something to do while doing the big ass blueprints. If something isn’t right, check both the images and the blueprints given by andrzejkoloska.
Some tips I can give:
-If you are getting “‘CallFunc_GetShooterGameInstance_NewParam, from node ForEachLoop in EventGraph in blueprint UI_Debug_weaponSelection”, don’t make GetShooterGameInstance not pure. Instead, first make sure you are using ShootingGameInstance at GameInstance, then check at UI_Debug_WeaponInventoryItem the GetGameInstance function to see if it looks like this: http://i.imgur.com/78T6ivT.png
-If you can’t click on your selected weapons to make them return to the backpack, check if the overlay and the rest of the “Select weapons” elements visibility are set to “Self Hit Test Invisible”.
-andrzejkoloska forgot to finish the tutorial: This is the blueprint of the button to close the window (put it at UI_Debug_WeaponSelection) http://i.imgur.com/6GpLVpC.png and the following is to make the window pop-up (put it at GameplayPlayerController) http://i.imgur.com/jVsYh3D.png
I think I didn’t forgot anything else. This, next to the tutorial, should be enough to make the inventory work.
LikeLike
You made a mistake at the end:
“The last two dispatchers are connected to the same custom event: ItemClickedInBackpack”
It’s not ItemClickedInBackpack but ItemClickedInSelectedWeapons.
LikeLike
I’ve no error but I don’t know what to do. When I press “I” to see the iventory, I’ve the Epic Inventory Tutorial, not this one, I don’t know how to get this one. What key I’ve to press or what I’ve missed to have the same thing you have in the Gif ?
Ps: sry for english I’m french :)
LikeLike
Maestro Fénix’s tip helped me ! Thanks to him. Everything works fine now ! Sorry for last comments.
LikeLike