Polishing UI of the Inventory for Game

There should be an image representing each item, and we will provide this again using a hash table structure. But unlike the others, it will be predefined. The key's data type is uint and the value is a texture. Let's do it:

    class Inventory
    {
        ...
        Dictionary<uint, Texture> itemImages;
        ...

        public Inventory()
        {
            ...

            itemImages = new Dictionary<uint, Texture>();
            
            itemImages[4] = TextureManager.getTexture("quad");
            itemImages[6] = TextureManager.getTexture("star");
            ...

Now what I need to do is to update the showItems method accordingly.

        public void showItem()
        {
            // clear the inventory panel
            PanelTexture.Clear(new Color(194, 138, 85));

            ...

            foreach (var item in items)
            {   
                Sprite icon = new Sprite(itemImages[item.Key]);
                icon.Position = new Vector2f(10, lineHeight * line + lineHeight);
                icon.Scale = new Vector2f(0.7f, 0.7f);
                
                ...

                PanelTexture.Draw(icon);
                PanelTexture.Draw(Text);
                line++;
            }
            
            PanelTexture.Display();
            Panel.Texture = PanelTexture.Texture;
        }

Of course, we could have provided a much more efficient use here. But I'm moving a little fast. Let's look at the result:

That's okay. But now we have to improve the view of the panel. It looks so basic and irregular. Of course, it is not possible for me to achieve a responsive design. That process will take a lot of work. In my opinion, GUI can be one of the most difficult stages in game development. But, we must like difficult things if we are dealing with game programming.

I increased the panel width a little bit. Instead of showing the item id, I want to show the item name linked to that item id. So I defined a new hash table called itemNames(Dictionary<uint, string> itemNames; ). Initially, I determined the name of the items based on the item id.  I updated the showItems method as follows:

        public void showItem()
        {
            // clear the inventory panel
            PanelTexture.Clear(new Color(194, 138, 85));

            ...

            foreach (var item in items)
            {   
                ...
                
                Text.DisplayedString = itemNames[item.Key]+"\t "+itemsQuantity[item.Key];
                Text.Position = new Vector2f(42, lineHeight * line + lineHeight);
                Text.FillColor = Color.Blue;

                ...
            }
            
            PanelTexture.Display();
            Panel.Texture = PanelTexture.Texture;
        }

After this process, item name will be written instead of item id. Now, I want to make some changes in the background of the inventory. I will not add this changes in below, because it's really easy. I just added an outline and I changed alpha value for transparent:

That's all for now from this post. I hope it helped.We could make a lot things. I could also use a texture as background of the panel.