How to compile game or WebGL application in Unity, Testing, Possible errors

Introduction

In this arti¬≠cle we see how to gen¬≠er¬≠ate a WebGL stand¬≠alone ver¬≠sion of our project that can be run on browsers, that is to say a pro¬≠gram that can be host¬≠ed on a serv¬≠er, for exam¬≠ple in Itch.IO or in our own web page.

CHECK OUT THIS CRAZY EXPERIMENT

How to create a build for browsers from a Unity 3D project

We start by going to the File > Build Set­tings tab, this will open the "Build Set­tings" win­dow shown in Fig­ure 1. Here we can con­fig­ure some com­pi­la­tion para­me­ters, such as the scenes to be added and the tar­get platform.

unity build settings window to configure the compilation parameters
Fig. 1: Build Set­tings win­dow for con­fig­ur­ing the build and com­pile parameters.

Let's click on the "Add Open Scenes" but­ton to add the cur­rent scene to the com­pi­la­tion (a blank scene that comes by default). The scene placed in posi­tion 0 will be the one loaded at start­up, so if we have mul­ti­ple scenes we will have to reorder them accordingly.

add open scene button of the unity build settings window
Fig. 2: But­ton for adding the cur­rent scene to the compilation.

To gen¬≠er¬≠ate a WebGL build for browsers, it is nec¬≠es¬≠sary to con¬≠fig¬≠ure Uni¬≠ty to pro¬≠duce this kind of builds. In the "Build Set¬≠tings" tab is the list of tar¬≠get plat¬≠forms, there we must select the "WebGL" plat¬≠form and then click on the "Switch Plat¬≠form" but¬≠ton. This will start the plat¬≠form switch¬≠ing process which may take a few min¬≠utes, this process needs to be done only once, unless we need to switch between Win¬≠dows or brows¬≠er builds. In gen¬≠er¬≠al it is more com¬≠fort¬≠able to test on the oper¬≠at¬≠ing sys¬≠tem itself and after mak¬≠ing sev¬≠er¬≠al advances, pro¬≠duce a WebGL com¬≠pi¬≠la¬≠tion to upload it to Itch.io or to our own web page.

change of compilation platform in Unity
Fig. 3: The WebGL plat­form is select­ed and the "Switch Plat­form" but­ton is clicked.

Once the plat¬≠form change is done, the next step is to click on the "Build and Run" but¬≠ton, this will dis¬≠play a win¬≠dow in which we will select the des¬≠ti¬≠na¬≠tion fold¬≠er to export the files of the game or appli¬≠ca¬≠tion. In my case I usu¬≠al¬≠ly cre¬≠ate a fold¬≠er called Builds in par¬≠al¬≠lel to the Assets fold¬≠er of the project itself, but you can choose any fold¬≠er you want, make sure you remem¬≠ber where it is locat¬≠ed so you can use the files later.

target file selection, unit webgl compilation for browsers
Fig. 4: Choose the des¬≠ti¬≠na¬≠tion direc¬≠to¬≠ry for the Uni¬≠ty WebGL build files.

When we have cho­sen the des­ti­na­tion fold­er we click on "Select Fold­er" to confirm.

At this point the com­pi­la­tion process begins, which will take more or less time depend­ing on fac­tors such as the com­plex­i­ty of the project and the pow­er of our com­put­er, in fig­ure 5 we see the load­ing bar of this process.

unity compilation process for browsers
Fig. 5: The process of com­pil­ing Uni­ty for browsers is in progress.

When the com­pi­la­tion process fin­ish­es, as we com­piled with the "Build and Run" option, the appli­ca­tion opens auto­mat­i­cal­ly in our browser.

If we go to the fold­er that was cho­sen for the com­pi­la­tion we will find the game or appli­ca­tion files (fig­ure 8). These files can be uploaded to a web­site like Itch.IO or to your own serv­er and the game can be loaded direct­ly in the browser.

files resulting from a webgl compilation of unity for browsers
Fig. 6: The result of the WebGL com­pi­la­tion is locat­ed in the fold­er we indicated.

How to test WebGL builds made in Unity

