{"id":17019335,"url":"https://github.com/nucleartide/pico8-mobile-template","last_synced_at":"2026-03-05T20:49:18.247Z","repository":{"id":79227490,"uuid":"218772596","full_name":"nucleartide/pico8-mobile-template","owner":"nucleartide","description":"Custom HTML template for PICO-8 and mobile devices.","archived":false,"fork":false,"pushed_at":"2020-10-23T21:18:20.000Z","size":551,"stargazers_count":43,"open_issues_count":0,"forks_count":4,"subscribers_count":3,"default_branch":"master","last_synced_at":"2025-06-02T05:10:18.220Z","etag":null,"topics":["mobile","mobile-game","pico8","pirp","pirp-stack","progressive-web-app","react"],"latest_commit_sha":null,"homepage":"","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/nucleartide.png","metadata":{"files":{"readme":"Readme.md","changelog":null,"contributing":null,"funding":".github/FUNDING.yml","license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null},"funding":{"ko_fi":"nucleartide"}},"created_at":"2019-10-31T13:28:31.000Z","updated_at":"2025-02-23T06:01:31.000Z","dependencies_parsed_at":"2023-03-12T07:23:55.993Z","dependency_job_id":null,"html_url":"https://github.com/nucleartide/pico8-mobile-template","commit_stats":null,"previous_names":[],"tags_count":0,"template":true,"template_full_name":null,"purl":"pkg:github/nucleartide/pico8-mobile-template","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/nucleartide%2Fpico8-mobile-template","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/nucleartide%2Fpico8-mobile-template/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/nucleartide%2Fpico8-mobile-template/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/nucleartide%2Fpico8-mobile-template/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/nucleartide","download_url":"https://codeload.github.com/nucleartide/pico8-mobile-template/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/nucleartide%2Fpico8-mobile-template/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":261632033,"owners_count":23187268,"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":["mobile","mobile-game","pico8","pirp","pirp-stack","progressive-web-app","react"],"created_at":"2024-10-14T06:48:55.136Z","updated_at":"2026-03-05T20:49:13.215Z","avatar_url":"https://github.com/nucleartide.png","language":"JavaScript","funding_links":["https://ko-fi.com/nucleartide"],"categories":[],"sub_categories":[],"readme":"\u003cp align=\"center\"\u003e\n  \u003ca href=\"https://pico8-mobile-template.jasontu.now.sh\"\u003e\u003cimg width=\"500\" alt=\"PICO-8 on iOS\" src=\"https://user-images.githubusercontent.com/914228/67862906-2dd40a00-fae0-11e9-832a-a592029f350f.png\" \u003e\u003c/a\u003e\u003cbr /\u003e\n  ☝️ \u003cstrong\u003e\u003cem\u003ePress the image on mobile to try the demo\u003c/em\u003e\u003c/strong\u003e ☝️\n\u003c/p\u003e\n\n\u003cbr /\u003e\n\n\u003cp align=\"center\"\u003e\n  \u003cstrong\u003ePICO-8 Mobile Template\u003c/strong\u003e\u003cbr /\u003e\n  (PI)CO-8 ❖ (R)eact ❖ (P)rogressive Web App ❖ (\u003cem\u003ePIRP Stack\u003c/em\u003e)\n\u003c/p\u003e\n\n\u003cbr /\u003e\n\n## Motivation\n\nImagine this scenario.\n\nYou meet someone new, and they ask the inevitable question:\n\n\u003e _What do you do in your spare time?_\n\nYou, being the consummate PICO-8 user that you are, respond:\n\n\u003e _Well, I make video games. I use this thing called PICO-8, which is a fantasy console that uses Lua, and it has a built-in pixel art editor, and–_\n\nYour new friend's eyes glaze over. Heck, maybe they aren't even a new friend anymore.\n\nWouldn't it be better if you could say this?\n\n\u003e _Well, I make video games. If you take out your phone and go to `https://funnydomain.name/`, you can play it right now!_\n\nYour new friend whips out their phone, visits `https://funnydomain.name/` as directed, and starts playing your game right in their mobile browser.\n\n\u003e _Woah, that's so badass! You have an awesome hobby._\n\nPICO-8 Mobile Template enables that kind of conversation.\n\n\u003cbr /\u003e\n\n## What is it exactly?\n\nPICO-8 Mobile Template provides a starting point for porting your PICO-8 game to mobile devices. It uses two key technologies: React.js and Progressive Web App (PWA) features.\n\n1. \u003ca href=\"https://reactjs.org/\" target=\"_blank\"\u003eReact.js\u003c/a\u003e is an industry-standard JavaScript library that enables you to build user interfaces in a modular, component-based fashion.\n\n2. \u003ca href=\"https://developers.google.com/web/progressive-web-apps\" target=\"_blank\"\u003eProgressive Web App\u003c/a\u003e (PWA) is a development philosophy, where you want your app to behave as closely as possible to a mobile app. Concretely, this means that a user can install your app on their mobile device, and play your app as if it were a standalone mobile app.\n\nThe second point is especially important, as PICO-8 currently lacks export options for iOS and Android. We must export to web, and make things work on mobile web.\n\n\u003cbr /\u003e\n\n## Get started\n\n### 1. Generate a new repository from this template\n\n\u003e \u003ca href=\"https://github.com/nucleartide/pico8-mobile-template/generate\" target=\"_blank\"\u003eHold \u003ckbd\u003eCtrl\u003c/kbd\u003e (Windows) or \u003ckbd\u003eCommand\u003c/kbd\u003e (Mac), then click this link\u003c/a\u003e\n\n\u003cbr /\u003e\n\n### 2. Start the development web server\n\nClone your generated git repository locally. Then, to start the development web server, run the command:\n\n```\n$ make serve\n```\n\n\u003e _**Note:** If you're on Windows, `make serve` may not work._\n\u003e\n\u003e _But you basically need to start a web server so you can serve the repo's files locally._\n\nOpen a browser and navigate to `http://localhost:8000/`. You can also use a helper command, which does the same thing:\n\n```\n$ make open\n```\n\n\u003cbr /\u003e\n\n### 3. Develop\n\nIf you are using Google Chrome, you should configure your Developer Tools such that Chrome displays the site in phone resolution:\n\n\u003cp align=\"center\"\u003e\n  \u003cimg width=\"1454\" alt=\"Screen Shot 2019-10-30 at 8 24 34 AM\" src=\"https://user-images.githubusercontent.com/914228/67872353-10f30300-faef-11e9-80ee-0b39775396a8.png\"\u003e\n\u003c/p\u003e\n\nAt this point, feel free to play around with the app.\n\nClick around. Examine the project's files. Tweak the code, refresh the browser, and study any changes in the webpage's behavior.\n\n\u003cbr /\u003e\n\n### 4. Test on mobile\n\nOnce you have your bearings, we can load the game on an actual mobile device.\n\n\u003e _**Note:** Please install [`ngrok`](https://ngrok.com/) before proceeding below._\n\nTo do this, I opt for using `ngrok` to expose our locally-running web server publicly. Run the following command:\n\n```\n# You can also run `make ngrok` for convenience, which does the same thing.\n$ ngrok http 8000\n```\n\nNote the URLs in `ngrok`'s terminal display:\n\n\u003cp align=\"center\"\u003e\n  \u003cimg width=\"801\" alt=\"Screen Shot 2019-10-30 at 8 32 20 AM\" src=\"https://user-images.githubusercontent.com/914228/67872873-d047b980-faef-11e9-80b8-cce72b7e970a.png\"\u003e\n\u003c/p\u003e\n\nThen, navigate to the `https://` URL above (`https://486f2bce.ngrok.io/` in this case) on your mobile device.\n\nThis is important: you will not be able to \"Add to Home Screen\" if accessing an `http://` (not `https://`) site.\n\nIn landscape mode, the site should resemble the image below:\n\n\u003cp align=\"center\"\u003e\n  \u003cimg width=\"500\" alt=\"PICO-8 on iOS\" src=\"https://user-images.githubusercontent.com/914228/67862906-2dd40a00-fae0-11e9-832a-a592029f350f.png\"\u003e\n\u003c/p\u003e\n\n\u003cbr /\u003e\n\n### 5. Test the \"Add to Home Screen\" button\n\nIf you click the \"Share\" button (whose appearance depends on your mobile operating system and browser), you can verify that the \"Add to Home Screen\" button appears:\n\n\u003cp align=\"center\"\u003e\n  \u003cimg width=\"533\" alt=\"Home Screen\" src=\"https://user-images.githubusercontent.com/914228/67873512-cb373a00-faf0-11e9-8e30-25daee4dad70.PNG\"\u003e\n\u003c/p\u003e\n\nUpon clicking the \"Add to Home Screen\" button, you'll be able to see the game as a true, standalone app in your Home Screen:\n\n\u003cp align=\"center\"\u003e\n  \u003cimg width=\"300\" alt=\"Add to Home Screen\" src=\"https://user-images.githubusercontent.com/914228/67873510-cb373a00-faf0-11e9-9516-e48c53ad4870.PNG\"\u003e\n\u003c/p\u003e\n\n_Pretty cool_, eh?\n\nTry pressing on your standalone app's icon. Note that _everything_ is customizable: the splash screen, the game shell, the touch controls. You can tweak to your heart's content later.\n\nFor `now` (pun intended), let's deploy the game to a more permanent public address.\n\n\u003cbr /\u003e\n\n### 6. Deploy\n\nTo deploy, one only needs to host the repository's files somewhere, and serve the files over `https://`.\n\nThere are many static file hosts. I like [Zeit's `now`](https://zeit.co/), but feel free to use your preferred host.\n\nIf you have Zeit's `now` command-line program installed, you can deploy as follows:\n\n```\n$ now\n```\n\nWhich will output something like the following:\n\n```\n$ now\n\u003e NOTE: Deploying to Now 2.0, because no Dockerfile was found. More: https://zeit.co/docs/version-detection\n\u003e Deploying ~/Repositories/progressive_web_app_test under jasontu\n\u003e Using project progressive_web_app_test\n\u003e Synced 2 files [139ms]\n\u003e NOTE: This is the first deployment in the progressive_web_app_test project. It will be promoted to production.\n\u003e NOTE: To deploy to production in the future, run `now --prod`.\n\u003e https://progressivewebapptest-68b5vw2ag.now.sh [1s]\n⠏ Queued...\u003e Ready! Deployed to https://progressivewebapptest.jasontu.now.sh [in clipboard] [3s]\n```\n\nAnd voilà!\n\nYou deployed your game to a web host, and you can share your game's URL (in this case, `https://progressivewebapptest.jasontu.now.sh/`) with anyone who wants to play your game.\n\n\u003cbr /\u003e\n\n## Configuration\n\nPICO-8 Mobile Template provides a _rough_ starting point; it is not plug-and-play. You should study the included files, and modify the code to suit your desired user experience.\n\nI left many code comments, which should hopefully ease understanding. Also, below is a description of the file structure:\n\n```\n.\n├── Makefile # Helper commands for convenience. Requires `make` to be installed.\n├── app.css # Your app's CSS stylesheet. Controls your app's visual appearance.\n├── app.js # Your app's JavaScript. Contains the game shell's React.js components.\n├── images # Your app's icon images. Customizable through `manifest.json`.\n│   ├── icon_128x128.png\n│   ├── icon_144x144.png\n│   ├── icon_152x152.png\n│   ├── icon_192x192.png\n│   ├── icon_256x256.png\n│   ├── icon_32x32.png\n│   ├── icon_512x512.png\n│   └── pico8_logo_vector.png\n├── index.html # Your app's HTML page.\n├── jelpi.js # The JavaScript exported by `export \u003cyour game\u003e.js` in PICO-8. You should replace this file, and update the filename in `app.js`.\n├── manifest.json # Progressive Web App configuration.\n└── service_worker.js # Customize offline caching behavior here.\n```\n\n\u003cbr /\u003e\n\n## Support\n\nPlease open a GitHub issue if something is unclear.\n\nWhile I'll try my best to respond, please remember that I have a full-time job, as well as general adult time commitments!\n\n\u003e \u003ca href=\"https://github.com/nucleartide/pico8-mobile-template/issues/new\" target=\"_blank\"\u003eHold \u003ckbd\u003eCtrl\u003c/kbd\u003e (Windows) or \u003ckbd\u003eCommand\u003c/kbd\u003e (Mac), then click here to open a GitHub issue\u003c/a\u003e\n\n\u003cbr /\u003e\n\n## Who am I?\n\n**@nucleartide** is the online alias of Jason Tu.\n\nAs of this writing, I work at [**@segment**](https://github.com/segmentio) by day, and hack on PICO-8 projects by night. I love PICO-8, and I think its creative constraints suit time-strapped people very well.\n\nFor more quips about PICO-8, please follow me on Twitter at [**@nucleartide**](https://twitter.com/nucleartide).\n\n---\n\n\u003e Team Avocado: https://teamavocado.co/\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fnucleartide%2Fpico8-mobile-template","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fnucleartide%2Fpico8-mobile-template","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fnucleartide%2Fpico8-mobile-template/lists"}