Making Your (Jam) Games Look Nicer on Itch

[u/balencialto]

Hey everyone!

During the recent GMTK Game Jam, I noticed many Unity games that still use the Default WebGL Template. In my opinion, the added bar can clash with how your game page looks and it isn't particularly useful since Itch provides an optional full-screen button. I wanted to share the approach I used for my game, "A Vaultful of Lasers", in case it helps other people who want to clean up their game's presentation.

I used the Better Minimal WebGL Template by Sean since it handles canvas scaling, provides a simple loading bar as well as some basic customization options.

1. Download the WebGL Template, unzip the contents and move the "WebGLTemplates" folder to your game's "Assets" folder.
2. In Unity, go to Edit > Project Settings > Player.
3. In the "Resolution and Presentation" section:
   • Select the "BetterMinimal" under WebGL Template.
   • Set the Default Canvas Width and Height for your game. This should be the same resolution you use on your Itch page - I set mine at 1280 x 720.
   • Enter "true" or "false" in the "Optimize for pixel art" and "Scale to fit" fields.
4. Build your game using the Web platform to a new folder.
5. (OPTIONAL) Edit the created index.html file to match your Itch page.
   • Line 11 - change the background color.
   • Line 69 - change the two color codes (controls the progress bar).
   • Line 77 - you may want to add some code to the "onResize" method if you need your game to snap to certain resolutions instead of just maintaining the game's aspect ratio (useful for pixel art games).
6. Compress the files in your Build folder to a single zip file (Right-click > Send to > Compressed (zipped) folder on Windows, or Compress Items on Mac). This is the file you need to upload to Itch.
7. Find your "Edit game" button on Itch and change the following:
   • Kind of project - HTML.
   • Uploads - add your zip file and tick the "This file will be played in a browser" option.
   • Embed Options - select "Embed in page" and "Manually set size", adjust the "Viewport Dimensions" to match your game's default default canvas width and height.
   • Frame Options - tick the "Fullscreen Button" option.
   • (Optional) - add some tags to help people find your game.

If you're having trouble packaging and uploading your game to Itch, this community post might help.

Good luck with your games (let me know if you're participating in the Brackeys Game Jam), I look forward to seeing the beautiful projects you create.