Releasing your game on itch.io - Play in browser template

Hi,

I noticed some people also release their games on itch.io since, i also own an account on itch.io i released my own game there as well to be playable in the browser thanks to the html5 projectabe emulator.

It’s really easy to make it work with that feature of itch.io here is my index.html template i used to make it work:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <title>Waternet Arduboy</title>
    <meta name="author" content="Willems Davy" />
  </head>
  <body>
    <iframe style="position: absolute; top: 0; left: 0; width: 100%; height: 100%; border: 0;" src="https://felipemanga.github.io/ProjectABE/?url=https://github.com/joyrider3774/waternet_arduboy/raw/main/distribution/waternet.hex&skin=BareFit&Color=FFFFFF" />
  </body>
</html>

The iframe linking to the emulator will take up all of the parent containers space and you can just edit the url, title and author, save as index.html, zip it up and upload that file and enable the checkbox for “playable in browser”. You can also enable the option to show the iframe fullscreen it will work without problems on itch.io i tested it. The only downside of using the BareFit skin is that i don’t know if it’s playable from on a phone like this. But you can also add the hex files as a downloadable file.

To give you an idea how it looks here is my waternet game’s page on itch.io

5 Likes

Is there anything ProjectABE cannot do?

I think it might be possible to fully include projectabe in the zip file as well instead of linking to the github version but i doubt the github will ever go down as a lot of sites rely on it so should be safe to just link to it i guess.

I tested on my phone and with the bareskin you can not control the emulator on a phone. I wonder if it’s possible to display a different iframe on a phone (using another skin that shows the buttons) or to use a different src tag

Last I checked, it can’t run the fmulsu instruction. :P

Oh nice. I was going to post something similar but I’m using a zip file containing the game hex and a lightweight version of @FManga’s project abe gh-pages version.

I’ll post it here anyway as alternative solution to yours.

Download, unzip, replace game.hex with your Arduboy game, rezip and upload to itchio.
arduboy-classic-game.zip (227.2 KB)

1 Like

cool i knew this would also have been possible, but i went the lazzy route :slight_smile: this option might be safer in case the github page ever goes down it will remain working then on itch while with links it won’t.

here is an alternative template. It will load a different url (skin) based on a check to see if the device is a touchscreen device or not a touchscreen device. With no touchscreen devices (like desktops) it will load barefit so you don’t see any clickable controls or device layout on devices with touch screen it will load the arduboy skin so people of phones and tables can click the controls onsreen.

i tested it with my desktop and android phone and it works. It’s also best to set default orientation on itch to portrait.

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <title>Waternet Arduboy</title>
    <meta name="author" content="Willems Davy" />
		<script>
			function setIframeSrc()
			{
				const iframe = document.querySelector('#iframe');
				urlnotouch = "https://felipemanga.github.io/ProjectABE/?url=https://github.com/joyrider3774/waternet_arduboy/raw/main/distribution/waternet.hex&skin=BareFit&Color=FFFFFF";
				urltouch = "https://felipemanga.github.io/ProjectABE/?url=https://github.com/joyrider3774/waternet_arduboy/raw/main/distribution/waternet.hex&skin=Arduboy&Color=FFFFFF";
				if (window.matchMedia("(any-pointer:coarse)").matches)
					iframe.setAttribute('src', urltouch);
				else
					iframe.setAttribute('src', urlnotouch);
			}
	  </script>
	</head>
  <body onload="setIframeSrc();">
    <iframe id="iframe" style="position: absolute; top: 0; left: 0; width: 100%; height: 100%; border: 0;" src="" />
  </body>
</html>

I foresee this being helpful in the future! Looking at starting an FX game jam soon that will also be running on itch!

For those who want to upload an FX game to itchi.io it’s quite easy too:

  • download and extract this zip file:
    arduboy-fx-game.zip (230.1 KB)
  • replace game.hex and fxdata.bin with your game hex file and fx data file
  • rezip the files
  • upload to itchi.io
3 Likes