Log In  



Hi all,

I've been looking at Pico-8 games on itch.io, and there seems to be a variety of different ways to post our games there.

For example here, it's nice and clean, no borders:

https://bluesweatshirt.itch.io/inward-expansion

Here there's a visible border around the Pico-8 cartridge:

https://bluesweatshirt.itch.io/man-helsing

And here it's tight, but there are the controls on the bottom:

https://bluecandlegames.itch.io/eyeboss

Is there anyone with experience on itch.io who'd be willing to share some tips for posting Pico-8 cartridges there?

9

+1 bump. Would love to know how to remove the grey border, especially if the controls could be kept
5

All these examples can be achieved be modifying a pico8-exported html file slightly. If you know a little about html and css, I suggest you try and play with an exported html file (in pico-8, "export [file].html") and figure out what you can change by yourself.

Now, here are some useful information if you're lazy:

  • at line 45 you should have the line "<body bgcolor=#303030>". bgcolor is the background color. You can change the value using online palettes for exemple or you can replace the line with "<body>" which, when uploaded to itch.io, will keep your itch page's background color (so no border).

  • the line after that is three <br> which is a line break. These are before the game frame and I recommend you delete them if you're uploading that file to itch as itch already has its own spacing.

  • from line 98 ("<div class=pico_el...") to line 120 ("Carts</a></div>") are the buttons. You can change the text, make some disappear or remove them all.

And something else, when uploading to itch.io, rename your html file as "index.html" put it in a zip file with the pico8-generated javascript file. Then upload that zip file. Then, under "Embed options", as viewport dimensions, I suggest 600x600, it's what I use for my games.

I hope you found what you wanted :)

Trasevol_Dog, thank you!

It was the <br> gap that was confounding me. I couldn't get it to fit in the window properly until I got rid of them, and I didn't know if other people had figured out a more clever way to upload.

Thanks again.

Cool, thanks TRASEVOL_DOG :)

@TRASEVOL_DOG Thank you for the tips, I followed all of them and here is the result ;) https://maximilian.itch.io/zombyard

https://bluesweatshirt.itch.io/inward-expansion is using https://pico8.herokuapp.com/ which seems to load any cartridge online by ID; but it seems to be using PICO-8 0.1.1 only.

There are other examples like https://jusiv.itch.io/fuz with those nice SVG buttons on the side. I could not find a template like that on GitHub, so I don't know if it's custom or a third-party template.

You can find a few other templates on the net, like https://github.com/headjump/pico8_html_template to add buttons for touch screens... But for cleaning up, TRASEVOL_DOG instructions should be fine.

See this thread for a full guide: https://www.lexaloffle.com/bbs/?tid=40036



[Please log in to post a comment]