Unity Web GL Website Embedding
Difficulty

Description

This tutorial will show you how to responsively embed your Unity Web GL build directly onto a web page, without using an <iframe>.

-Step 1-

Navigate to the folder of your game, find index.html and open it with a program like Notepad++ or Visual Studio.

I will be referring to this file as the "game index " So every time I mention it, remember that I'm talking about this one.

-Step 2-

Navigate to the index.html for the webpage you want your game to be displayed on, and open it.

I will be referring to this file as "game index"

If you use wordpress or other similar website builders, you will need to download this with an FTP client. The file you need will be under the public_html folder, and should in the same directory as your page name. Example, my page is www.LittleRainGames.www/downloads/games/bound, so I look in the folder public_html/downloads/games/bound.

-Step 3-

In the game index locate the <head> and </head>.

Highlight from the first <link> to the last </script> and press Crtl+C to copy it.

We do not need any of the meta or the title. But if you do want to copy that, only copy the meta with the http-equiv, its mostly likely the page we will be pasting to will have the rest.

-Step 4-

Now go to the page index, and locate the <head> and </head>.

-Step 5a-

This time we will paste the code that we copied right before the </head>, so it is inside the <head> </head>. It should look like this.

-Step 5b-

If you use wordpress or other similar builders, you may be able to add code to the head without actually editing the index.html.

I use bootstrap studio, which is similar and more simple than Adobe Dream Weaver, instead of doing step 5a I will do step 5b, try to look for something similar to this, or try googling "Adding HTML code to head (Platform you use)".

Now every time I build my project this code will always be within the head and I will not have to edit it every time I build the project. If you use Bootstrap Studio make sure you add the code to page you want it on only, and not the global head, meaning for every page. You do this by right clicking the page, and hitting properties.

-Step 6-

Within the code we pasted, you will see a bunch of href and src snippets. If you are doing Step 5b, you may want to do this before you paste it.

In the top half of the image you will see I posted direct links to each file. But this isn't always neccesary. As you can see before it was simply "TemplateData/favicon.ico" and ect..

If your Games Files are a child of the page we don't need to include the full URL. As I said before my page link is www.LittleRainGames.www/downloads/games/bound

The files for my game are one folder down in www.LittleRainGames.www/downloads/games/bound/webGL, in that folder is the game index, the Build Folder and the TemplateData folder.

So since it is a child all I need to do is add "webGL/" right before each URL. You can see the changes I've made in green.

-Step 7-

Now in the game index we want to copy everything thats within the <body> and the </body>, it should look like this.

-Step 8a- (HTML)

If you want to use CSS , which I recommned, then go to step 9b. It will make things much easier the next time you want to embed another Web GL game, as well as its responsiveness being much much better.

If you are using wordpress, or something similar, which I will now refer to it as "a website builder", create a custom HTML block and paste that code.

If you made the website from scratch, I'm sure you know what divs. rows and columns are. You can go ahead and post the code where you want it.

If you test the website now, you will notice our game window overlaps things and is not centered, so we need to add a few things..

The first addition we will make is create a new <div> before the code, with a closing </div> at the end.

In the <div> we added, before the > add style="height:(50 pixels more then your game container); width:100%; margin:auto;" That is with the " ". We make it 50 pixels bigger then the gameContainer because we need room for the Fullscreen button.

The width :100%; will make sure that its always the same size as the container its in. Don't worry it won't stretch your window.

The margin:auto; will make sure its centered in its container.

Now we want to remove the style's in the next 3 div's, and add in our code which is highlighted in green.

-Step 8b1- (HTML and CSS)

Go back to your games folder, this time diving into the "TemplateData" folder.

-Step 8b2-

In there you will see the file style.css , open it.  If you don't want to do the next couple steps you can download this file instead. Link is at the top of the tutorial, there is also a link to the Github page which has that file along with all the rest.

Now that you opened the file it should look like this.

-Step 8b3-

We are going to remove the whole line that is highlighted in red.

-Step 8b4-

