Unity: Build and Deploy WebGL Game

Prerequisites

Part 1. Unity setup

  1. Press on the Editor version
  2. Press on the “Add platform” button
  3. Select WebGL Build Support and install it

Part 2. Deploying and custom templates

  • Build folder — which contains the game itself (js files)
  • TemplateData folder — which contains logos and style.css
  • index.html — the HTML page that will display the game
  1. As per this GitHub issue, in order to make the game size responsive we will add a few lines into Assets/WebGLTemplates/Better2020/TemplateData/style.css:
#unity-container {
width: 100%;
height: 100%;
display: flex; /* added */
justify-content: center; /* added */
align-items: center; /* added */
}
#unity-canvas {
width: 100%;
height: 100%;
max-width: 461px; /* added */
max-height: 738px; /* added */
}
if (/iPhone|iPad|iPod|Android/i.test(navigator.userAgent)) {
container.className="unity-mobile";
config.devicePixelRatio=Math.min(config.devicePixelRatio, 2); // added
}

Part 3. Bonus. Endless Wordle.

Afterwards

  • Datele — a spin-off where you are guessing a date instead of a word
  • Categorle — a variant where you are guessing a word 4–7 letters long in a given category

Support

--

--

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store