<cat>UI.Intro</cat> <title>UI Basics</title> There's 2 good ways to make UI right now in s&box. You can either use [Razor](https://wiki.facepunch.com/sbox/ui-razor), or make Panels yourself. We recommend using [Razor](https://wiki.facepunch.com/sbox/ui-razor). # Making a Panel Here's an example panel that has a Label which counts up forever. ## MyPanel.cs ```cs [UseTemplate]⤶ public class MyPanel : Panel { public Label MyLabel { get; set; } ⤶ public MyPanel()⤶ {⤶ MyLabel = new Label();⤶ MyLabel.Parent = this;⤶ }⤶ public override void Tick() { Label.Text = $"{Time.Now}"; } } ```⤶ ⤶ `[UseTemplate]` will load a template with the same class name (`MyPanel.html`).⤶ ⤶ ## MyPanel.html⤶ ```html⤶ <link rel="stylesheet" href="MyPanel.scss"/>⤶ ⤶ <div>⤶ <label class="name" @ref="MyLabel">Placeholder Text</label>⤶ </div>⤶ ```⤶ ⤶ `<link rel="stylesheet" href="MyPanel.scss"/>` will load a stylesheet with the file name that you specify. It works on relative paths from your `.html` file.⤶ ⤶ ## MyPanel.scss⤶ ``` MyPanel {⤶ position: absolute;⤶ left: 64px;⤶ top: 64px;⤶ ⤶ .name {⤶ font-family: Poppins;⤶ color: white;⤶ font-size: 32px;⤶ }⤶ }⤶ ⤶ ```⤶ # Tips and Tricks - You can set Panel classes - See [Panel.SetClass](https://asset.party/api/Sandbox.UI.Panel.SetClass(string,bool)), and [Panel.BindClass](https://asset.party/api/Sandbox.UI.Panel.BindClass(string,Func)) - If a panel is not behaving as expected you can troubleshoot it using the Panel Inspector. While in Editor Mode, open the Explorer and hit Panels. <upload src="97/8dacf630b9f409d.png" size="32067" name="image.png" /> ⤶ # Scaling By default, UI is scaled based on 1080p. ⤶ ## Scaling ⤶ By default, UI is scaled based on 1080p. To change how scaling works, override your hud's `UpdateScale()` method as such: ```cs⤶ ⤶ ```cs⤶ using Sandbox; using Sandbox.UI; public class Hud : RootPanel { protected override void UpdateScale( Rect screenSize ) { // Completely disables scaling Scale = 1; } } ``` ⤶ # Drawing Polygons ⤶ ## Drawing Polygons Example: ```cs 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 ); } } ``` <upload src="b0cef/8dad4b74473f6ab.png" size="152528" name="image.png" /> ⤶ # Examples⤶ <warning>These examples may be obsolete.</warning>⤶ ⤶ ## Example: HUD w/ health display⤶ ⤶ Down below you can see an example from our [Sandbox](https://github.com/facepunch/sandbox) gamemode.⤶ ⤶ `SandboxHud` implements the `HudEntity<RootPanel>` class and loads a stylesheet and all other UI components.⤶ ⤶ The `Health` class implements `Panel` and adds a bunch of stuff to the UI within its constructor.⤶ It also has access to the local player's health within the `Tick`-override, so the UI can be updated accordingly.⤶ ⤶ ```cs⤶ using Sandbox;⤶ using Sandbox.UI;⤶ ⤶ [Library]⤶ public partial class SandboxHud : HudEntity<RootPanel>⤶ {⤶ public SandboxHud()⤶ {⤶ if ( !IsClient )⤶ return;⤶ ⤶ RootPanel.StyleSheet.Load( "/ui/SandboxHud.scss" );⤶ ⤶ RootPanel.AddChild<NameTags>();⤶ RootPanel.AddChild<CrosshairCanvas>();⤶ RootPanel.AddChild<ChatBox>();⤶ RootPanel.AddChild<VoiceList>();⤶ RootPanel.AddChild<KillFeed>();⤶ RootPanel.AddChild<Scoreboard<ScoreboardEntry>>();⤶ RootPanel.AddChild<Health>();⤶ RootPanel.AddChild<InventoryBar>();⤶ RootPanel.AddChild<CurrentTool>();⤶ RootPanel.AddChild<SpawnMenu>();⤶ }⤶ }⤶ ```⤶ ⤶ Source: [sandbox - SandboxHud.cs](https://github.com/Facepunch/sandbox/blob/0ae8ada7fae4b3876fd3d82d0385fa72dbacbf6f/code/ui/SandboxHud.cs)⤶ ⤶ ```cs⤶ using Sandbox;⤶ using Sandbox.UI;⤶ using Sandbox.UI.Construct;⤶ ⤶ public class Health : Panel⤶ {⤶ public Label Label;⤶ ⤶ public Health()⤶ {⤶ Label = Add.Label( "100", "value" );⤶ }⤶ ⤶ public override void Tick()⤶ {⤶ var player = Local.Pawn;⤶ if ( player == null ) return;⤶ ⤶ Label.Text = $"{player.Health.CeilToInt()}";⤶ }⤶ }⤶ ⤶ ```⤶ ⤶ Source: [sandbox - Health.cs](https://github.com/Facepunch/sandbox/blob/69b8565a78b646520c47463a33ee2fa85d726762/code/ui/Health.cs)⤶ ⤶ ## Example: Interacting with UI⤶ We are able to interact with the stylesheet from the c# file. We can for exemple⤶ - AddClass to a panel/Label⤶ - RemoveClass to a panel/Label⤶ ⤶ In the exemple below we are removing the health hud if the player is in a car by using ⤶ `(Panel, Label or this).AddClass(string classname)` and `(Panel, Label or this).RemoveClass(string classname)`.⤶ ⤶ ```cs⤶ using Sandbox;⤶ using Sandbox.UI;⤶ using Sandbox.UI.Construct;⤶ ⤶ public class Health : Panel⤶ {⤶ public Label Label;⤶ ⤶ public Health()⤶ {⤶ Label = Add.Label( "100", "health-label active" );⤶ }⤶ ⤶ public override void Tick()⤶ {⤶ var player = Local.Pawn;⤶ if ( player == null ) return;⤶ ⤶ if (player.Health.CeilToInt() == -1) ⤶ {⤶ Label.RemoveClass("active")⤶ } ⤶ else⤶ {⤶ Label.AddClass("active")⤶ }⤶ ⤶ Label.Text = $"{player.Health.CeilToInt()}";⤶ }⤶ }⤶ ⤶ ```⤶ ⤶ ```⤶ .health-label⤶ {⤶ position: absolute;⤶ background-color: rgba( black, 0.5 );⤶ right: 100px;⤶ bottom: 48px;⤶ font-size: 40px;⤶ font-weight: bold;⤶ color: white;⤶ height: 80px;⤶ padding: 0 20px;⤶ align-items: center;⤶ opacity: 0;⤶ ⤶ &.active {⤶ opacity: 1;⤶ }⤶ }⤶ ```⤶ ⤶