S&box Wiki

Home / History for UI Basics

Revision Difference

UI#529735

<cat>Code.Misc</cat>⤶ <title>UI</title>⤶ ⤶ # Basics⤶ UI entites are implemented using HTML and/or C#. Entities can be styled using SCSS, a preprocessor scripting language that is interpreted/compiled into Cascading Style Sheets (CSS). This is done out of the box.⤶ ⤶ # Simple UI (static, hybrid)⤶ ⤶ For static entities without any dynamic component (static banner, simple non-changing crosshair, etc.) HTML UI might be sufficient.⤶ ⤶ You can still reference C# classes within the HTML using regular HTML-Tags. The referenced C# classes can still react dynamically to the game loop.⤶ ⤶ ## Example: Static crosshair w/ dynamic C# chatbox⤶ ⤶ ```html⤶ <link rel="stylesheet" href="minimalhud.scss">⤶ ⤶ <div>⤶ ⤶ <text class="title">My Minimal Game</text> ⤶ ⤶ <!-- The default chatbox (/addons/base/Code/UI/Chat/ChatBox.cs) --->⤶ <chatbox></chatbox>⤶ ⤶ <!-- A crosshair in just css -->⤶ <div style="position: absolute; left: 50%; top: 50%; background-color: white; border-radius: 10px; width: 4px; height: 4px; transform: translate( -50% -50% );"></div>⤶ ⤶ </div> ⤶ ```⤶ ⤶ Source: [sbox-minimal MinimalHud.html](https://github.com/Facepunch/sbox-minimal/blob/5bc57dd049b20bbf81ea0602780ccb40099e3aac/minimal/code/MinimalHud.html)⤶ ⤶ # Advanced UI (dynamic, full-on C#)⤶ ⤶ For more complex scenarios (e.g. HUD's) an UI implementation using C# is recommended (and probably the only good solution).⤶ ⤶ UI components can be implemented using the abstract class `Panel`. This abstract class has a method `override void Tick()` so you can access the game loop.⤶ ⤶ UI components can either be mounted directly or through other UI Components using `RootPanel.AddChild<E>();`. Usually done in the constructor of the class.⤶ ⤶ To add (S)CSS to the components, simply use `RootPanel.StyleSheet.Load( "/ui/PATH_TO_SCSS.scss" );` in the constructor.⤶ ⤶ ⤶ ## Example: HUD w/ health display⤶ ⤶ Down below you can see an example from the sandbox gamemode. ⤶ ⤶ `SandboxHud` implements the `Hud` 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.⤶ ⤶ ⤶ [SandboxHud.cs](https://github.com/Facepunch/sandbox/blob/d251c6b6b39f57bba0df7caba1fe81fce06faac8/code/ui/SandboxHud.cs)⤶ ```cs⤶ using Sandbox;⤶ using Sandbox.UI;⤶ ⤶ [Library]⤶ public partial class SandboxHud : Hud⤶ {⤶ 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>();⤶ }⤶ }⤶ ```⤶ ⤶ ⤶ [Health.cs](https://github.com/Facepunch/sandbox/blob/d251c6b6b39f57bba0df7caba1fe81fce06faac8/code/ui/Health.cs)⤶ ```cs⤶ using Sandbox;⤶ using Sandbox.UI;⤶ using Sandbox.UI.Construct;⤶ ⤶ public class Health : Panel⤶ {⤶ public Label Label;⤶ ⤶ public Health()⤶ {⤶ Add.Label( "🩸", "icon" );⤶ Label = Add.Label( "100", "value" );⤶ }⤶ ⤶ public override void Tick()⤶ {⤶ var player = Player.Local;⤶ if ( player == null ) return;⤶ ⤶ Label.Text = $"{player.Health:n0}";⤶ }⤶ }⤶ ```⤶ ⤶

Account Management

Special Pages

Wiki List