NWJS + Phaser.io game engine Tutorial

development
javascript

#1

Hello fellows!

GameShell is a fantastic piece of hardware and I would like to contribute my 2-cents on this community by posting a tutorial on how to make GameShell run javascript games (using a game engine like Phaser.io with the help of NWJS.

I have uploaded this tutorial and related code to GitHub but I will also post README.md here for convenience. However for the latest updates please always check my github. Hope you find it interesting and useful!

2018-08-10%2010_13_17-phaser

GameShell + NWjs + Phaser = :cupid:

Intro

The 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.

Requirements

Instructions

Installing NWjs on GameShell

First of all connect via ssh to GameShell.

Then download NWjs ARMv7 binaries (many thanks LeonardLaszlo) by executing the following command:


cpi@clockworkpi:~$ wget https://github.com/LeonardLaszlo/nw.js-armv7-binaries/releases/download/v0.27.6/nwjs-v0.27.6-linux-arm.tar.gz

Untar the archive with:


cpi@clockworkpi:~$ tar -xvf nwjs-v0.27.6-linux-arm.tar.gz

This 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.


cpi@clockworkpi:~$ cd nwjs-v0.27.6-linux-arm

cpi@clockworkpi:~/nwjs-v0.27.6-linux-arm$ sudo cp lib/* /usr/lib

One last thing, NWjs requires another shared object library, libnss3 which is not installed by default on GameShell. Install it by running:


cpi@clockworkpi:~/nwjs-v0.27.6-linux-arm$ sudo apt-get update

and then


cpi@clockworkpi:~/nwjs-v0.27.6-linux-arm$ sudo apt-get install libnss3-dev

To execute the NWjs create a shortcut in the menu:


cpi@clockworkpi:~/nwjs-v0.27.6-linux-arm$ touch /home/cpi/apps/launcher/Menu/GameShell/NWJS.sh

give it permission to execute:


cpi@clockworkpi:~/nwjs-v0.27.6-linux-arm$ chmod +x /home/cpi/apps/launcher/Menu/GameShell/NWJS.sh

then open the NWJS.sh file (with vim or any other editor) and insert the following line:


/home/cpi/nwjs-v0.27.6-linux-arm/nw --use-gl=egl --ignore-gpu-blacklist --disable-accelerated-2d-canvas --num-raster-threads=2

Reboot GameShell and an NWJS icon should appear on the menu. Selecting it should run the nw app.

To 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.

That’s all configuring NWjs on GameShell. The rest of this tutorial is the fun part of integrating Phaser game engine into NWjs

Deploying a Phaser.io Game

Like before, connect via ssh to GameShell.

Enter the directory where the nwjs binaries are, most probably in nwjs-v0.27.6-linux-arm/.


cpi@clockworkpi:~$ cd nwjs-v0.27.6-linux-arm

Clone this repository inside nwjs-v0.27.6-linux-arm/ directory


cpi@clockworkpi:~/nwjs-v0.27.6-linux-arm$ git clone https://github.com/pleft/nwphaserjs_tutorial.git

This 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.


cpi@clockworkpi:~/nwjs-v0.27.6-linux-arm$ mv nwphaserjs_tutorial/ package.nw/

That’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.

Significant code parts

Screen size

GameShell’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.


var game = new Phaser.Game(318, 238, Phaser.CANVAS, '', { preload: preload, create: create, update: update });

Key mapping

GameShell 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

  • UP = Phaser.Keyboard.UP

  • DOWN = Phaser.Keyboard.DOWN

  • LEFT = Phaser.Keyboard.LEFT

  • RIGHT = Phaser.Keyboard.RIGHT

  • A = Phaser.Keyboard.J

  • B = Phaser.Keyboard.K

  • X = Phaser.Keyboard.U

  • Y = Phaser.Keyboard.I

  • MENU = Phaser.Keyboard.ESC

  • START = Phaser.Keyboard.ENTER

  • SELECT = Phaser.Keyboard.SPACEBAR

Exiting the application

To 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:


if (this.escKey.isDown)

{

// nwjs related code to close the application

nw.App.closeAllWindows();

}


How to create a game using JavaScript?
#2

Thank you for this. Should I actually end up making a game for GameShell I’ll probably use Phaser, so nice to know it definitely can be done!


#3

This is great! Thank you!


#4

Here is a small video of my WIP custom launcher/menu to select and play phaser.io games. You can find my WIP code in the menu branch of the github repo posted above. Please note that the games require porting (to support the GameShell’s screen, keys and add the exit functionality) so only Breakout works. This branch is still work in progress.


#5

thanks elefas for your work, but how to start menu ?


#6

Provided that you have followed exactly the instructions posted on the first post it is very easy to switch to the “menu” application.

  1. ssh to GameShell
  2. cd to the package.nw/ directory which should be inside nwjs-v0.27.6-linux-arm/.
  3. Inside the package.nw directory is the clone of my github repository. So you can perform git commands. First perform a git fetch command to download the menu branch:
$ git fetch

Then checkout the “menu” branch

$ git checkout menu

That’s it, now the code inside package.nw should be the same as in the “menu” branch. You can run the nwjs application from your GameShell menu


#7

thanks it’s work :slight_smile:


#8

Hi,

thanks a lot for this amazing tutorial. I’d like to ask for some help though, got stuck when I was supposed to insert:

/home/cpi/nwjs-v0.27.6-linux-arm/nw --use-gl=egl --ignore-gpu-blacklist --disable-accelerated-2d-canvas --num-raster-threads=2

When I try that with PuTTy I get:

(nw:1379): Gtk-WARNING **: cannot open display:

I don’t understand the instruction, “open the NWJS.sh file (with vim or any other editor)”, just downloaded vim and I have no idea what to do with it. I’d really appreciate your help, sorry for causing trouble.


#9

Hi! you cannot run nwjs from ssh since it needs graphical interface. That’s why you have to create the NWJS shortcut on gameshell menu. The instructions for this require to create a .sh file tat’s why I wrote about vim but it may be a bit more difficut, a much easier way to do it is (again connect through ssh to gameshell):

echo /home/cpi/nwjs-v0.27.6-linux-arm/nw --use-gl=egl --ignore-gpu-blacklist --disable-accelerated-2d-canvas --num-raster-threads=2 > /home/cpi/apps/launcher/Menu/GameShell/NWJS.sh

Don’t forget to give execute rights:

chmod +x /home/cpi/apps/launcher/Menu/GameShell/NWJS.sh

Reboot your GameShell and start the app by choosing the NWJS icon on GameShell launcher.


#10

Thanks!

Works like a charm now, I’ll proceed with the Paser.io steps. Again, thanks a lot. :slight_smile: