EXPORT_HTML


export gamename.html
Note: Unlike other file saving options, this only works with the export command. As such, it is not available in the Education Edition.

This will create two files (gamename.html and gamename.js) in your currently opened folder. Use the Folder Command to open and view these files. 


The HTML file is available under a CC0 license, and does not contain any of your game data. It contains the basic webpage code as well as the JavaScript that handles the web-player-specific interactions such as the button inputs (mouse & keyboard, touchscreen, gamepad support), dynamic screen sizing, side menu buttons, and detecting and interacting with the type of device, to name a few. It also contains the style of the web player and buttons, without an external CSS file.

The JavaScript file contains the PICO-8 web player and your game data, encoded as "var _cartdat" along with many functions to read the cart data, run the game, detect in-game keypresses and joystick/touchscreen motions, and audio handling, to name a few. It is not recommended to try to edit this file.

Export Options

export gamename.js

Use this command to export only the javascript file.


export -f gamename.html

Use this command to export the two files into a folder also named [gamename]. The .html file will also be named index.html instead of [gamename].html. This is handy if you are preparing to upload your game to a website such as itch.io which needs these changes.


export gamename.html -p filename

Use this command to export the game using a custom html template file. The file [filename] must be html and located in {application data}/pico-8/plates/filename.html to be used as the template. Use the special string ##js_file## to be automatically replaced by the .js filename, and the string ##label_file## for the cart's label image. 


export -w gamename.html

Use this command to export the web version of your game with an additional .wasm ( Web Assembly ) file format. It may help to make your game smaller and faster.

Web Player Customization

The .html file contains some options you can change:


p8_allow_mobile_menu (default true) toggles mobile device display
p8_autoplay (default false) if false: display blurred cart label and play button;  if true: boots game cartridge automatically after page loads.

You can find the style code for customizing the game page at the section <STYLE TYPE="text/css"> where you can customize the options for:

.p8_menu_button The buttons on the lower right of the web player; opacity, positioning, color, and size.
canvas The image-rendering style, border (defualt 0), and cursor display (default none).
.p8_start_button The base64 image to display if the player is not set to auto-play (default as cart label), and the cursor display (default pointer).
.button_gfx
.button_gfx_icon		 The stroke and fill opacity and color settings.

Just below that is the <body> opening tag with default styles. You can change the background-color and text colorof the page here.

Changing the background-color to match your webpage background will help to blend in your embedded game on the itch.io page for example so that the margins around the player don't appear black but still show the p8_menu_buttons. If your p8_menu_buttons disappear because of the background color change, be sure to simply add a background-color to the .p8_menu_button class in the <STYLE...> section above.


Default Menu Buttons

You can customize these Menu Buttons which are each a base64 image string by default. Search the .html file for p8_gfx_dat and change the "data:image..." strings to the image sources of your choice. Do not change the names of each button, such as "p8b_pause1", because they reference the button id in the .js file.


Default Mobile Buttons

You can customize the Mobile Buttons which are base64 image strings by default. Within the same p8_gfx_dat as the menu buttons, you will see the final two images are named "controls_left_panel" for the directional pad and "controls_right_panel" for the O, X, and menu buttons. You can change the image sources of these but do not change the name.


Default Play Button

You can customize this Play Button which is a base64 image string by default. Search the .html file for div id="p8_start_button" and change the image source.


Official Manual - EXPORT HTML
Official Manual - HTML GPIO

462

15 Aug 2023

Font