Brief Overview
In this tutorial, we’re going to use Unity + Bolt Visual Scripting to create a System that will allow us to Split item amounts in our Inventory with a UI Panel. Let’s Begin!
Getting Started
For this tutorial, we’re going to need to create a new UI Game Object as well as a few Macros to be able to split the desired amount of items in our Inventory.
We’re also going to need a Sprite Image which we will also use when we create our Item Tool Tip in a future tutorial. Go ahead and download the “ToolTip” Sprite I’ve created, or create your own and import it into your game and drop it under the Sprites Folder.
You can download that here:
The SplitUI Canvas
Create a New Canvas Game Object in your Hierarchy and call it “SplitUI Canvas”. You’re also going to give it the Tag of SplitUI as well as set the Canvas Scaler UI Scale Mode to Scale With Screen Size and set the Reference Resolution to an X of 1920 and a Y of 1080.
We also need to make sure we set the Sort Order to 3 on this game object so that it actually sets in front of everything else.
Give this Game Object a Flow Machine, set the Source to Embed, and add a new Boolean Variable called “SplitUI“. When you get it done it should look like this:
Right Click the SplitUI Canvas Game Object and navigate to UI –> Image, like so:
Rename this Image Game Object “Panel”, and give it the following settings:
The Width and Height of this Game Object will both be 400 on the X & Y. We will also need to set the Source Image to our newly imported ToolTip Sprite, as well as set the Image Type to Sliced.
To fix our image and make it look more crisp, navigate to the ToolTip Sprite and in the Inspector tab, click Sprite Editor. That should bring up the Sprite Editor screen that looks like this:
Set all the borders to a value of 5 and hit apply.
Next, right click your Panel Game Object and create a new UI –> Slider. Set the transform settings to match the picture below:
Next give this Game Object a Flow Machine and set the Flow Machine Source to Embed.
Expand the Slider Game Objects to see the Childed Game Objects underneath, and on the Background Game Object, you can set the Image –> Color to whatever you like, I set mine to Blue.
Also make sure that you check the Whole Numbers checkbox under the Slider tab, or this will not work!
Right click your Slider Game Object and create a new UI – Text – Text Mesh Pro. Set the settings on the Text Mesh Pro – Text UI to the following:
We’re not only changing the text to read 1, here, we’re also setting the font asset to JungleAdventurer, as well as the font size to 50 and aligning the text to the right.
We also want to position it to the right and above the Slider Game Object like so:
Also, move this Text (TMP) Game Object up the list so that it’s the First Childed Game Object under the Slider Game Object:
Right click your Panel Game Object again, and create a new UI –> Button – Text Mesh Pro. Rename this button “OK Button” and set it to the bottom right side of the Panel.3
I set the dimensions on this Game Object to 150, and height to 60. I also changed the Color to Green. Also give this Game Object a Flow Machine and set the source it to Embed.
Expand the Okay Button drop down and click on the Text (TMP) Game Object and under the inspector, and give it the following settings:
When you get this done, right click the Ok Button Game Object in the Hierarchy and Duplicate it. Rename the second one “Cancel Button” and after expanding it, change the color to Red and the Text on the Text (TMP) Game Object to “Cancel”.
It should look like this when you’re done:
Just two more things to do and this panel will be set up and ready to use with Bolt. Right click the Slider Game Object and create a new UI –> Image and move it up to be just underneath the Text (TMP) Game Object so that it’s the second Childed Game Object in the list.
Under the Inspector tab, set the following settings on this Game Object:
All we’re really changing here is the Y position to 155 and the Width and Height to 150.
Now we need to set up a text object that will allow us to see how many items we’re splitting on the Image in the middle of our SplitUI Panel.
To do this, Right Click the Image Game Object and create a new UI – Text – TextMeshPro Game Object. Then setup the following settings in the Inspector tab:
Last thing to do before we’re ready for some Flow Graphs, is to Right click the Panel Game Object one more time, and create a UI –> Text – Text Mesh Pro. For this Game Object I used the following settings in the Inspector Tab:
In truth, you may have to reposition some items to get everything to fit, but when you’re done, you should have something that looks like this:
The Slider Embeded Macro
On the Slider Game Object, open the Embeded Flow Macro and add the following Units:
This Flow Macro will be triggered when we Trigger the Slider Custom Event. When it fires, it will set the Slider Min Value to 1 (meaning it will be the least amount you can split), and the Slider Max Value to whatever the number of items are in the List which we will get from our Custom Event Agrument. We will then Set the Sprite to the first Game Object in the List, and Set the Text to reflect however many items are in the List.
**Special Note** You may have noticed that there are to Transform Get Child Units here. one is set the to first Game Object on the List (0), and the other is set the the second (1).
Last we update the Slider Text to reflect what number our Slider is on in the List.
Shift Right Click Flow Macro
In order for us to call the Split UI Element, we first want to decide how we will pull it up. I recommend using the Shift + Right Click Function. To set this up, we will need to create a new flow macro under the Macros –> 5 – Other folder. Create a new Flow Macro Super Unit in this location and call it “ShiftRightClick“. This is what it needs to look like:
This macro will only return a True variable when our Left Shift and the Right Mouse Button are pressed down at the same time.
SplitItemUI Flow Macro Super Unit
Now we need a way to call our Split UI in our code. Create a new Flow Macro Super Unit under our Macros –> 3 Inventory Item folder and call it “SplitItemUI“. This is the overview:
We’ll look at this in sections:
Here we run an input into a Branch and check the SplitUI Object Variable on our SplitUI Game Object by Finding it with Tag. We do this because if it’s already open, we don’t want anything else to happen.
Next we check to see if an item is in our hand with the ObjectPicked Object Variable on our ObjectManager Game Object. If there is an item in our hand, we also want nothing to happen.
Next we Count the Items in our SlotList to see if it is Greater than 1. If it’s not, we don’t want anything to happen.
If there is more than one item in our SlotList, we set the SplitUI Object Variable on our SplitUI to True by Finding It with the SplitUI Tag.
Next we set our SplitUI Panel Game Object to Active by finding it with a Get Child of SplitUI.
Finally we trigger the Slider Custom Event by getting the Child of Child of the SplitUI Game Object which we Find With Tag. We also run the SlotList on this Game Object into Argument 0 on the Slider Custom Event. We then Set the Tag of this Game Object to SplitItem.
Next we need to setup a new tag by clicking any Game Object in our Hierarchy and clicking the tag drop down, and click Add Tag… Create a tag called “SplitItem“.
We can now add these two Flow Macro Super Units that we just created to the InventoryItem Flow Macro and place them here:
We also need to add the following change to our AddtoStack Flow Macro Super Unit.
We’re adding this unit to ensure that if we’re not pressing Left Shift, we will swap items out. This is just a check to make sure nothing messes up in the process.
We also need to make the following change to the RelocateItem Flow Macro Super Unit:
We’re adding this check to the RelocateItem Flow Macro Super Unit to make sure that if our SplitUI is up, we don’t want the player to be able to click on any objects and break our system. We also need to setup a Custom Event to determine if we’re trying to get All of the Items in the SlotList. If so, we’ll simply add all these items to our hand. When we come out of this Custom Event we also Reset the Tag on this Game Object back to Item.
The Cancel Button Embedded Flow Macro
We now need to set up the following Units in our Cancel Button Game Object’s Embedded Flow Macro:
We’re using an On Pointer Down Event instead of an On Button Click because we want this to trigger as soon as the player hits the button. I’ve found that when we leave it to On Button Click there is an opportunity for the player to hold thier mouse button and break the system. This is our way around that.
Next we set the SplitUI Boolean Object Variable on the SplitUI Game Object to False by Finding it with Tag. Then we Reset the Tag on the Item that was marked ItemSplit, and finally close the SplitUI Panel by Setting the Parent Game Object to Inactive.
The Split Amount Scene Variable
Before we set up our OK Button Flow Macro, we need to setup a new Scene Variable so that we know how many units we need to take from the Item Game Object being split.
To do thise, we’re going to set up a new Scene Variable called “SplitAmount” which is an Integer and the value we can just leave at 0. It should look like this:
The OK Button Embedded Flow Macro
Just a few more things to do and we’re all set! On the OK Button Game Object, open up it’s Flow Graph because we’re going to add some units. Here is the overview:
Here we’re setting the SplitAmount Scene Variable to the number that’s reading on the Slider. Next we check to see if the Split Amount is Equal with the number of items in the list. In other words, are we trying to get all the items?
If we are trying to get all the items in the SlotList, we will then trigger the GetAll Custom Event on the Item we’re trying to Split (we’ll set the other side up in just a second).
If we’re not trying to get all the items in the SlotList, we will trigger the SplitItem Custom Event on our Object Manager Game Object, and the Item temporarily tagged as SplitItem.
Next we set the set the SplitUI Boolean Object Variable to False on our SplitUI GameObject, and finally we close the Panel by Setting the Parent to Inactive.
The SplitItem Flow Macro
We now need to set up a Flow Macro to be called on our ObjectManager Game Object when we trigger the SplitItem Custom Event. Under your Macros –> 6 – Object Manager folder, create a new Flow Macro and add the following units:
This takes the SplitAmount Scene Variable that was defined by our Slider Game Object and sets it as the Last Step for a For Loop. We then add this amount of items to the PickedSlotList on our ObjectManager Game Object, and then set the ObjectPicked Object Variable to True on our ObjectManager Game Object.
We then set this Flow Macro Super Unit here on our ObjectManager Game Object’s Flow Macro:
Run the SplitItem Custom Event into the SplitItem Flow Macro Super Unit and run the Output from it into this Branch. This will place the split amount of items in our hand.
The UpdateSplit Flow Macro
We’re almost done! We just need to set up one more Flow Macro Super Unit on the Item Game Object we’re splitting. Under the Macros –> 3 – Inventory Item folder, create a new Flow Macro and call it “UpdateSplit”. It will look like this:
Here we are getting the SplitAmount Scene Variable that was set by our Slider and running that into the First Node on our For Loop. The number of items in our SlotList will run into the Last Node. We then take each of these remaining items and put them in our PickedSlotList2 List on our ObjectManager, and Clear the SlotList. Then we add these Remainder Items back to our SlotList with a For Each Loop, and Clear the PickedSlotList2. Last, we Reset the Tag back to Item on this Game Object and run the Flow into the Output.
Change to the Item Macro
We’re also going to need to make a simple change to our Item (World Item, not Inventory Item) Flow Macro. We’re going to add a change here:
This is just a simple check that ensures that we can’t pick an item up if the SplitUI Panel is opened.
We also need to make this same change to the AddStack Flow Macro here:
Again, this just ensures that when our SplitUI Panel is opened, we can’t pick up an item.
Disable the SplitUI Panel
The very last thing we need to do is disable the SplitUI Panel so that when we start our game, it is not showing and will only come up when we want it to. We do this by clicking on our Panel Game Object and clicking the Check next to it’s name, which is right here:
Conclusion
Okay, when we test our game, we should now be able to bring up the SplitUI Panel and not only decide how many items we want to split, it should also grab all the items when we slide the slider all the way up and hit okay, and close the panel when we hit cancel.
What if we’d like to have the ability to consume items when we right click them in our inventory? Well, that’s what we’re going to set up in the next tutorial!
If you found this tutorial useful, maybe you’d consider supporting me on Patreon! You can do this by visiting my Patreon Page here! According to your level of support, you could have access to my Private Discord Server, take part in Online Polls for Future Tutorial Content, get a Shout Out in one of my videos, gain Early Access to Future Tutorials, and even Download My Completed Project Files!
I’m looking forward to the next tutorial where we’ll set up the ability to consume items!
Hope to see you there!
Megahertzs
PS: I’d like to thank the following people for helping me play test this system to find most of the bugs!
- MrVastayan
- JSM
- AliveDrive
- Jorotyn
Also I’d like to thank these contributors for being there to help answer my questions and even provide solutions for my problems:
- Zer0
- JasonJonesLASM
Couldn’t have done it without these guys!
Megahertzs 
