Update (24 Sep 2017)

I've added a pause button, and as was suggested by commenters @Felice and @apLundell I switched to using the pico glyphs for the graphics... it's a little less flashy looking overall, but gives a much nicer more consistent feel.

Original Post:

I am just getting into playing around with pico-8, but after finishing my first little game, I really wanted to be able to play and distribute it for mobile, so being primarily a JavaScript guy, I've hacked together a little controller that embeds itself on the webpage for mobile devices.

I've tried to keep it as simple for other game-makers to use as possible. As such it should work out of the box with html/js files that are exported from pico-8. All you should have to do to use it with your own game is drop the js, css and png files into the same directory as the html file and then link the files as described in the Readme on github:

Heres the code:

https://github.com/codyloyd/pico-webcontroller

and a demo:

http://codyloyd.com/pico-webcontroller-test/
(go there on your phone, or resize your browser window to see the controls.)
and you can also see it in action on my game here: http://codyloyd.com/jazzyjeff/

I'd love any feedback or tips that you might have. I don't have a huge array of devices to test it out on, so if you find something not working let me know!

• Nice that it maintains the pixel-art theme and the palette.

• It bothers my eyes a little that the background on the dpad is lower-resolution than the other parts of the controls.

• You might want to consider using the official X and O button glyphs instead of Z and X.

(I know a lot of people don't use the official button glyphs when telling you what button to use, but they really should. Keyboards aren't universal, nor are their layouts. That's why zep gave us a spec for their official names.)

That's really nice. I'm testing on Firefox Android and it works perfectly.

Minor constructive criticism :

• I agree with Felice, I wish it used the official button glyphs, or at least their official names.
• I can't tell from the demo, is it possible to hit both O and X at the same time?
• Pause-menu button is needed. Some games put functionality in the menu. (And it's good to be able to pause, anyway.)

I wonder if there's a way to craft a page so that you could play any arbitrary Pico-8 game that way. I'd love to have a 'bookmarklet' that I could press in the forums and somehow reload the game I was looking at with this UI. I may experiment with that if you don't.

Thanks for the feedback.. I am definitely not happy with the graphics for exactly the same reasons you both mention.. but I've been hacking on the main functionality more than the appearance.

Pause menu is definitely possible... I also want to add a menu that includes the options I've removed from the default html (especially reset, pause and sound)

It is technically possible to hit both buttons, but it may be hard/impossible with just one finger. I haven't considered or tested that (shouldn't be too hard though)

I've also thought a bit about the 'bookmarklet' thing. It would be super cool but I'm not sure right off the bat how it would work. If you get anything working hit me up FO SHO.

You could make it a user script 🎉

This seems like an awesome project.

Congrats!

Thanks @clsource.. I haven't been working on it in a few days, but there are a few things I'd like to iron out... do you have any feature requests?

Using this with a web framework may be a good way to port games to mobile platforms. I have used Electron on my desktop, but you could probably use this and Adobe PhoneGap to port it to mobile.

@codyloyd any updates here?