{"id":14964095,"url":"https://github.com/pleft/nwphaserjs_tutorial","last_synced_at":"2025-09-30T19:30:42.108Z","repository":{"id":75633760,"uuid":"144134592","full_name":"pleft/nwphaserjs_tutorial","owner":"pleft","description":"Tutorial with example on how to create a JavaScript game using Phaser.io and run it on GameShell using NWjs","archived":false,"fork":false,"pushed_at":"2018-08-10T20:50:58.000Z","size":664,"stargazers_count":12,"open_issues_count":0,"forks_count":0,"subscribers_count":2,"default_branch":"master","last_synced_at":"2025-01-16T06:59:39.260Z","etag":null,"topics":["gameshell","nwjs","phaserjs"],"latest_commit_sha":null,"homepage":null,"language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/pleft.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"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}},"created_at":"2018-08-09T09:59:46.000Z","updated_at":"2023-08-24T08:12:29.000Z","dependencies_parsed_at":"2023-06-07T04:45:08.219Z","dependency_job_id":null,"html_url":"https://github.com/pleft/nwphaserjs_tutorial","commit_stats":{"total_commits":6,"total_committers":1,"mean_commits":6.0,"dds":0.0,"last_synced_commit":"2fb874ff3c89d9aed955e358ad149ed3391f77e7"},"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/pleft%2Fnwphaserjs_tutorial","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/pleft%2Fnwphaserjs_tutorial/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/pleft%2Fnwphaserjs_tutorial/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/pleft%2Fnwphaserjs_tutorial/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/pleft","download_url":"https://codeload.github.com/pleft/nwphaserjs_tutorial/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":234767163,"owners_count":18883392,"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":["gameshell","nwjs","phaserjs"],"created_at":"2024-09-24T13:32:34.280Z","updated_at":"2025-09-30T19:30:36.792Z","avatar_url":"https://github.com/pleft.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# GameShell + NWjs + Phaser = :cupid:\n\n## Intro\n\nThe scope of this tutorial is to demonstrate how to setup an HTML5/JavaScript environment (NWjs) on Clockworkpi's GameShell along with a JS game engine (Phaser) and deploy a simple Phaser example that is playable and controlled by GameShell.\n\n## Requirements\n* Clockworkpi's GameShell portable console (https://www.clockworkpi.com/)\n* NWjs ARM binaries (https://github.com/LeonardLaszlo/nw.js-armv7-binaries)\n\n## Instructions\n\n### Part 1: Installing NWjs on GameShell\n\nFirst of all connect via `ssh` to GameShell. \n\nThen download NWjs ARMv7 binaries (many thanks LeonardLaszlo) by executing the following command: \n\n```bash\ncpi@clockworkpi:~$ wget https://github.com/LeonardLaszlo/nw.js-armv7-binaries/releases/download/v0.27.6/nwjs-v0.27.6-linux-arm.tar.gz\n```\n\nUntar the archive with:\n\n```bash\ncpi@clockworkpi:~$ tar -xvf nwjs-v0.27.6-linux-arm.tar.gz\n```\n\nThis will create a directory with all `NWjs` binaries. Inside this directory there is a `lib/` directory. All the shared object files located in `lib/` directory need to be copied to `/usr/lib` directory.\n\n\n```bash\ncpi@clockworkpi:~$ cd nwjs-v0.27.6-linux-arm\ncpi@clockworkpi:~/nwjs-v0.27.6-linux-arm$ sudo cp lib/* /usr/lib\n```\n\nOne last thing, `NWjs` requires another shared object library, libnss3 which is not installed by default on GameShell. Install it by running:\n\n```bash\ncpi@clockworkpi:~/nwjs-v0.27.6-linux-arm$ sudo apt-get update\n```\nand then\n\n```bash\ncpi@clockworkpi:~/nwjs-v0.27.6-linux-arm$ sudo apt-get install libnss3-dev\n```\n\nTo execute the `NWjs` create a shortcut in the menu:\n\n```bash\ncpi@clockworkpi:~/nwjs-v0.27.6-linux-arm$ touch /home/cpi/apps/launcher/Menu/GameShell/NWJS.sh\n```\n\ngive it permission to execute:\n\n```bash\ncpi@clockworkpi:~/nwjs-v0.27.6-linux-arm$ chmod +x /home/cpi/apps/launcher/Menu/GameShell/NWJS.sh\n```\n\nthen open the `NWJS.sh` file (with `vim` or any other editor) and insert the following line:\n```\n/home/cpi/nwjs-v0.27.6-linux-arm/nw --use-gl=egl --ignore-gpu-blacklist --disable-accelerated-2d-canvas --num-raster-threads=2\n```\n\nReboot GameShell and an NWJS icon should appear on the menu. Selecting it should run the `nw` app.\n\nTo exit the application it is needed either to switch off GameShell or kill the `nw` process id, `sudo kill -9 PID`. In the rest of the tutorial, a key shortcut will be added to close the application and return to the launcher by pressing the `menu` key on GameShell.\n\nThat's all configuring `NWjs` on GameShell. The rest of this tutorial is the fun part of integrating `Phaser` game engine into `NWjs`\n\n### Part 2: Deploying a Phaser.io Game\n\nLike before, connect via `ssh` to GameShell. \n\nEnter the directory where the `nwjs` binaries are, most probably in `nwjs-v0.27.6-linux-arm/`.\n\n```bash\ncpi@clockworkpi:~$ cd nwjs-v0.27.6-linux-arm\n```\n\nClone this repository *inside* `nwjs-v0.27.6-linux-arm/` directory\n\n```bash\ncpi@clockworkpi:~/nwjs-v0.27.6-linux-arm$ git clone https://github.com/pleft/nwphaserjs_tutorial.git\n```\n\nThis will create a directoy `nwphaserjs_tutorial/` inside `nwjs-v0.27.6-linux-arm/`. Rename this directory to `package.nw`. Doing this will allow the `nwjs` binary to pickup this repository's phaser.io code and execute it.\n\n```bash\ncpi@clockworkpi:~/nwjs-v0.27.6-linux-arm$ mv nwphaserjs_tutorial/ package.nw/\n```\n\nThat's all, now selecting the `NWJS` icon on the GameShell menu will launch our little phaser.io game. To exit the game and return to GameShell launcer press the `MENU` key.\n\n### Part 3: Significant code parts\n\n#### Screen size \n\nGameShell's screen is 320x240 pixels, however setting in phaser.io the playfield's size to exact match the screen's size will result to the appearance of scrollbars. So it is set 2-pixels lower, 318x238.\n\n```javascript\nvar game = new Phaser.Game(318, 238, Phaser.CANVAS, '', { preload: preload, create: create, update: update });\n```\n\n#### Key mapping\nGameShell maps its buttons to keyboard keys. This makes our lives easier and it is pretty straightforward to map GameShell's buttons to phaser.io keys\n\n* `UP = Phaser.Keyboard.UP`\n* `DOWN = Phaser.Keyboard.DOWN`\n* `LEFT = Phaser.Keyboard.LEFT`\n* `RIGHT = Phaser.Keyboard.RIGHT`\n* `A = Phaser.Keyboard.J`\n* `B = Phaser.Keyboard.K`\n* `X = Phaser.Keyboard.U`\n* `Y = Phaser.Keyboard.I`\n* `MENU = Phaser.Keyboard.ESC`\n* `START = Phaser.Keyboard.ENTER`\n* `SELECT = Phaser.Keyboard.SPACEBAR`\n\n#### Exiting the application\nTo exit the application and return to the GameShell's launcher, `nwjs` command: `closeAllWindows()` should be called. Mapping this command to the `MENU` key is done as:\n\n```javascript\nif (this.escKey.isDown)\n{\n    // nwjs related code to close the application\n    nw.App.closeAllWindows();\n}\n```","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fpleft%2Fnwphaserjs_tutorial","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fpleft%2Fnwphaserjs_tutorial","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fpleft%2Fnwphaserjs_tutorial/lists"}