Here it is. My very simple WebAssembly game, written in c++ and built using Emscripten, hosted on itch.io
Nothing wild here, but I had a few stumbling blocks getting this to work. Things to note:
Assuming you already have your game compiling with Emscripten. Below I'll run through how to fix the issues I had, plus how to upload to itch.io and have your game page update automatically.
.htmlThe default .html generated by Emscripten is fine for development, but when uploading your game to itch it looks messy and broken.
Instead, replace it with this file by copying it adjacent to the generated .wasm and .js files before uploading to itch. This should fix most of the problems I encountered but I'll go over them below if you have your own .html file you want to use.
If using mine your build outputs must be named index.js and index.wasm. Either make sure yours are named the same or change the html. You can change the name of your built files with the -o flag in your Emscripten build script.
When I first uploaded my game to itch, it worked when you loaded the page, but if you clicked off of the game then tried to click back it wouldn't take focus again. That was fixed by adding
Module.canvas.onclick = function() {
Module.canvas.focus()
}
Another issue was the canvas would appear to wobble inside it's frame when you pressed the arrow keys. The fix was removing any margin and padding.
<style type="text/css">
* {
margin: 0;
padding: 0;
background-color: #222;
}
canvas {
margin: 0 auto;
display: block;
}
</style>
iframeIf you have every tried embedding a responsive YouTube video on a web page you may have already seen this trick.
.fluidiframe {
position: relative;
width: 100%;
height: 0;
padding-bottom: calc(var(--aspect-ratio, .5625) * 100%);
}
.fluidiframe iframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
Add that to your .css, then get the embed code from itch.io by going game page and clicking edit > distribute > embed.
Make a note of the width and height, then paste the embed code into your site wrapped in a div with the class fluidiframe like so. Setting the value of --aspect-ratio: to the width / height you noted down.
<div class="fluidiframe" style="--aspect-ratio: 620/800;">
<iframe frameborder="0" src="https://itch.io/embed-upload/2684406?color=414141" allowfullscreen="" width="800" height="620"><a href="https://thomas-hope.itch.io/platform-zero">Play Platform Zero on itch.io</a></iframe>
</div>
That's it. Whereas before your game would get clipped off if the browser window was too small, now it should resize along with the rest of your page!
Butler is a tool made by itch to upload your game directly from the command line. If you haven't installed it already the easiest way is to download the itch.io client, then search 'Butler' and install it. Once installed you may then need to and add it to your path.
Once you have Butler installed. Add any necessary lines to your build script to copy all the resources into a single folder, then point butler at the folder.
butler push path/to/built/folder user-name/game-name:html
If this is your first html build it won't automatically be recognized as playable in the browser. Go to your edit game page and tick the 'This file will be played in the browser' checkbox.
Once it's working, put your butler command in a script and now you don't have to navigate the itch webpage when you are trying to update your game jam entry at the last minute :)
Done! Your game should now be playable on your itch.io game page and you should have everything you need to embed it on your website.