UI System

Currently the UI System is Really Basic!

We have 2 main classes that we need to use UIManager an important class because of his core functionality and the GameDisplayBuilder. So now lets break down how the system works.

Basic UI

We need a Player and a Class that imports GameDisplayBuilder

An Example class could be

    public class PersonalDisplayBuilder : GameDisplayBuilder
    {
        private readonly StringBuilder _builder;

        private string ServerName = "MySCPSL Server";


        public PersonalDisplayBuilder(StringBuilder builder) : base(builder)
        {
            _builder = builder;
        }

        ~PersonalDisplayBuilder() => StringBuilderPool.Shared.Return(_builder);

        //Displayed When a player is not a spectator
        public override void CustomUIAlive(StringBuilder builder, UIScreenZone zone)
        {
            if (zone == UIScreenZone.Bottom)
            {
                StringBuilder sb = new StringBuilder()
                .SetSize(60, MeasurementUnit.Percentage)
                .SetAlignment(AlignStyle.Left);

                sb.SetIndent(-25, MeasurementUnit.Percentage)
                    .SetSize(1.5f, MeasurementUnit.Pixels)
                    .Append(PFP)
                    .CloseSize()
                    .CloseIndent();

                sb.SetIndent(-15, MeasurementUnit.Percentage)
                    .AddVOffset(15, MeasurementUnit.Ems)
                    .Append(ServerName)
                    .CloseVOffset()
                    .CloseIndent();

                builder.Append(sb.ToString());
            }
        }

        //Displayed When a player is a spectator
        public override void CustomUISpectator(StringBuilder builder, UIScreenZone zone)
        {

        }
    }

Now lets break down even more the code by the methods

• CustomUISpectator, Lets us show a gui that is for the Spectator
• CustomUIAlive, Lets us show a gui that is for the people alive (SCP Included)

Now that we know how to create and manage this Class we can now add the Component to the player and seeing the result in game

            PersonalDisplayBuilder display = new PersonalDisplayBuilder(StringBuilderPool.Shared.Rent());

            player.GameObject.AddComponent<UIManager>()._mainDisplay = display;

Now the result in game will be

Note that a class that could be helpful is HintHelper

Elements UI

Taken Inspiration from React.js this system takes place with 2 main classes Element and GameElementDisplay

Like the one Basic One where you needed to setup everything yourself this one lets automatically setup everything for you without adding additional code and the advantage is having a system that lets you re-use same elements in other UIs

    public class PersonalElementDisplay : GameElementDisplay
    {
        private readonly StringBuilder _builder;

        public PersonalElementDisplay(StringBuilder builder) : base(builder)
        {
            _builder = builder;
        }

        ~PersonalElementDisplay() => StringBuilderPool.Shared.Return(_builder);

        public override List<Element> Elements { get; set; } = new()
        {
            //Alive Elements
            new HelloWorldElement(),

            //Both
            new ProfilePictureElement(),
        };
    }

Like before we have the same class that lets us, customize the UI, now lets talk about elements

    public class HelloWorldElement : Element
    {
        public override string Name { get; set; } = "Hello World";
        public override string Text { get; set; } = "Hello World";
        public override Vector2 Position { get; set; } = new Vector2(-500, 300);

        public override TextSettings Settings { get; set; } = new()
        {
            Size = 60,
        };

        public override UIScreenZone Zone { get; set; } = UIScreenZone.Center;
        public override UIType UI { get; set; } = UIType.Alive;
    }

(Note that text can still use the other rich tags and use the StringBuilder like before)

This is a simple element that displays in the (-500, 300) position of your screen the text "Hello World", for using other methods like Profile Picture can be directly used by writing "PFP" inside the Text variable

Now lets talk about the OnRender, Like React this uses a render system that can be modified this allows to some cool things for example moving the text

        public override string OnRender()
        {
            Position = new Vector2(UnityEngine.Random.Range(0, 301), UnityEngine.Random.Range(0, 301));

            return base.OnRender();
        }

Just like this or modifying anything releated to this element

Now that we know how to create and manage this Class we can now add the Component to the player and seeing the result in game

            PersonalElementDisplay display = new PersonalElementDisplay(StringBuilderPool.Shared.Rent());

            player.GameObject.AddComponent<UIManager>()._mainDisplay = display;

Send Notifications / Messages

The advantage of this UI are endless you can send notification specific to a player

player.SendMessage(UIScreenZone.Notifications, "Hello World", 10);

This system can be used to send messages everywhere in the UI for some times.