The default webplayer page format that gets exported from PICO-8 is great, but not quite excellent, since it only provides one display resolution. I decided to work with the structure and style a bit (using flexbox styles and media breakpoints) to make the canvas render at 290px, 580px, or 1160px wide based on what real estate is available. Also, the buttons collapse into multiple rows once the display gets small enough.
I came up with this.
(replace "[PATH_TO_YOUR_CARTRIDGE.js]" with your actual cartridge js file).
Try it out by resizing your browser window (if you open up the developer console you can use its border to make the window space even smaller). You won't get the highest resolution unless you're on a very high res display (e.g. 4k), since it checks for vertical space as well.
The thing is, this won't be easy to use if you've already made content or style changes to your page, or when the next iteration of the HTML export page is included in a future version of PICO-8.
So I wrote a Python script (click on "Raw" to download) that will, in one command, turn your existing webplayer page into a responsive one.
$ python transform.py cartridge.html
This will give you a "cartridge-responsive.html" file.
Let me know what you think! If I did something wrong, feel free to discuss it here or submit a pull request.
P.S. If you like it feel free to give the project a star on GitHub. :)
@Ivoah - sure. The main reason I'm hesitant to do that is that I haven't built any finished cartridges of my own yet, and I don't want to volunteer someone's work without permission. :P I can throw something together though.
Here - I created a GitHub pages comparison of the two. http://benwiley4000.github.io/pico8-responsive-webplayer-transform/pico8_responsive.html I'm using my object-oriented implementation of the Squash/Pong game from the first zine.
And I'll update the first post.
[Please log in to post a comment]