HTML Template: MOUSELOCK

Published 2023-06-12

This template enables mouse pointer locking thanks to the JavaScript Pointer Lock API & Pico-8's GPIO system. The mouse pointer will get locked inside the pico-8 frame, while still providing movement deltas from your mouse. Now you can do a proper Marble Madness or Quake remake!

here's a demo cart (also included in the zip below):


Of course it doesn't work as advertised here on the bbs, nor within the pico-8 binary. You'll get stuck when the pointer quits the frame.

The mouse handling code is in the first tab:

mouse.lockable : true when the cart is run from the proper html template, false otherwise
mouse.locked : true when the mouse is actually locked within the web browser, false otherwise
(for instance you might want to pause and print a message for the user to click back)
mouse.dx, mouse.dy : mouse deltas!
mouse.x, mouse.y : mouse coordinates, still updated and available for your menus even when the mouse is locked

note that you'll need to call mouse:update() every frame to... update the stuff above!
also the mouse buttons and wheel are not handled here, but still available through the usual stat()

when not lockable there's a fallback to standard mouse input while still trying to provide deltas, for dev purpose, with the result you can see above.

Free to use and modify, no attribution required, have fun!

unzip ubmlock.zip in your template dir:
Windows: C:/Users/{Yourname}/AppData/Roaming/pico-8/plates
OSX: /Users/{Yourname}/Library/Application Support/pico-8/plates
Linux: ~/.lexaloffle/pico-8/plates