Jekyll + WebGL Unity games

Help
1

Hello all. I am trying to host a Unity game (using WebGL) on the GitHub Pages site that I have made with Jekyll. I know how to have the WebGL game open immediately with the site link, but I would like to have the game open when the user clicks a post or a page instead. This is the only relevant link I can find (Serving Unity WebGL Builds from Github Pages - eric.log). It did not work for various reasons, and I’m wondering if there is an alternative method. Does anyone have experience integrating Unity WebGL games through Jekyll? Thanks!

2

Hi.

I see the article recommends a layout where you load assets and run JS.

I have some recommendations.

Use layouts

Firstly you might want to only load the assets and start and game on page load if a game is configured for a page.

You could do this by using a plain page.html layout for about.md and index.md and game.html layout that loads runs the game setup part on the game pages.

Use conditional check

I’m guessing you have a different game for each page. Which means you have another another approach where you only run the generic and game-specific code if a certain field is set.

e.g. in page.html or default.html

{% if page.game_name %}
<script>...
<script>...

<script>
  const gameName = '{{ page.game_name }}'
  start(gameName)
</script>
{% endif %}

Start game on user action

The two suggestions above will still start the game on page load. But they make sure you only start a game on a page that has a game to start. Which means non-game pages like homepage could list some games that you click to.

Now, how to wait for user to click start instead of loading the game immediately…

This bit in the tutorial will run on page load.

<script>
  var gameInstance = UnityLoader.instantiate("gameContainer", "{{ site.baseurl}}/assets/unity/{{page.unity_dir}}/Build/builds.json",{onProgress: UnityProgress});  
</script>

So what I think is that you must put that inside a function and then only fire it when the user chooses to.

So let’s put as HTML button the page with a trigger.

<script>
  const GAME_PATH = "{{ site.baseurl }}/assets/unity/{{ page.unity_dir }}/Build/builds.json"

  function start(gamePath) {
    console.log('Starting game')
      
    UnityLoader.instantiate(
      "gameContainer", 
       gamePath, 
       {onProgress: UnityProgress}
    );  

    console.log('Done')
  }
</script>

<button id="start-button" onClick="start(GAME_PATH)">
 Start playing 
</button>

<div id="gameContainer"
</div>

Maybe builds.json is a value that comes from {{ page.game_file }}

I’ve done some refactoring to make the JS cleaner.

Note use of the onClick trigger on the HTML that sets up a JS event.

Alternatively, for the same result. It is a messier though because you have to wait for button to exist before you add a trigger to it.

<script>
  const GAME_PATH = '...'

  function start(gamePath) {
    // ...
  }

  window.onload = function () {
    const startButton = document.getElementById('start-button')
    startButton.onClick = function () {
      start(GAME_PATH)
    }
  }
</script>

<button id="start-button">
 Start playing 
</button>

<div id="gameContainer"
</div>