Devblog post #9 – Inventory GUI

Neander

Inventory and Gathering

The past two weeks I have been working on the basis for an inventory. See the result below.

Inventory GUI Showcase

I made a system that makes use of the interfaces that Unity provides for dragging and dropping UI items. Every slot in the inventory has a script that communicates with the inventory controller and tells it if something was dropped on it or the item got moved. The inventory controller makes sure that the dictionary is up to date and then tells the inventory handler of the player that changes were made so that it is up to date. At this point the player can pick up certain items and these will be added to the first empty slot in the inventory. If the inventory is full the item won’t get picked up. When the inventory contains items, they can be dragged and dropped on other slots to better organize to your needs. When an item is dropped outside of the inventory GUI, the item gets dropped on the ground and then becomes part of the chunk so that it can be saved and loaded properly.

I also made a test for animating the inventory so that it is not always in the screen when you don’t need it. This is something we need to test and implement at a later point in time. Stacking items and when dropping on a filled slot swapping items are also things on our wishlist for the inventory. So keep your eyes out for those changes.

Settings

In my spare time I also implemented a basic settings screen and manager. I already made this so that we can start adding settings to the screen when developing features. This is also very handy for testing and debugging certain features. For now we can set a cool looking but not that functional pixelate shader and the more usefull master volume. I am pretty happy at how fast it went to add this feature into the project. We are currently working on expanding the website by adding a tech-tip section and when that goes live I will upload a more in depth explanation on how I made this settings manager work. For now here is a gif showcasing it.

Settings Screen

Jeen

UI Design

Hey guys and gals! I’ve been working on some UI design for our game. The inventory was the first to be designed. Before sketching and matching stuff I started looking at the positioning of the GUI. The position of the UI would greatly change the possibilities for the design.
Because our camera’s angle stares a bit into the distance. Because of the perspective view the objects in the top of the screen appear smaller (simply because they are farther away from the camera). This effect makes it so that the more the UI is on the top of the screen. The more “relative” space it covers.

I visualized it in the image below:
Usable Area For GUI

The green space is the space that won’t be covering “too much” relative screen space. The red however covers more relative screen space. An example is the Greydear in front of the player. A UI button, bar or image could easily cover the whole object or break it’s silhoutte.

One of the earlier design doodles was a circle around the character (in the middle). This design would be easy to use for mouse and controller. The objects would appear like they were lying on a small oval, simulating depth in the UI. This design didn’t make it for the biggest reason being that it had the potential to get really chaotic. The design would only work in open spaces and would get really messy when there are too much objects around the player. Making it hard to see the difference between the world and the UI. But the design was the start of the idea of making the UI have a bit of depth in it.

Inventory GUI Test

A simple UI would be the best for too much detail would make it look off when it’s held next to the game world. I matched the texture of the slots with the game world by applying geometric patterns. For a solid color would look too dull. The objects in the slots are breaking out off the slot area creating depth and making the UI look less symmetrical.

Inventory GUI Design

That’s it for now folk!
Be sure to check the next blog to see the chosen inventory design in work.