Revision Difference
loading_screen#550128
<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⤶
@using Sandbox.Menu;⤶
⤶
@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>
```