<cat>UI.Intro</cat> <title>UI Basics</title>⤶ <title>UI Tips & Tricks</title>⤶ 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). # Tips and Tricks - You can set Panel classes - See [Panel.SetClass](https://sbox.game/dev/api/Sandbox.UI.Panel/SetClass), and [Panel.BindClass](https://sbox.game/dev/api/Sandbox.UI.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⤶ - 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.⤶ <upload src="2a1e9/8dd32660fc6ff2c.png" size="25281" 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:⤶ ⤶ ```csharp⤶ using Sandbox;⤶ using Sandbox.UI;⤶ ⤶ public class Hud : RootPanel⤶ {⤶ protected override void UpdateScale( Rect screenSize )⤶ {⤶ // Completely disables scaling⤶ Scale = 1;⤶ }⤶ }⤶ ```⤶ ## Drawing Polygons Example: ```csharp 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; } } ``` <upload src="b0cef/8dad4b74473f6ab.png" size="152528" name="image.png" />