On the first line we will change the "margin:0; " to "margin:auto;" Hit save and we are done.

-Step 8b5-

Now with your favourite coding program, we want to create a css file, you can name it anything you want, I'm going to name it "unity_webgl.css."

Now we need to add everything in this.

The base class, sorry I don't know HTML CSS terminology, is u-webgl, if you looked at step 8a you will notice that we added style's directly to the HTML. Instead we will be calling these. Every time we call "u-webgl" it will apply the styles within them. It will only apply the style's in .u-webgl.c if both u-webgl and c are called.

You will probably notice the @media... which is a media query. It will only apply these styles if the screen size is within those parameters. This is how to change things for mobile and desktop.

Since WebGL doesn't work on mobile we will set the visibilty to hidden when the screensize is small. 576px seems small even for a phone, don't ask me why but it does not correlate with the actual resolution.

-Step 8b6-

Now that we have the CSS file created, we will go back to the page index .

This is what your code should look like right now.

The first addition we will make is create a new <div> before the code, with a closing </div> at the end.

In the div we created, we will add class="u-webgl c" which is our container class, which is where the c comes from.

On the next line down, I made an error for the picture, we want to change the style="margin:auto;" to class="u-webgl " notice there is no c this time. Remeber to remove the other styles that was there from when you built your game.

The last thing we want to do is add class="u-webgl " to the <div class"footer">.

Optional :: We can also remove the lines <div class="webgl-logo"></div> and the <div class="title"> Game Name</div> if you don't want the Unity Logo as well as your games name in text. Just don't remove the fullscreen function, unless you don't want to be able to go fullscreen.

This is what your code should look like with the changes made, including the optional ones.

-Step 8b7-

Now we need to go back to the page index , I would have mentioned this earlier but you may not have went this route.

In the <head> </head> again, right above where we posted the code in Step 5a we need to add the line <link rel="stylesheet" href=" (Link to our unity_webgl.css that we created)"anywhere in the heads, I chose to paste it above where we pasted before. Make sure that you post the URL to the style sheet we created a couple steps ago. You may want to upload it to your website first.

And again, a website builder may have a spot to add this in without having to edit the html file.

-Step 9-

If you created a custom website, I found it to need the code to be within a <div class="row"> <div class="column"> </div> </div> or it may overlap other features.

This is what my final code turned out like. Sorry its a little messy, bootstrap studio exported it like this.

When you finish, if you have any problems with overlapping come back to Step 9.

Sorry this kind of got squeezed in at the end.

Right before our code that we finished in step 8a or Step 8b5. We want to add the code highlighted in green. This just adds a little message on mobile phones when the game visibility gets set to hidden. It itself will be hidden while the game is visible.

-Step 10-

Navigate back to your games folder, and then open the build folder.

Make a backup of UnityLoader.js .

-Step 11-

Open UnityLoader.js and you will see its an absolute mess. The whole things is only 4 lines of code.

Click somewhere in the text and press CRTL+A to select everything.

You can skip step the next few steps if you want.

-Step 12-

Open jsbeautifier.org in your browser.

Under the button that says Beautify JavaScript or HTML you want to paste the code in the text area and press the button.

-Step 13-

Now all the code is nice and easy to read, click in the text area and press CRTL+A to select everything.

-Step 15-

Press CRTL+F to search for the word margin. Luckily the first one it finds is the right one.

-Step 17-

Now we will paste it after the e.style.padding = 0, .and we will add "auto", after the text we pasted.

Save the file and move on to the next step.

-Step 18-

You will only need to do this part if you weren't able to add the code to the <head> </head> in Step 8 and 9, or if you create your pages on your desktop and upload to the server.

Now the only thing left to do is upload your files.

Upload the site index to the correct folder and overwrite.

-Step 19-

Upload the style.css to TemplateData folder and overwrite.

-Step 20-

Upload the UnityLoader.js to Build folder and overwrite.

-Step 21-

Don't forget to Upload the unity_webgl.css to a folder of your choice. And make sure you reference it in Step 8b6.