I want my web export to support mobile. But if you're like me, you might find the 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:
<!-- ... cart stuff --> <button id="left"> < </button> <button id="right"> > </button> <button id="up"> /\ </button> <button id="down"> \/ </button> <button id="o"> O </button> <button id="x"> X </button> <! -- ... --> |
Include this in your page...
(function() {
var __btns = {};
function update_btns(playerIndex) {
pico8_buttons[playerIndex] =
Object.keys(__btns[playerIndex]).reduce(function(val, btn) {
return val | (__btns[playerIndex][btn] ? Math.pow(2, btn) : 0);
}, 0);
}
function registerP8Btn(domElement, btnIndex, playerIndex) {
playerIndex = playerIndex || 0;
window.pico8_buttons = window.pico8_buttons || [];
pico8_buttons[playerIndex] = pico8_buttons[playerIndex] || 0;
__btns[playerIndex] = __btns[playerIndex] || {};
domElement.addEventListener('touchstart', function() {
__btns[playerIndex][btnIndex] = true;
update_btns(playerIndex);
});
domElement.addEventListener('touchend', function() {
__btns[playerIndex][btnIndex] = false;
update_btns(playerIndex);
});
}
window.registerP8Btn = registerP8Btn;
})();
|
Then later you can register buttons like this:
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:
registerP8Btn(document.getElementById('x-P1'), 5, 0 /* player 1 */);
registerP8Btn(document.getElementById('x-P2'), 5, 1 /* player 2 */);
|
That's it!
P#51309 2018-04-04 15:46 ( Edited 2018-04-05 00:05)
:: BenWiley4000
This is now on GitHub, by the way: https://github.com/benwiley4000/tiny-pico8-touch-ui
And there's a live example here: https://benwiley4000.github.io/tiny-pico8-touch-ui/
P#51320 2018-04-04 20:05 ( Edited 2018-04-05 00:05)
[Please log in to post a comment]



