S&box Wiki

Home / UI Tips & Tricks

UI Tips & Tricks

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.

Tips and Tricks

Steam Avatars

To display a Steam avatar, specify the source using avatar:SteamId, like this:⤶

<img src="avatar:@player.Network.Owner.SteamId" />

You can adjust the avatar size using SCSS classes to style it as needed.⤶

Panel Classes

Debugging

  • If a panel is not behaving as expected you can troubleshoot it using the 'UI Panels' inspector. If its not enabled, you can do so under View > UI Panels.
image.png

Drawing Polygons

Example:

public class MyGui : Panel { 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 ); } } // Wrapper component so you can use this in the scene system. public class MyGuiComponent : PanelComponent { protected override void OnEnabled() { var gui = new MyGui(); gui.Parent = Panel; } }
image.png

Account Management

Special Pages

Wiki List