'How do I convert my HTML5 game made with phaser into a exe file with electron?

Good Morning Devs I just want to know how to convert my html5 game into an EXE file with Electron

I installed Phaser and Electron with npm.

I am using the phaser.min.js file and downloaded the Phaser with npm to get better Intellisence.

Index.html

<!DOCTYPE html>
<html>
<head>
    <title>Learning Phaser</title>
    <meta charset="utf-8">
</head>

<script src="src/phaser.min.js"></script>
<script src="src/scenes/Scene1.js"></script>
<script src="src/scenes/Scene2.js"></script>
<script src="src/game.js"></script>

<body>
    
</body>

Scene1.js

class Scene1 extends Phaser.Scene {
constructor () {
    super("bootgame");
}

preload () {
    this.load.image("background", "assets/images/background.png")
}

create () {
    this.add.text(20, 20,"Loading Game .....")
    this.scene.start("playgame");
}

update () {

}
}

Scene2.js

class Scene2 extends Phaser.Scene {
constructor () {
    super("playgame");
}

preload () {
    this.load.image("background", "assets/images/background.png")
    this.load.image("ship", "assets/images/ship.png")
    this.load.image("ship2", "assets/images/ship2.png")
    this.load.image("ship3", "assets/images/ship3.png")
}

create () {
    this.background = this.add.image(0, 0, "background")
    this.background.setOrigin(0, 0)

    this.ship = this.add.image(config.width/2 - 50, config.height/2, "ship")
    this.ship2 = this.add.image(config.width/2, config.height/2, "ship2")
    this.ship3 = this.add.image(config.width/2 + 50, config.height/2, "ship3")

    this.add.text(20, 20, "Playing Game", {font: "25px Arial", fill: "yellow"});
}

update () {
    
}
}

game.js

var config = {
width : 256,
height : 272,
backgroundColor : 0x000000,
scene : [
    Scene1, Scene2 
],
}

var game = new Phaser.Game(config);

index.js (For the Electron package I installed)

const { app, BrowserWindow } = require('electron')

function createWindow() {
    const win = new BrowserWindow({
    width: 256,
    height: 272,
    webPreferences: {
        nodeIntegration: true
    }
})
win.setMenuBarVisibility(false);
win.loadFile('index.html');
}

app.whenReady().then(createWindow)

This is making me only to Preview the App, not to Build and Export.

I am following a tutorial to learn Phaser Game Development with HTML5.

I am just curious to know how to convert my HTML5 game to an EXE file and distribute it.

Thank, You

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution	Source

'How do I convert my HTML5 game made with phaser into a exe file with electron?

Sources

Related Questions