INTRO
After a post where I was asking this same question, and thanks to the comments I've received, I've decided to create a guide on how to upload a game on itch.io in a nice way.
By default, if you upload a game on itch.io you obtain something like this: FartJumper (itch.io)
(not a game of mine, I use this just to show the difference, if it is a problem I'll remove the link)
As you can see there are a lot of borders and I personally don't like them.
I made it so that the game run like this: Not Enough (itch.io)
(this is one of my game)
In my game I also enabled the autoplay and made some adjustment to it to make it even better, but I will explain that later on.
GUIDE
TL;DR
You can download this index.html and use it mostly as it is: index.html
All the things I've changed are flagged by a comment ELIA CHANGE.
After downloading the index.html, you have to follow this 3 steps:
- do points number #1 and #2 of this guide, they are itch.io side so are easy to do
- change the name of the .js into the index.html (point #8 of this guide)
- change the url of the background into the index.html (point #9 of this guide)
You can easily find those lines in the html by searching in the index file the words YOU CHANGE, I added a comment with this tag to help.
The url background must be taken from the index.html file exported by your game, the name of the .js must match the .js file of your game.
If you need help in exporting and uploading the game on itch.io, because you don't know how to export the game, how to upload the html/js files, or it gives you an error, I've added a little section called "Export and upload the game on itch.io" at the end of this post!
EXTRA
As an extra, I add a special index file if you want the autoplay to run on itch in a smoothly way (like my game): index.html
I say this because if you just flag autoplay to true, you will see some frames when the page is loaded where the splash image is displayed, and I don't like that, so I added some code to prevent it, but it could be "experimental".
In this special version I also removed the background splash image, but if you want it you can add it back.
All this special changes are tagged as ELIA CHANGE AUTOPLAY.
If you want to use this you still have to follow the previous points, there is nothing more to do.
DETAILS
If you know more or think I'm doing some mistakes please tell me that in the comments specifying the points you are talking about.
ITCH.IO SIDE
These are changes you can make directly on itch.io
1.
The embed options should be set as follows to obtain the bigger size with small border:
This is because the game is made to run at max 512 pixels, that makes it possible to be pixel-perfect. If you put less than 512 in height, the game scales down, but if you put more than 512, the game will not become bigger.
In the index.html you could maybe change this, but I didn't need it since I liked the 512 frames and it is the same size you have on PICO-8 page.
I don't know though how to do that, it seems maybe a bit more complex than just changing the 512 limit, especially since the html is already made to become bigger than 512 pixels, so I don't know if it is something more entangled with itch.io.
If you discover a way to do that feel free to comment on this post your guide!
2.
When you upload the game with the index.html above, you will still have some borders almost the same color as the background.
This is an itch.io thing probably to make the game stand out or something, but if you don't like that, there is a trick to remove them.
You have to create an empty image (transparent), I think even a 1 pixel x 1 pixel could work, and upload it as the embed BG.
You need this to make the options for the embed BG to pop up (lol), then you can set the alpha dot to max and the difference in color will disappear.
That's it regarding itch.io side.
INDEX.HTML SIDE
These changes are made into the index.html file.
3.
You must remove the background color keyword.
This let you remove the background color of the game borders, it's used so that you can change it directly from itch.io as in point #2.
4.
If you don't change this value from 95 to 100 you will have a bigger border in the bottom. It's not a big issue if you make the game border as the page background, since you will not see those borders, but if you put it to 100 you will have equal borders top and bottom.
I also changed the max-width to 100vw, this does not really change anything, but I do that nonetheless because it seems meaningless to me at 95.
5.
These two are more a preference of mine.
-
Basically the buttons on the right are more spaced from the game view than between themselves (left margin is bigger than bottom margin), so I removed the additional left margin and decreased the left margin of every button. You can leave it as it is if you like the way it is now.
To be honest, with these changes the buttons are positioned more like the way they are on a pico-8 page.
6.
This is something weird. On PICO-8 you have this flag enabled by default, but in an exported html it's not.
I think this flag must be set to true so that you can put the game in fullscreen while on mobile, especially on a tablet, otherwise the game will just stay on the little window you've created on itch.io and will not be nice to play.
As a side not, on a smartphone you will have a different view of your itch.io page, I don't know why to be honest but I think is somehow enforced by the small screen size.
Specifically, you will have to press a "run game" button that I guess it's added but itch.io since it's the same as other non pico8 game.
That said, on a smartphone (not a tablet, or an iPad at least) the pico8 games on itch.io are a bit buggy, meaning that you can't close them but are forced to go back as a web page.
I will probably do a separate post as a bug report for this.
7.
When you upload the game on itch.io, you will have the splash screen blurred behind the start icon. This happens on PICO-8 too.
The splash screen is the one before you start the game.
I personally don't like that effect, if you prefer your splash image to be rendered "pixel perfect", you just add those 3 lines:
This way the splash image will be pixel perfect:
8.
Here you must put the name of your .js file, generated by your game.
9.
Here you must change this url with the one in your .js file.
That's all folks!
Extra
Special Autoplay
This is an additional thing you can do if you want your game to run smoothly with the autoplay flag set to true.
If you just set the autoplay flag to true, you will have the autoplay, but on a pc there will be some frames while loading where you can see the splash screen, and it seems a bit laggy, not polished.
These are the step I implemented to remove that.
10.
Obviously set the flag to true
11.
Make the splash screen not appear by default.
It seems done, but here we have our biggest issue: on a mobile device (and maybe somewhere else too) the game can't start in autoplay, sadly.
This means that we need a way to make the splash screen appear nonetheless on a mobile device.
12.
My best solution was just to delay the appearing of the splash screen, so that on a pc it will just not appear in time, since the game insta load, while on a mobile it will.
-
You can change the time from 1000 milliseconds (line 459) to how much you want, but I think 1 seconds it's enough to make it not pop on a pc, but not too much that it pops too late on a mobile device. 500 milliseconds is also ok, I used 1000 just to be a bit more sure.
To go a bit more into details, this code just specify to enable the splash screen after 1000 milliseconds have elapsed, but only if the game is not already running!
I think this code should be 99,99% safe, since at worst (likely never) the splash screen could appear for 1 frame when loading, but I'm not that much into javascript.
If you know something more about this let me know!
Export and upload the game on itch.io
If you have troubles regarding uploading the game on itch.io, that is you can't make the game run on the page, this little guide could help you.
13.
First you have to export the game as html, to do that you press escape in PICO-8 to go to the command line and you type "export <name>.html".
This will generate a <name>.html file and a <name>.js file.
14.
Rename the <name>.html file into index.html. This is needed by itch.io to know which is the html file to use as an entry point for your game. The .js file name should not be changed, otherwise you would have to change the reference in the html file too (see point number #8).
15.
Compress both the .html file and the .js file into a single .zip file. You can name it whatever you want.
16.
On itch.io, select HTML as the kind of the project.
17.
Upload the .zip file you created and select it as playable from the browser.
18.
Set the embed options to specify how the game will be presented on the page.
Here it's not important which number you are putting in the box, the only important thing is that the game will run. If you want you can change them later, or follow the guide to make your game look cool, after you know it work at least!
And that's it, if you save the page, it should load your game and it will be playable from the browser.
If you still have problems, I advise you to follow these steps without following the previous guide, that is upload the game as it is exported by PICO-8 (changing the .html name to index as in #14).
This is to be sure that the problem does not came from some changes made to make it look better but with something related to itch.io or PICO-8 export.
Feel free to leave a comment if it still does not work for you!
That said...
YOU MADE IT!
Thank you for reading my guide and I hope it was helpful and helped you create a prettier itch.io page.
If you have any doubts, suggestions, improvements, please leave a comment, I would really appreciate it!
17 comments
I'm trying to create a page for my game on itch.io using the html version.
I've managed to get the game running, my issue is with the canvas size.
Take this game as example (not mine): https://stevepopo.itch.io/fartjumper
You can see the huge border around the player.
No matter the canvas size I choose, the game just not fit that well.
I would like to obtain something more like this at least:
Do you have a solution for this?
Some special canvas size I've not tried yet, or something to change in the html file?
The fastest thing to me seems to just pick the color for the page and change in the html file the background color to fit it.
It's a bit of a shame to have the page "ruined" by those huge borders!
A short game about being not enough.
Warning:
includes flashing lights and screen shaking
TL;DR:
PICO-8 is amazing!
-
What a rush! I needed all those 72 hours to complete this. At about 40 minutes from the end, I had the game completed and for god’s sake, it worked and was ready.
It has been a lot since my last solo Ludum Dare (like 4 years probably) but I'm so happy that this is the game for my comeback. This time the theme was "Stuck in a loop", and the Ludum Dare 47 started a bit earlier, at midnight for me. I thought about this concept just a few hours after I went to bed, and I've fallen in love with it. I believe this truly resonates with how I feel and have felt and this is why I think I've managed to make it conveys those feelings to the player.
-
I decided one month ago that I would have used PICO-8 for this jam, and I'm glad that I've chosen it because I had so much fun with it! The editor is so lovely and very well packed.
I did all my work with it (except using notepad to reorder PICO-8 code tab) and I think that it helped to keep me focused, not having to switch to different programs and stuff.
-
PICO-8 also has a few limits to make the game feel like a true retro one, like palette color, sprite sheet, sound, and most of all (for me at least) code.
The last day, at about 12 hours from the end and the game ALMOST completed, I reached PICO-8 tokens limit (a token is more or less a code word), so I couldn't write any more code! I totally panicked and had to refactor all my beloved copy-paste code.
Three hours later, I had the same game but with more or less another 1000 free tokens, the rest of the day was pure anxiety since I had to be sure I didn't reach the limit again, which I reached a few times nonetheless, needing to strip away debug code and some other refactor.
That said, PICO-8 limits are what makes it so satisfying and charming. They helped me focus on the important things and without them I wouldn't have made this game as it is.
-
This time, thank again to PICO-8, I managed to do all by myself: code, art, sfx, music, levels and stuff (ok PICO-8 Celeste I’ve copied your shake camera code but never mind).
I am very proud of this but, most of all, this helped me to create the vision I had in mind in the best way I could within the 72 hours.
-
This Ludum Dare has been an incredible and important experience to myself, one that I hope will help me going on towards my path.
If you managed to read this far, I hope you will also manage to play my game and also leave some feedback!
I'll love to hear what you think about it <3
-
Thank you for your time...but
NOT ENOUGH
Hi all!
I'm Elia and this is my first post here.
I'm enjoying a lot PICO-8 but I've stumbled across a mystery.
To get to the point, I was reading the pico8zine#2 as a tutorial, and the first chapter makes u do a game of life program.
The example was not using the _update and _draw function, so I changed a bit my code to use it, and at first I thought something wasn't working with the code, and later discovered I was running at 15fps!
It was a bit weird since I was basically doing just the things the tutorial said, I then tried to switch to not using _draw but drawing with flip and a while(true) as the tutorial, and now all works fine!
I don't know if this is intended, but I used stat(1) to look at the cpu usage, and I had more than 17 with the tutorial version, when I though more than 1 lead you to 15 fps.
This is my version with the _draw and _update functions:
Here instead I use a while(true) loop with a call to flip():
Is it normal? And if it is, isn't it like the "fantasy" limit on the cpu can be overcome this way?
I've looked a bit to know if there was something related to this but couldn't find an answer and now I'm a bit curious =)
As a side note, the thing that makes that game run so slow is the 128x128 table that leads to huge loops and a lot of read/write to it.
At the end, it was useful to discover all of this cause now I'm a bit more skilled on PICO-8 limitation!
Edit:
The numbers on the games are the cpu usage and the current fps!
