Loading Screen

<cat>Play.Hosting</cat>
<title>Loading Screen</title>

# Loading Screen

You can show a custom loading screen to joining users in form of a website.

<br/>

## Loading URL

To specify which website is shown, set the `sv_loadingurl` convar.

<br/>

### Via Console

You can set the convar via a command line parameter.

```
+sv_loadingurl "<Website URL>"
```

```
+sv_loadingurl "https://wiki.facepunch.com/gmod/"
```

<br/>

### Via Autoexec

You can set the convar in your `autoexec.cfg` config file.

```
sv_loadingurl "<Website URL>"
```

```
sv_loadingurl "https://wiki.facepunch.com/gmod/"
```

<br/>

### URL Parameters

You can specify additional information in the URL via the following inserts:

#### Steam Id

Insert the user's Steam Id via the `%s` variable.

```Lua
"https://example.com/path?SteamId=%s"
```

#### Map

Insert the current map's name via the `%m` variable.

```Lua
"https://example.com/path?Map=%m"
```

<br/>

### Asset URL

Instead of an actual hosted website you can also specify an asset HTML file.

```Lua
"asset://garrysmod/html/loading.html"
```

<br/>

### Data URL

It's also possible to encode an HTML file as a [Data URL].

HTML page that displays an image:

```HTML
<style>

	html , body {

		background : black ;

		padding : 0 ;
		margin : 0 ;
	}

</style>

<img
	height = '100%'
	width = '100%'
	src = '<Image URL>'
>
```

Transformed into a Data URL:

```Lua
"data:text/html,<style>html,body{background:black;padding:0;margin:0;}</style><img height='100%' width='100%' src='<Image URL>'>"
```

Simply replace `<Image URL>` with your image's URL.

<br/>

<validate>

	Check if this method still works.  
	-> Add example images

</validate>

[Data URL]: https://developer.mozilla.org/en-US/docs/web/http/basics_of_http/data_urls

<br/>

##  Loading Pages

This section will not detail creating your page, and assumes you have already designed one.

###  JavaScript functions

There are several Javascript functions which are called directly by Garry's Mod. To use these, simply create a function with that name in your page - it will be called when the event associated with it happens.


```
/*
	Called at the start, when the loading screen finishes loading all assets.

	serverName - Server's name.
		Convar: hostname
		For exmaple: "Garry's Mod Server"
	serverURL - URL for the loading screen.
		Convar: sv_loadingurl
		For example: "http://mywebsite.com/myloadingscreen.html"
	mapName - The name of the map the server is playing.
		For example: "cs_office"
	maxPlayers - Maximum number of players for the server.
		Convar: maxplayers
	steamID - 64-bit, numeric Steam community ID of the client joining.
		For example: 76561198012345678
	gamemode - The gamemode the server is currently playing.
		Convar: gamemode
		For example: "deathrun"
	volume - The value of the player's in-game 'snd_musicvolume' console variable (Music Volume), from 0 to 1
	language - The value of the player's in-game 'gmod_language' console variable, a two letter representation of the player's main menu language
*/
function GameDetails( servername, serverurl, mapname, maxplayers, steamid, gamemode, volume, language ) {}
```



```
/*
	Called at the start

	total- Total number of files the client will have to download.
*/
function SetFilesTotal( total ) {}
```



```
/*
	Called when the client starts downloading a file.

	fileName- The full path and name of the file the client is downloading.
		This path represents the resource's location rather than the actual file's location on the server.
		For example, the file "garrysmod/addons/myAddon/materials/models/bobsModels/car.mdl" will be:
			"materials/models/bobsModels/car.mdl"
*/
function DownloadingFile( fileName ) {}
```



```
/*
	Called when the client's joining status changes.

	status- Current joining status.
		For example: "Starting Lua..."

	Under normal conditions this would not be fired until game client starts interacting with server files/workshop. This
	means you probably can't use "Retrieving server info" and everything that goes before downloads.
*/
function SetStatusChanged( status ) {}
```



```
/*
	Called when the number of files remaining for the client to download changes.

	needed- Number of files left for the client to download.
*/
function SetFilesNeeded( needed ) {}
```


###  PHP GET parameters

**%m** and **%s** will be replaced with the server's current map and the player's 64-bit steam community ID, respectively. This means you can grab them using PHP's $_GET superglobal.

The map is a string, so you should have no trouble making use of that.
However, the steam community ID is not the classic "shorthand" steam ID often seen in-game. A method of conversion (using PHP's bcmath & bcsub) is shown below.

<note> Method from http://maurits.tv/data/garrysmod/wiki/wiki.garrysmod.com/indexb59e.html --please notify if this doesn't work</note>

```
<?php
$authserver = bcsub( $communityid, '76561197960265728' ) & 1;
//Get the third number of the steamid
$authid = ( bcsub($communityid, '76561197960265728') - $authserver ) / 2;
//Concatenate the STEAM_ prefix and the first number, which is always 0, as well as colons with the other two numbers
$steamid = "STEAM_0:$authserver:$authid";
?>
```

<br/>

## Ready to use examples

###  gmod-lsm.com

A free, online and easy-to-use loading screen maker, without having to code anything or rent a web server.
[https://www.gmod-lsm.com](https://www.gmod-lsm.com)

<image src="ab571/8dc3896c6b1374b.jpg" alt="loading_screen_example.jpg" />

###  Load Seed
An application skeleton for building a loading screen. You can use it to quickly get started building your design. Make sure to read the readme before getting started.
https://github.com/glua/load-seed

<image src="load-seed-preview.jpg" alt="thumb|left"/>

###  gmodload.com

A completely free loading screen creator, with no coding, no webserver, and no watermarks.
[https://gmodload.com/](https://gmodload.com/)

<image src="ab571/8dc3896def6d515.png" alt="loading_screen_example_2.png" />

Loading Screen

Account Management

Special Pages

Wiki List

Garry's Mod Wiki