pico8 responsive webplayer transform

See it live here.

Download the latest release here.

This is a python script you can run on an HTML file exported from the PICO-8 Fantasy Console. It will create a new HTML file that is better suited for viewing at various window sizes, by subtly restructuring the page and including new CSS styles. Because it only changes what it needs to, you can run it on an existing page that you've already re-styled.

Usage:

python transform.py [--lazy] <filename.html>

e.g.

python tramsform.py jelpi.html

The command above will output a new file called jelpi-responsive.html. Use it with the same cartridge.js file generated by PICO-8.

dependencies

• Python 2.7+ (if you're on OSX or Linux, you likely already have Python installed.)

It's also recommended (but not required) that you have the beautifulsoup4, lxml, and cssutils Python packages.

With pip (Python's package installer):

pip install beautifulsoup4 lxml cssutils

Or via the Ubuntu repositories, if that's what you're running:

apt-get install python-bs4 python-lxml python-cssutils

If any of these is missing, the script will fall back to a JavaScript method for restructuring the page's HTML elements (which won't run until after the page's content has loaded in the browser). This works fine, but the visible delay before layout is re-shuffled might be undesirable.

command arguments

• <filename.html> (required) - the name of the PICO-8 web player HTML page to transform
• --lazy, -l - (optional) - a flag that, if included, will instruct Python not to try restructuring the HTML page before saving, and instead include JavaScript that will restructure the page after the user has loaded the page in their browser.

what this script does

CSS flexbox styling is provided, and the game canvas is told to take up to 2X the standard PICO-8 pixel dimensions (the canvas will be 290px, 580px, or 1160px wide dependending on available horizontal and vertical real estate).

It's best to stick to these three resolutions (multiples of the base resolution) in order for rendering to look nice.

build

To build transform.py from source, run:

# works in a UNIX shell environment
chmod +x build
./build

or:

python build.py