<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](ui-razor), or make Panels yourself. We recommend using [Razor](ui-razor). ⤶ # Making a Panel⤶ ⤶ Here's an example panel that has a Label which counts up forever. 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](ui-razor) to create panels with HTML and CSS that can also use C#.⤶ ⤶ It is recommended to use [Razor](ui-razor). ⤶ # Making a Panel in code⤶ ⤶ Here's an example panel with a Label that counts up forever.⤶ ## MyPanel.cs ```cs⤶ ⤶ ```csharp⤶ 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](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.⤶ - If a panel is not behaving as expected you can troubleshoot it using the 'UI Panels' inspector. Enable it in View > UI Panels⤶ <upload src="97/8dacf630b9f409d.png" size="32067" name="image.png" /> ## Scaling By default, UI is scaled based on 1080p. To change how scaling works, override your hud's `UpdateScale()` method as such: ⤶ ```cs⤶ ⤶ ```csharp⤶ using Sandbox; using Sandbox.UI; public class Hud : RootPanel { protected override void UpdateScale( Rect screenSize ) { // Completely disables scaling Scale = 1; } } ``` ## Drawing Polygons Example: ⤶ ```cs⤶ ⤶ ```csharp⤶ 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" />