EXPORT_ITCH

It is now easier to export your game specifically to upload to websites like itch.io but you still need to follow some steps after exporting. These steps will allow you to export and upload so that your game can be downloaded or played directly in a web browser (a common requirement for game jams).

Step 1 - Set Game Label

Before exporting your game make sure you save a label, and it's recommended to add your title and name to the first two lines of your cart as comments. 

You may also want to prepare screenshots and gifs of your gameplay to be displayed on the itch.io page now. Save these in a separate folder for later (Step 5).

Step 2 - Export as HTML Folder

Export your game as html but with the special command to save the .html and .js files in a folder.

Use the command export -f gamename.html (change "gamename" to the name of your game; this will become the folder name as well) then press enter.

The -f command will name the files specifically and place them in a folder. Do not rename the files within the folder; itch.io requires that the main file is named index.html and that file looks for the .js file with the default name, so don't change either. 

Step 3 - Zip Game Folder

Navigate to your exported game folder. You can do this easily with the Folder Command in PICO-8. The exported folder should be named: "gamename_html" (gamename replaced with what you titled your game in the export command in Step 2). If you do not see this folder, then you probably forgot to use the -fcommand after export in Step 2. 

Next, zip the folder. You may rename this zipped folder.

How to zip a folder: Windows / MacOS / Linux

Step 4 - Create New Itch.io Project

Open itch.io in your browser, login or signup, and navigate to Upload New Project page.

Step 5 - Fill in Upload Form

Begin to fill in the uploading form with your game's information: Title, Description, and Classification. You may also upload your screenshots, video, and cover art for your game page in the upper part of this form as well.

Kind of Project

When you get to the section "Kind of Project" in the form, open the dropdown menu and select: "HTML — You have a ZIP or HTML file that will be played in the browser". You can include downloadable files as well later.

Continue filling the form as you wish: Release Status and Pricing.

Uploads

When you get to the section "Uploads" click the red "Upload Files" button and navigate to your zipped game folder from Step 3. Select only that zipped folder to upload here.

Check the box, "This file will be played in the browser." 

If you want to include the cartridge image or the standalone game as downloadable files, you can export those from PICO-8 and upload them as well here. Upload each file individually.

Embed Options

Under "Embed Options" section, leave the dropdown on "Embed in Page" and "Manually Set Size". ".leave the dropdown on "Embed in Page" and "Manually Set Size".

Under "Viewport dimensions" the suggested setting for the PICO-8 player is: Width: 750px × Height 680px

Frame Options

Under "Frame Options" section, click the checkboxes for "Mobile Friendly" and "Automatically start on page load." Leave the rest unchecked.

Finish the Form

Complete the rest of the form as you wish, entering the page content under "Details", the genre of your game, tags for searching for your game (make sure you include "pico-8" as a tag)

It is recommended to write a detailed How To Play description in the Details section to teach players how to control and win in your game. You can also use screenshots and images in this section to create a legend of the characters and symbols they should understand while playing. (You can always edit and add to this later)

When everything is ready, click the red "Save and view page" button at the bottom to begin uploading and creating the page.

Step 6 - Customize your Page

When you are viewing your game's page, you should see an Edit Theme button at the top. Click this to customize the page colors, banner, background and page borders.

To best match the embedded PICO-8 player, it is suggested to set the background (BG2) to a dark color such as #232323 and the text to a light color such as #cccccc. But you are free to get creative and match your game's color style however you'd like.

If you would like to further customize the embedded PICO-8 web player with custom buttons and styles, see Export As Webpage for details.