Creating Custom WebGL Template for Unity

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!

Creating a folder for templates

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!

Our WebGL template in action!

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! πŸ€“

5 1 vote
Article Rating
Subscribe
Notify of
guest
1 Comment
Oldest
Newest Most Voted
Inline Feedbacks
View all comments
KarlManning
KarlManning
2 months ago

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.