https://github.com/benwiley4000/pico8-responsive-webplayer-transform

🕹 Responsive post-processing for #pico8 web player
https://github.com/benwiley4000/pico8-responsive-webplayer-transform

games pico8 python responsive responsive-design responsive-layout

Last synced: about 1 month ago
JSON representation

🕹 Responsive post-processing for #pico8 web player

• Host: GitHub
• URL: https://github.com/benwiley4000/pico8-responsive-webplayer-transform
• Owner: benwiley4000
• Created: 2016-03-30T12:51:12.000Z (about 8 years ago)
• Default Branch: master
• Last Pushed: 2016-10-23T18:48:29.000Z (over 7 years ago)
• Last Synced: 2024-04-09T22:01:10.605Z (2 months ago)
• Topics: games, pico8, python, responsive, responsive-design, responsive-layout
• Language: Python
• Homepage:
• Size: 295 KB
• Stars: 14
• Watchers: 4
• Forks: 2
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Lists

• awesome-PICO-8 - p8 responsive webplayer transform - Python script that makes your HTML export page responsive. (Uncategorized / Uncategorized)

README

        
# pico8 responsive webplayer transform

[See it live here.](http://benwiley4000.github.io/pico8-responsive-webplayer-transform/pico8_responsive.html)

[Download the latest release here.](https://github.com/benwiley4000/pico8-responsive-webplayer-transform/releases/latest)

This is a python script you can run on an HTML file exported from the [PICO-8 Fantasy Console](http://www.lexaloffle.com/pico-8.php). 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] 

```

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](https://www.python.org/) 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

* `` (**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](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Using_CSS_flexible_boxes) 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

```