Games in Unity
Unity Custom Loading
5 min
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 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 in assets/webgltemplates/airconsole assets/webgltemplates/airconsole and update the progress bar config progress bar config object 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 index html will be renamed to screen html screen html by the post build process