Max Proof: Designing an Inventory

  One of the things many people are told is that you gain more experience in a specific skill whether its doing more on hand tasks at a new job or doing more in a degree that your pursuing. All I can say is it's true. To start this off while pursuing my Bachelors in Game Programming as a junior I took Midterm project. Our project at the time was a first person puzzle game made on Unreal Engine 3 where the character is trapped in some ruins. The goal of the game was to get out of the ruins through solving puzzles. One of the main mechanics I can recall for this game was an Inventory System where the user can switch between a torch or a lighter,  even have the ability to pull different books out of the inventory to read. Now out of all the things me and my group were taught in our major, creating an Inventory system was something that was never taught before. Although of that, as a programmer your known for creating problems and solutions. With all the material gather, chances are you can use that knowledge to create your own Inventory. At the time however, I guess you can say we weren't as experienced enough to just dive into creating an inventory for our midterm project. So where am I leading with this?

  Well to dive right into it, I am currently a senior now attending senior project. The project that was assigned to us was Max Proof. In Max Proof players are given an inventory of items where the user can drag and drop to baby proof an area. So here it is again, an Inventory that has to be created. To top it all off, through our entire time as a Game Programmer we were taught the ins and outs of Unreal Engine 3. Seeing that Unreal Engine 4 came out we decided as a group to dive into that instead and it was a huge transition I must say. 

  With Unreal Engine 3, creating UI would have to be done through Scaleform which in turn would have to be done through Adobe Flash where you use Scaleform to transition that SWF file onto Unreal Engine 3. Looking at Unreal En
gine 4, there isn't any Scaleform, instead there's Widget Blueprints where you can create the UI through there. Personally from seeing that I was thrilled because it saved me the time to go through of having to do one thing in a program to another. So what is the difference between me and my group from where we were a junior taking midterm project versus now?

Ruin Game

  The difference I would say is we now know how to create an Inventory. In fact, as a programmer we've learn that not only does it take a lot of hands on work to gain experience but it also takes much research as well to be able to expand your knowledge. The goal for the inventory in Max Proof is to allow the user to grab items and place them into the level. With the items it will cause a list of events. These items are, a lock, duct tape, boards, and gates. Knowing the inventory will consist of these items means we will need four graphics that are buttons (Gate graphic in progress). Upon clicking the buttons a polygon mesh will come out where the user can drag the mesh and drop it into the game world. Having this information I was able to know how to design the inventory. The great thing about Unreal Engine 4 is that Scaleform is not integrated into it. Did I say that before? 

  In Unreal Engine 4 we have something called Widget Blueprints where developers, designers, even programmers can create UI with but enough of that, lets get into the implementation.

  I would like to break this implementation down through three phases, design, production and polish.  During our design phase we created a Widget Blueprint called Hud. In this widget blueprint we started off by creating a horizontal box in the canvas and placing it below in the canvas with the length filled to where its fully expanded. This horizontal box we called "inventory". Inside Inventory we also threw in four buttons naming them IS1, IS2, IS3, IS4 which standed four Inventory Slot with an associated number to it. To continue this we made should to have some padding with each button to create a space between them all. After actually being comfortable of the buttons placement in the Inventory we threw in an image inside each button. So the hierarchy looked like Canvas >  Inventory > IS1 > image , IS2 > image, IS3 > image, IS4 > image. The purpose of placing these images in the buttons well was of course to create the look that the buttons were truly the images. Thus doing this practically completed our design of the inventory. But is that really all we had to do for designing the inventory? Not at all! We had a few more steps.

  This last steps consisted of creating a new blueprint class that derived or inherited from a HUD. After creating this new blueprint GameHud, we basically grabbed our widget blueprint and added it to GameHud through using the event graph. In the Event graph we basically said... At the start of the level create this widget blueprint called Hud and place it in the viewport. At the same time, set the current mouse to show on the screen. From doing this we allow ourselves to actually have the Inventory appear when playing the game but how does the compiler know to actually call this GameHud blueprint? This is where the game mode comes in.

  With Game mode we can actually assign things like what the player controller class is, the pawn class, the hud class or the camera class. With that knowledge we created a Game Mode blueprint and had GameHud integrated in it. Thus, the HUD is officially done with the design.