S&box Wiki

Home / UI Basics

UI Basics

There's 2 ways to make UI right now in S&box. You can either create Panels entirely through code, or you can use Razor to create panels with HTML and CSS that can also use C#.

It is recommended to use Razor.

Making a Panel in code

Here's an example panel with a Label that counts up forever.

MyPanel.cs

public class MyPanel : Panel { public Label MyLabel { get; set; } public MyPanel() { MyLabel = new Label(); MyLabel.Parent = this; } public override void Tick() { MyLabel.Text = $"{Time.Now}"; } }

Tips and Tricks

  • You can set Panel classes - See Panel.SetClass, and Panel.BindClass

  • If a panel is not behaving as expected you can troubleshoot it using the 'UI Panels' inspector. Enable it in View > UI Panels

image.png

Scaling

By default, UI is scaled based on 1080p.

To change how scaling works, override your hud's UpdateScale() method as such:

using Sandbox; using Sandbox.UI; public class Hud : RootPanel { protected override void UpdateScale( Rect screenSize ) { // Completely disables scaling Scale = 1; } }

Drawing Polygons

Example:

public class MyGUI : RootPanel { public override void DrawBackground(ref RenderState state) { // Obviously, don't declare this here every frame. But you get the idea. Span<Vertex> vertices = new Vertex[] { new Vertex( new Vector3( 100, 100 ), new Vector4( 0, 0, 0, 0 ), new Color32(255, 0, 0 ) ), new Vertex( new Vector3( 300, 100 ), new Vector4( 0, 0, 0, 0 ), new Color32(0, 255, 0 ) ), new Vertex( new Vector3( 300, 300 ), new Vector4( 0, 0, 0, 0 ), new Color32(0, 0, 255 ) ), }; var attribs = new RenderAttributes(); attribs.Set( "Texture", Texture.White ); Graphics.Draw( vertices, 3, Material.UI.Basic, attribs, Graphics.PrimitiveType.Triangles ); } }
image.png

Account Management

Special Pages

Wiki List