In Fig­ure 6 we see the fold­er con­tain­ing the files that were gen­er­at­ed dur­ing the com­pi­la­tion. The file "index.html" would be some­thing like the exe­cutable of our game or appli­ca­tion. The prob­lem is that when we click on it to test we get the fol­low­ing message:

unity webgl your browser does not support running unity webgl content solution
Fig. 7: When try¬≠ing to open the WebGL com¬≠pi¬≠la¬≠tion we get a mes¬≠sage say¬≠ing that our brows¬≠er does not sup¬≠port it.

The mes­sage says that appar­ent­ly our brows­er does not sup­port the Uni­ty WebGL com­pi­la­tion, it tells us to upload the con­tent to a serv­er or try anoth­er browser.

To test a WebGL build, the fastest way is to recom¬≠pile with the "Build and Run" option, since by doing this, Uni¬≠ty auto¬≠mat¬≠i¬≠cal¬≠ly mounts a local serv¬≠er to run the files.

For the WebGL com¬≠pi¬≠la¬≠tion to work it def¬≠i¬≠nite¬≠ly has to be mount¬≠ed on a serv¬≠er either local¬≠ly, which can be mount¬≠ed with appli¬≠ca¬≠tions like "Xampp", or it has to be mount¬≠ed on a web serv¬≠er, either from a third par¬≠ty, for exam¬≠ple on a page like "Itch.IO" or on your own web serv¬≠er. I leave you a link to Hostinger, the serv¬≠er with which I have been work¬≠ing for years, a qual¬≠i¬≠ty ser¬≠vice and with very good prices, in addi¬≠tion to the facil¬≠i¬≠ty to scale the host¬≠ing accord¬≠ing to the growth of your web.

To upload the build to your own serv­er you need to do it by FTP access, Hostinger has a built-in FTP access in the con­trol pan­el, although I find it more con­ve­nient to use the FileZil­la appli­ca­tion to con­nect to the server.

Once access is estab­lished, the process is no dif­fer­ent than copy­ing files into your own PC, you cre­ate the fold­er where you want to put your com­pi­la­tion, upload the files and then the path to run the WebGL com­pi­la­tion is the URL from the root to the "index.html" file, which by the way you can name it what­ev­er you want, for exam­ple "Play.html".

Let's look at the fol­low­ing exam­ple to under­stand the path as a URL with­in our server:

https://gamedevtraum.com/GDT-Prototypes/go-to-hell‚ÄĎ5/index.html

It is a WebGL com¬≠pi¬≠la¬≠tion made in Uni¬≠ty, if you click on the link you can try it. Ana¬≠lyz¬≠ing the URL we see that the root fold¬≠er is in GameDevTraum.com, from there when observ¬≠ing the URL we see that we get in a fold¬≠er called "GDT-Pro¬≠to¬≠types", inside that fold¬≠er we enter in anoth¬≠er fold¬≠er called: "go-to-hel¬≠l‚ÄĎ5", where final¬≠ly our file "index.html".

Anoth¬≠er alter¬≠na¬≠tive to know the URL of the file "index.html" is from the FTP access, we make right click on the file and prob¬≠a¬≠bly there is an option of "Copy URL", which in the case of FileZil¬≠la, does not give us the exact URL, but if most of it, to that we make the nec¬≠es¬≠sary mod¬≠i¬≠fi¬≠ca¬≠tions to give us the exact URL.

Unity WebGL does not finish loading in the browser

It has hap­pened to me that when try­ing to open a WebGL com­pi­la­tion, the brows­er nev­er fin­ish­es load­ing it, it freezes in the Uni­ty load­ing screen. I have solved this prob­lem by remov­ing the com­pres­sion in the WebGL compilation.

To do so, go to Edit > Project Set­tings and the win­dow shown in Fig­ure 8 should open.

unity webgl compression format, webgl application does not load in unity
Fig. 8: Dis­abling com­pres­sion in WebGL com­pi­la­tion in case the game nev­er fin­ish­es loading.

As we can see, in the left sec­tion we go to "Play­er" and then in the big win­dow on the right we go to the "Pub­lish­ing Set­tings" sec­tion, there we change the "Com­pres­sion For­mat" field to "Dis­abled" and we run the com­pi­la­tion again. This in my case has solved the prob­lem that a com­pi­la­tion of Uni­ty for browsers does not fin­ish loading.