How to get a Phaser game (or any HTML game) on to Steam

Ok so you've got a working game in Phaser (or any HTML game) and you wish to publish to Phaser...

Greenlight

There is a submission fee of £70 (at least at the time of this writing) and this is non-refundable. Ok so first thing first, you can't just publish a game straight to Steam you need to pass Steam's Greenlight process first. This is where you submit your game's screenshots, trailers and description to the Steam community for their review. Note that you don't need to have your game or any demo ready at this point. But you do need to at least have some final artwork to give people a good idea what the game is about and how it will look. Under no circumstances should you submit concept art as the Steam community expects things to be more polished than that. A good free piece of software I found to make my game trailer was Shotcut.

You create your page and the Steam Community will get voting. You will most likely find that the first 2 days are the busiest. After that it will start to tail off. I found the best day to submit your page is on a Monday night. People are still fresh from the weekend and are hungry for games after their first day back from work - I guess. How long will you be in the Greenlight process? Nobody knows it's never the same. For me it took 8 days, for one of my friends it took 6 weeks.

So let's fast forward and say you have now been Greenlit! Yay well done you! Hopefully by this point you should have a nearly finished working game. Steam requires an exe file (no html files are allowed so let's make the exe file...

Making the exe

I decided to use nw.js because its super quick and simple. Note though that this will only make your exe work for Windows but for my purpose this was fine.

1. First you need to make your game work all in one folder. Subfolders aren't allowed. So you will need to cut and paste all your files in to your root directory and redo your paths
2. Download nw.js zip file. I used v0.19.1 - https://dl.nwjs.io/v0.19.1/
3. Extract the nw.js folder to your game's folder
4. If you just open nw.exe you will see your game work instantly within the exe. But let's amend this file to be a little bit more customized for our needs. Open package.json and cut and past the below into your file:
   
   {
"main": "index.html",
"name": "GAME TITLE",
"window": {
"title": "GAME TITLE",
"width": 1042,
"height": 586,
"fullscreen": true,
"toolbar": true,
"icon": "customIcon.png"
},
"version": "0.1.0",
"chromium-args": "--data-path='./saves/' --in-process-gpu --disable-transparency"
}
5. Steam users expect your game to work in fullscreen. Now although in the above code we have set it to be fullscreen, if you open up nw.exe you will notice that when we press the "esc" key, it doesn't close. You need to paste the below code in your index.html file in the head tag to make this work:
   
   <script>
nw.App.registerGlobalHotKey(new nw.Shortcut({
key: "Escape",
active: function () {
// decide whether to leave fullscreen mode
// then ...
nw.Window.get().leaveFullscreen();
}
}));
</script>
6. Main confusing bit is the icon. You need to have an icon at 128x128 and as a PNG, not an ICO! Now you've probably realised that only the window icon has changed and you are stuck with the standard nw compass icon for the folder view. No worries... download Resource Hacker and follow these instructions to amend the main ico file. Note that this time you will need a real ICO file but you can easily make one here. This ICO file again should be 128x128.
7. Ok I now hear you saying "Andrew this is no good I just want my game in a single wrapped up exe file", no problem. Now you need to download Enigma Virtual Box. Once installed, select your nw.exe file as the input file and then choose an appropriate output name for the final rendered exe file. Then in the drop down file area select and drag ALL your files including any sub-folders that nw.js may have created and drop them in. Note make sure NOT to include the nw.exe file. Hit the run button and you should have a final wrappped up exe file!