Games in Unity
Unity Custom Loading

5min
The AirConsole Unity Plugin allows you to easily customize your Unity WebGL loading screen and loading bar.
Note: Make sure your AirConsole Unity Plugin is updated to the newest version and that your Unity Editor is version 5.6 or higher.
Loading Screen Background
To replace the loading screen image, simply replace the png file found in Assets/WebGLTemplates/AirConsole/TemplateData.
﻿
Loading Bar customization
You can customize the loading bar (Only works for the WebGL build, not AndroidTV) so that it matches your background image in size, placement and colors.
Once the game is fully loaded, both the bar and background disappear, revealing the loading screen image below.
Unity 2019 and down
Make sure that you selected the AirConsole WebGL template:

﻿
Go to your index.html that can be found inAssets/WebGLTemplates/AirConsoleand update theprogress_bar_configobject.
function initAirConsole() {
 var unity_web_config = {
   width: 16,
   height: 9
 };
 var progress_bar_config = {
   left: "35%",
   top: "65%",
   width: "30%",
   height: "5%",
   background: "#000000",
   color: "#ADEE00"
 };
 window.app = new App('game', unity_web_config, progress_bar_config);
}
left and top
Determine where the top left corner of your loading bar will be placed.
width and height
Determine how wide and tall the loading bar will be.
background
Determines the color of your “empty” loading bar. This color will gradually be hidden by the progressing bar drawn above it.
color
Determines the color of the actual progress bar. This color will gradually grow to match the loading progress.
Unity 2020 and up
For Unity versions 2020 and up the customization is simpler and you don't have to edit any HTML or JS files directly. Make sure that you selected the AirConsole-2020 WebGL template in the Player settings.
Go to Edit Project Settings > Player > Resolution and Presentation and edit the Progress bar fields.
﻿
Progress bar background color.
Determines the color of your “empty” loading bar. This color will gradually be hidden by the progressing bar drawn above it.
Progress bar color.
Determines the color of the actual progress bar. This color will gradually grow to match the loading progress.
Progress bar height and width.
Determine how wide and tall the loading bar will be.
Progress bar offset top and left.
Determine where the top left corner of your loading bar will be placed.
The values for Progress bar height/width and top/left are percentage based.
Make sure that you specify height/width and top/left values, otherwise it won't show the custom loading screen.
Note: that upon exporting the game to WebGL, index.html will be renamed to screen.html by the Post Build Process.
﻿
Updated 26 Sep 2024
Did this page help you?
Unity Game on Android TV
AirConsole Hero & Revenue