<cat>UI.GameMenu</cat> <title>Loading Screens</title> # What is a loading screen? Loading screens are shown when entering a game server. During loading the client connects to the server, downloads the game, map and any addons, and then actually joins the game. <upload src="1/8db67e802b34452.jpg" size="23624" name="sbox_0185.jpg" /> The loading screen usually shows progress indicating which of these things it's doing. It's also nice to have a cancel button. # Defining Your Loading Screen When your game is opened in the menu, we look in your game for a `Panel` or `RootPanel` that implements the `Sandbox.Menu.ILoadingScreenPanel` interface. If we find it, then we create it and that's your loading screen. So to create a loading screen panel in plain c#, you'd do something like this. ``` public class MyMainMenu : RootPanel, Sandbox.Menu.ILoadingScreenPanel { public void OnLoadingProgress( Sandbox.Menu.LoadingProgress progress ) { } } ``` or to define one in Razor you'd do ``` @using Sandbox; @using Sandbox.UI; @inherits RootPanel @implements Sandbox.Menu.ILoadingScreenPanel <root> <div>Loading!</div> <div>@Progress.Title</div> </root> @code { public LoadingProgress Progress; public void OnLoadingProgress( LoadingProgress progress ) { Progress = progress; StateHasChanged(); } } ``` From there you can add stylesheets and panels as you would normally define any UI. ⤶ # Resources⤶ ⤶ Much like the [Game Menu](https://wiki.facepunch.com/sbox/creating_a_gamemenu), you can add specific resources to download before the rest that are required for your loading screen.⤶ ⤶ You just add them into your project settings Menu files.⤶ <upload src="1/8db65d128d9c32a.png" size="107091" name="image.png" />⤶ ⤶ Your Game Menu and Loading Screen resources will both be in this list and both be downloaded before loading up your menu!⤶ # LoadingProgress The `OnLoadingProgress` method receives a `LoadingProgress` struct from the engine. This holds information on the current load progress. # Cancelling To cancel, just call `Game.Menu.CancelLoading()`. You can easily wire a button up to do this in Razor like this. ``` <div class="controls"> <div class="button" onclick="@Game.Menu.CancelLoading"> Cancel </div> </div> ```