{"id":19353630,"url":"https://github.com/benwiley4000/tiny-pico8-touch-ui","last_synced_at":"2025-04-23T08:31:44.854Z","repository":{"id":57377252,"uuid":"128134284","full_name":"benwiley4000/tiny-pico8-touch-ui","owner":"benwiley4000","description":"👾👌 Add touch controls to your PICO-8 game - no sweat!","archived":false,"fork":false,"pushed_at":"2018-04-06T05:38:37.000Z","size":367,"stargazers_count":9,"open_issues_count":0,"forks_count":1,"subscribers_count":2,"default_branch":"master","last_synced_at":"2025-04-02T10:12:06.785Z","etag":null,"topics":["game-development","mobile","pico-8","touch","web"],"latest_commit_sha":null,"homepage":"https://benwiley4000.github.io/tiny-pico8-touch-ui/","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/benwiley4000.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2018-04-04T23:24:33.000Z","updated_at":"2024-12-27T20:33:19.000Z","dependencies_parsed_at":"2022-09-26T16:41:44.767Z","dependency_job_id":null,"html_url":"https://github.com/benwiley4000/tiny-pico8-touch-ui","commit_stats":null,"previous_names":[],"tags_count":1,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/benwiley4000%2Ftiny-pico8-touch-ui","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/benwiley4000%2Ftiny-pico8-touch-ui/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/benwiley4000%2Ftiny-pico8-touch-ui/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/benwiley4000%2Ftiny-pico8-touch-ui/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/benwiley4000","download_url":"https://codeload.github.com/benwiley4000/tiny-pico8-touch-ui/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":250399483,"owners_count":21424191,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["game-development","mobile","pico-8","touch","web"],"created_at":"2024-11-10T04:43:31.992Z","updated_at":"2025-04-23T08:31:44.529Z","avatar_url":"https://github.com/benwiley4000.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# tiny-pico8-touch-ui\n\nA tiny library which makes it easy to add touch controls to your [PICO-8](https://www.lexaloffle.com/pico-8.php) web game.\n\n### [Try it here!](https://benwiley4000.github.io/tiny-pico8-touch-ui/)\n\nPICO-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?\n\nIf you have a page that looks like this:\n\n```html\n\u003c!-- ... cart stuff --\u003e\n\u003cbutton id=\"left\"\u003e \u003c \u003c/button\u003e\n\u003cbutton id=\"right\"\u003e \u003e \u003c/button\u003e\n\u003cbutton id=\"up\"\u003e /\\ \u003c/button\u003e\n\u003cbutton id=\"down\"\u003e \\/ \u003c/button\u003e\n\u003cbutton id=\"o\"\u003e O \u003c/button\u003e\n\u003cbutton id=\"x\"\u003e X \u003c/button\u003e\n\u003c!-- ... script stuff --\u003e\n```\n\nInclude [this](tiny-pico8-touch-ui.js) in your page...\n\n```html\n\u003cscript src=\"tiny-pico8-touch-ui.js\"\u003e\u003c/script\u003e\n```\n\nThen later you can register buttons like this:\n\n```html\n\u003cscript\u003e\n  registerP8Btn(document.getElementById('left'), 0);\n  registerP8Btn(document.getElementById('right'), 1);\n  registerP8Btn(document.getElementById('up'), 2);\n  registerP8Btn(document.getElementById('down'), 3);\n  registerP8Btn(document.getElementById('o'), 4);\n  registerP8Btn(document.getElementById('x'), 5);\n\u003c/script\u003e\n```\n\nAre you trying to support multiple players? Then you can do:\n\n```js\nregisterP8Btn(document.getElementById('x-P1'), 5, 0 /* player 1 */);\nregisterP8Btn(document.getElementById('x-P2'), 5, 1 /* player 2 */);\n```\n\nThat's it!\n\n\u003e [FAQ](#faq)\n\n## fetching script from CDN\n\nIf you prefer to fetch tiny-pico8-touch-ui.js from a CDN:\n\n```html\n\u003cscript src=\"https://unpkg.com/tiny-pico8-touch-ui\"\u003e\u003c/script\u003e\n```\n\n(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`.)\n\n## installing as a module\n\nYou can also install from npm:\n\n```console\nnpm install --save tiny-pico8-touch-ui\n```\n\nAnd use like this:\n\n```js\nvar registerP8Btn = require('tiny-pico8-touch-ui');\n\nregisterP8Btn(document.getElementById('left'), 0);\n```\n\n## building example site\n\nTo build a new copy of the example javascript export, open PICO-8 and run:\n\n```console\nload example.p8\nexport index.js\n```\n\nThen open index.html in a web browser.\n\n## FAQ\n\n### that worked, but there's no sound!\n\nThat will happen on many phones (not because of this library, but because PICO-8 starts running before the user has interacted with the screen).\n\nTo 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):\n\n```html\n\u003cbutton id=\"myGameStartButton\"\u003eStart!\u003c/button\u003e\n\u003cscript\u003e\n  var Module = {};\n  // ...\n  // This part is important!!\n  Module.noInitialRun = true;\n\u003c/script\u003e\n\u003cscript src=\"mygame.js\"\u003e\u003c/script\u003e\n\u003cscript\u003e\n  var game_started = false;\n  function startGame() {\n    if (game_started) return;\n    game_started = true;\n    Module.calledRun = false;\n    window.shouldRunNow = true;\n    run();\n  }\n  document.querySelector('#myGameStartButton')\n    .addEventListener('click', startGame);\n\u003c/script\u003e\n```\n\n### ok that works, but I don't actually want to display touch controls if the page is loaded on a computer\n\nCheck for a `touchstart` event and set a variable so when the subsequent `click` event follows, you know to show touch controls.\n\n```html\n\u003cstyle\u003e\n  .touch_controls {\n    display: none;\n  }\n  .using_touch .touch_controls {\n    display: initial;\n  }\n\u003c/style\u003e\n\u003cdiv class=\"touch_controls\"\u003e\n  \u003cbutton id=\"left\"\u003e \u003c \u003c/button\u003e\n  \u003c!-- ... --\u003e\n\u003c/div\u003e\n\u003c!-- ... --\u003e\n\u003cscript\u003e\n  var game_started = false;\n  var using_touch = false;\n  function startGame() {\n    if (game_started) return;\n    game_started = true;\n    if (using_touch) {\n      document.body.classList.add('using_touch');\n    }\n    Module.calledRun = false;\n    window.shouldRunNow = true;\n    run();\n  }\n  document.querySelector('#myGameStartButton')\n    .addEventListener('click', startGame);\n  \n  // on a touch device, touchstart always\n  // gets processed before click\n  function activateTouch() {\n    using_touch = true;\n  }\n  document.addEventListener('touchstart', activateTouch);\n\u003c/script\u003e\n```\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fbenwiley4000%2Ftiny-pico8-touch-ui","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fbenwiley4000%2Ftiny-pico8-touch-ui","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fbenwiley4000%2Ftiny-pico8-touch-ui/lists"}