Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/benwiley4000/tiny-pico8-touch-ui
👾👌 Add touch controls to your PICO-8 game - no sweat!
https://github.com/benwiley4000/tiny-pico8-touch-ui
game-development mobile pico-8 touch web
Last synced: about 2 months ago
JSON representation
👾👌 Add touch controls to your PICO-8 game - no sweat!
- Host: GitHub
- URL: https://github.com/benwiley4000/tiny-pico8-touch-ui
- Owner: benwiley4000
- License: mit
- Created: 2018-04-04T23:24:33.000Z (over 6 years ago)
- Default Branch: master
- Last Pushed: 2018-04-06T05:38:37.000Z (over 6 years ago)
- Last Synced: 2024-06-12T18:02:37.216Z (7 months ago)
- Topics: game-development, mobile, pico-8, touch, web
- Language: JavaScript
- Homepage: https://benwiley4000.github.io/tiny-pico8-touch-ui/
- Size: 358 KB
- Stars: 8
- Watchers: 3
- Forks: 1
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# tiny-pico8-touch-ui
A tiny library which makes it easy to add touch controls to your [PICO-8](https://www.lexaloffle.com/pico-8.php) web game.
### [Try it here!](https://benwiley4000.github.io/tiny-pico8-touch-ui/)
PICO-8's default web export doesn't yet support touch controls, but I want my game to support mobile, which means supporting touch. If you're like me, you might find the built-in API for controlling touch button inputs from a web page a bit esoteric, and not super easy to read/write. Why not write a tiny API wrapper that makes this much easier?
If you have a page that looks like this:
```html
<
>
/\
\/
O
X
```
Include [this](tiny-pico8-touch-ui.js) in your page...
```html
```
Then later you can register buttons like this:
```html
registerP8Btn(document.getElementById('left'), 0);
registerP8Btn(document.getElementById('right'), 1);
registerP8Btn(document.getElementById('up'), 2);
registerP8Btn(document.getElementById('down'), 3);
registerP8Btn(document.getElementById('o'), 4);
registerP8Btn(document.getElementById('x'), 5);
```
Are you trying to support multiple players? Then you can do:
```js
registerP8Btn(document.getElementById('x-P1'), 5, 0 /* player 1 */);
registerP8Btn(document.getElementById('x-P2'), 5, 1 /* player 2 */);
```
That's it!
> [FAQ](#faq)
## fetching script from CDN
If you prefer to fetch tiny-pico8-touch-ui.js from a CDN:
```html
```
(It's better to specify a specific version string rather than letting unpkg serve you the latest version each time the page is fetched; try opening https://unpkg.com/tiny-pico8-touch-ui in a web browser first so it resolves to a more specific URL, then include that as your script `src`.)
## installing as a module
You can also install from npm:
```console
npm install --save tiny-pico8-touch-ui
```
And use like this:
```js
var registerP8Btn = require('tiny-pico8-touch-ui');
registerP8Btn(document.getElementById('left'), 0);
```
## building example site
To build a new copy of the example javascript export, open PICO-8 and run:
```console
load example.p8
export index.js
```
Then open index.html in a web browser.
## FAQ
### that worked, but there's no sound!
That will happen on many phones (not because of this library, but because PICO-8 starts running before the user has interacted with the screen).
To get around that, you can defer running your game until after the user has clicked on the screen. Here's a way to do that (this is undocumented and might change in a future PICO-8 release):
```html
Start!
var Module = {};
// ...
// This part is important!!
Module.noInitialRun = true;
var game_started = false;
function startGame() {
if (game_started) return;
game_started = true;
Module.calledRun = false;
window.shouldRunNow = true;
run();
}
document.querySelector('#myGameStartButton')
.addEventListener('click', startGame);
```
### ok that works, but I don't actually want to display touch controls if the page is loaded on a computer
Check for a `touchstart` event and set a variable so when the subsequent `click` event follows, you know to show touch controls.
```html
.touch_controls {
display: none;
}
.using_touch .touch_controls {
display: initial;
}
<
var game_started = false;
var using_touch = false;
function startGame() {
if (game_started) return;
game_started = true;
if (using_touch) {
document.body.classList.add('using_touch');
}
Module.calledRun = false;
window.shouldRunNow = true;
run();
}
document.querySelector('#myGameStartButton')
.addEventListener('click', startGame);
// on a touch device, touchstart always
// gets processed before click
function activateTouch() {
using_touch = true;
}
document.addEventListener('touchstart', activateTouch);
```