Creating a custom WebGL Template for Unity is not that hard. But because I had to make one recently, I thought that someone could get also get some help with it.
Web development is something completely different than building games in Unity. So why don’t we have something really simple to demonstrate how it should work?
Let’s get into this!
Prep work ?
To start working on our custom template, we need first to create some Unity project.
When Unity is opened, the next step will be to create the “WebGLTemplates” folder inside the “Assets” folder. Then, inside the newly created folder, we can create a folder for our new template!
Just like that!
Creating a template ?
The only thing we need to create a template is “index.html” and “thumbnail.png” files. But this doesn’t mean we can’t expand it with some additional elements, like a style or images.
I’m going to keep it simple, so I’m going to extend this page with additional styling in a separate file.
So let’s start with the page.
<!DOCTYPE html>
<html lang="en-us">
<head>
<meta charset="utf-8" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Custom template | %UNITY_WEB_NAME%</title>
<link rel="stylesheet" href="/Template/style.css" />
<script src="%UNITY_WEBGL_LOADER_URL%"></script>
<script>
// Unity Initialization
var unityInstance = UnityLoader.instantiate(
"unity-container",
"%UNITY_WEBGL_BUILD_URL%"
);
</script>
</head>
<body>
<!-- Unity WebGL will be here -->
<div id="unity-container" style="width: %UNITY_WIDTH%px; height: %UNITY_HEIGHT%px;"></div>
<h3>Example made by</h3>
<p><a href="https://patrykgalach.com">Patryk Galach - Dev Blog</a></p>
</body>
</html>
This is the minimal template for the WebGL build. We can see that Unity has some build-in tags for this file.
The minimal template hasn’t got any progress bar for loading.
We can change that by making our own template.
<!DOCTYPE html>
<html lang="en-us">
<head>
<meta charset="utf-8" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Custom template | %UNITY_WEB_NAME%</title>
<script src="%UNITY_WEBGL_LOADER_URL%"></script>
</head>
<body>
<h2>Custom Unity Template</h2>
<!-- More in a moment -->
<h3>Example made by</h3>
<p><a href="https://patrykgalach.com">Patryk Galach - Dev Blog</a></p>
</body>
</html>
Let’s start with the basics, which we can expand.
The first thing will be to build a container for the Unity and loading bar.
<!-- Unity Container -->
<div class="webgl-content">
<div class="centered" style="width: %UNITY_WIDTH%px; height: %UNITY_HEIGHT%px;">
<!-- Unity WebGL will be here -->
<div id="unity-container" style="width: %UNITY_WIDTH%px; height: %UNITY_HEIGHT%px;"></div>
<!-- This is a simple progress bar -->
<div id="loader" class="loader">
<div class="progressbar">
<div id="fill" class="fill" style="width: 0%;"></div>
</div>
</div>
</div>
</div>
The next step will be to add styling to our page. We can do that by using CSS.
body {
text-align: center;
}
.webgl-content {
position: relative;
}
.webgl-content * {
border: 0;
margin: 0;
padding: 0;
}
.centered {
position: relative;
left: 50%;
transform: translateX(-50%);
}
#unity-container {
margin-left: auto;
margin-right: auto;
z-index: -1;
}
.loader {
background-color: aliceblue;
}
.loader .progressbar {
background-color: steelblue;
border: 2px black solid;
border-radius: 10px;
position: absolute;
width: 50%;
height: 75px;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
}
.loader .fill {
background-color: skyblue;
border-radius: 10px;
height: 100%;
}
This will make our lives easier, especially with the progress bar.
The next thing on our todo list is a function for updating the page when Unity is loading.
<script>
// Custom progressbar function
function customProgress(unityInstance, progress) {
// Change fill of the progress bar
const fill = document.getElementById("fill");
fill.style.width = progress * 100 + "%";
// If loaded, remove loader
if (progress === 1) {
const loader = document.getElementById("loader");
loader.remove();
}
}
</script>
And the last thing is to initialize Unity with our progress function!
<script>
// Unity Initialization
var unityInstance = UnityLoader.instantiate(
"unity-container",
"%UNITY_WEBGL_BUILD_URL%",
{ onProgress: customProgress }
);
</script>
Result ?
With everything done, now it’s time to see our result!
Great! We did it! What do you think about making custom templates for WebGL builds? Let me know in the comment section below!
If you know someone that might need this, share it with him! I would really appreciate that! ?
To read more about Unity WebGL templates you can go to the documentation.
And if you are interested in getting emails when I release a new post, sign up for the newsletter!
The whole project is available at my public repository. ?
Hope to see you next time! ?
Thanks, clear and easy to follow. Minor comment – after creating the template you need to select it from edit/project settings/player/resolution and presentation.
Hi what do you mean when you say too add a index.html file like where do i make it and stuff
where do i add the html files and thumbnail.png
You should put them under Assets/WebGLTemplates/YourCustomTemplate/
Check my repository: https://bitbucket.org/gaello/unity-webgl-template/src/master/Assets/
i checkd the respiratory and i get the index but i dont get where to put thumbnail so i checked it and it showed under my template but index wasnt there so do i put both of them in the my template
You should put it in the folder with your custom template.
I am sorry to ask again but i dont get it , so i put both the thumnail and index file in my custom template file
hello what image do i put in the thumnail file
The thumbnail will be only displayed in the Unity Editor where you are selecting a template for the WebGL build.
so the thumbnail will be there so i dont have to do anything for the image ?
so the thumbnail will be there so i dont have to do anything for the image ?
You also need to set it unity to use the new template in the build settings