Tutorial Easy way to deploy HTML5 games using Electron

[User_920791]

A guide to making your html5 game available on multiple platforms (Desktop only).

The information contained here is intended for Windows users, but can also be applied to other platforms with some adaptations.

1. Install

You must be registered to see the links

.


2. Open Node.js command prompt (C:\Windows\System32\cmd.exe /k "C:\Program Files\nodejs\nodevars.bat") And run the following commands:

npm install electron-packager -g

cd \

mkdir html5games

cd html5games

mkdir randomgame

3. Keep Node.js command prompt open and copy the contents of your game (index.html etc) to C:\html5games\randomgame\ .


4. Create two text files inside C:\html5games\randomgame\ folder and rename them to "main.js" and "package.json".

*Some engines already have these files (

You must be registered to see the links

, for example). If this is your case, skip to item 7.


5. Insert the following content into the file "main.js":

const { app, BrowserWindow } = require('electron')
 
  let win
 
  function createWindow () {
    win = new BrowserWindow({ width: 1280, height: 720 })
 
    win.loadFile('index.html')
 
    win.on('closed', () => {
      win = null
    })
  }
 
  app.on('ready', createWindow)
 
  app.on('window-all-closed', () => {
    if (process.platform !== 'darwin') {
      app.quit()
    }
  })
 
  app.on('activate', () => {
    if (win === null) {
      createWindow()
    }
  })

6. Insert the following content into the file "package.json":

{
    "name": "randomgame",
    "version": "1.0.0",
    "main": "main.js"
  }

7. Run the following command on Node.js command prompt:

electron-packager C:\html5games\randomgame randomgame --arch=ia32,x64 --platform=win32,linux,darwin --electron-version=2.0.11 --asar

After a few minutes, you will find new folders in C:\html5games :

randomgame-darwin-x64
randomgame-linux-ia32
randomgame-linux-x64
randomgame-win32-ia32
randomgame-win32-x64

*The folder "randomgame-darwin-x64" is the version for Mac.

For information related to customization, check the following links:

You must be registered to see the links

You must be registered to see the links