Table of Contents

If you are interested in developing games with javascript/typescript, that can also run on the ClockworkPi Gameshell, this post might be for you. You can see my previous post for more information on the GSP.

You can find the resulting template/boilerplate code in my repository:

https://github.com/pauls-3d-things/gameshell-gsp-game-dev-boilerplate

The result will look something like this:

Click to open in a new window.

Media ID: B6gixc7oDO9

Getting started

Install node/npm from https://nodejs.org/en/ (LTS).

Install nw from https://nwjs.io/ (SDK).

Make sure the commands npm and nw are available in your CLI.

I use Visual Studio Code from https://code.visualstudio.com/ as a my IDE.

npm install
npm run build
npm run start

And you should see a small window with a bouncing DVD logo.

Stuff to read for the GameShell

This is the thread I looked at to find the info on how to run some Javascript based games on the GameShell:

https://forum.clockworkpi.com/t/gsp-gameshell-phaser/1391/35

https://github.com/pleft/GSP/blob/master/GSPGames/README.md

The GSP Launcher came preinstalled on my GameShell, so there was not much to set up.

This also helped me get started:

https://github.com/pleft/nwphaserjs_tutorial

This was a helpful reference to write the DVD Demo and understand PhaserJS:

http://labs.phaser.io/

Running this Project on the GameShell

As shown above, build this project with

npm run build

Preparing GSP

Connect to the GSP via SSH. I assume you are using a linux like environment as your desktop OS.

On my device, GSP was installed in /home/cpi/games/GSP/. The launcher reads a config file /home/cpi/games/GSP/GSPGames/menu.json, so you can add your own project there.

Add the entry:

	{
	    "title": "DVD-Demo",
	    "directory": "dvd-demo/"
	}

Then, create the folder:

mkdir /home/cpi/games/GSP/GSPGames/dvd-demo

Copy over the files

Then, copy over the files:

scp -r dist/* cpi@clockworkpi:/home/cpi/games/GSP/GSPGames/dvd-demo/

(Re)Start the GSP Launcher and select DVDDEMO from the menu.

Getting all 320x240 Pixels

The GSP default config hasn’t set the NWJS window to allow full screen. I changed the file /home/cpi/games/GSP/package.json to allow fullscreen, so the contents are as follow:

{
    "name": "GSPLauncher",
    "main": "index.html",
    "window": {
        "width": 320,
        "height": 240,
        "max_width": 320,
        "max_height": 240,
        "resizable": false,
        "fullscreen": true, // change this from false to true
        "frame": false,
        "transparent": true
    }
}

In addidtion to this, I had to set overflow: hidden on the body tag. Then, you can use the full 320x240 canvas for PhaserJS (after restarting GSP).

Debugging

Connect to your GameShell with

ssh -L 9222:localhost:9222 cpi@clockworkpi

Then, open

http://localhost:9222

with the browser chrome. The developer console will open, and you can select the index.html to debug your project running on the gameshell.

Notes

I used the logo from Wikipedia to create the asset:

https://commons.wikimedia.org/wiki/File:DVD_logo.svg