Making User Interface for Inventory System

We made a basic version of inventory system in the previous post. In this post, I want to create an user interface for inventory. When the player pressed E key, it will be appear ui of the inventory. The ui of the inventory wont be grid version for now. I will do it in the next posts.

I will create a rectangle in the inventory class. This rectangle will represent the inventory panel:

    class Inventory
    {
        ...
        
        // ui properties
        public bool ShowPanel { get; set; }
        RectangleShape Panel { get; set; }
        RenderTexture PanelTexture { get; set; }

        public Inventory()
        {
            ...

            Panel = new RectangleShape(new Vector2f(200, 250));
            PanelTexture = new RenderTexture(200, 250);
            PanelTexture.Clear(new Color(194, 138, 85));
            PanelTexture.Display();
            // centered on the screen
            Panel.Texture = PanelTexture.Texture;
            Panel.Position = new Vector2f(320 - 200/2, 240 - 250/2);
        }

Also I create ShowPanel property to manage inventory visibility. If the player of the game pressed E key the boolean value will be changed as opposite. We need to draw this panel, therefore I added a new method called draw and if ShowPanel is true then the Panel will be drew on the screen.

        public void Draw(RenderTarget target)
        {
            if(ShowPanel)
            {
                target.Draw(Panel);
            }
        }

I want to see this panel on the screen. So, I will execute this draw method in the draw method of the player class:

        public override void draw(RenderTarget target)
        {
            target.Draw(entity);
            inventory.Draw(target);
        }

After that, I have to add an delegate for key event to handling key from the user in the Progam.cs:

            window.KeyPressed += (sender, args) => 
            {
                if (args.Code == Keyboard.Key.E)
                {
                    player.Inventory.ShowPanel = !player.Inventory.ShowPanel;
                }
            };

Let's look at the result:

Now it's time to list the items in this inventory on this panel. Firstly I need a font to type some text. You can use what you want font this is optional. I created a folder named fonts in the project folder, I put the font file in this folder.

        Font Font { get; set; }
        Text Text { get; set; }

        public Inventory()
        {
            ...

            Font = new Font("Fonts/FreeMono.ttf");
            Text = new Text();
        }

Normally, we did list items in the console. Now we will do it the samething on the panel rectangle:

        Font Font { get; set; }
        Text Text { get; set; }

        public Inventory()
        {
            ...

            Font = new Font("Fonts/FreeMono.ttf");
            Text = new Text();
        }

I updated the showItem method:

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

            Text = new Text("Item ID\tQuantity", Font, 15);
            Text.Position = new Vector2f(10, 5);
            int lineHeight = 25;
            int line = 0;
            Text.FillColor = Color.Black;
            Text.Style = Text.Styles.Bold;
            PanelTexture.Draw(Text);

            foreach (var item in items)
            {   
                Text.DisplayedString = item.Key+"\t\t\t"+itemsQuantity[item.Key];
                Text.Position = new Vector2f(10, lineHeight * line + lineHeight);
                Text.FillColor = Color.Blue;
                PanelTexture.Draw(Text);
                line++;
            }
            
            PanelTexture.Display();
            Panel.Texture = PanelTexture.Texture;
        }

I aware that looks awful at first, We don't have choice if we want to use custom UI for the game. Maybe I can minimize this usage in the next posts. Now, let's look at the result again:

That's cool. We can polish this panel with more ways. I will try to give a better view of the inventory in the next post.