We need to configure at least a basic Electron application. Choose a destination for the project files and follow these steps to get started:
- Let's start by creating a new folder called game so that we can store the game project's files and assets:
mkdir game
cd game
- Next, we'll initialize the project and install the Electron and Phaser libraries:
npm init -y
npm i electron
npm i phaser
- As you already know, we need to have a start script in the scripts section of the package.json file. Also, don't forget to update the main entry point.
- Your file should look as follows:
{
"name": "game",
"version": "1.0.0",
"description": "",
"main": "main.js",
"scripts": {
"start": "electron ."
},
"keywords": [],
"author": "",
"license": "ISC",
"dependencies": {
"electron": "^7.0.0",
"phaser": "^3.20.1"
}
}
- Finally, you need to place the main.js file in the project's root folder. The minimum amount of content that we need so that the game can run is shown in the following code:
const { app, BrowserWindow } = require('electron');
function createWindow() {
const win = new BrowserWindow({
width: 800,
height: 600,
webPreferences: {
nodeIntegration: true
}
});
win.loadFile('index.html');
}
app.on('ready', createWindow);
While you can declare the JavaScript code directly in the index.html file, I strongly recommend storing the game's content in a separate game.js file.
- The minimum amount of content that we need for the game.js file is shown in the following code:
var config = {
type: Phaser.AUTO,
width: 800,
height: 600,
backgroundColor: '#03187D',
scene: {
preload: preload,
create: create,
update: update
}
};
var game = new Phaser.Game(config);
function preload() {}
function create() {}
function update() {}
As you can see, the initial configuration is self-explanatory. We create a window that's 800 x 600 pixels in size with a predefined background color and a few function references.
There are three common functions that you are often going to use when you start a new game, that is, preload, create, and update. Let's go over these now:
- The preload function is called when the game is about to start. This is useful when you want to render a beautiful Loading screen with a progress bar. That is also where you can load all of the game's assets.
- The create function is the primary builder of your game. All of the initialization logic happens here, for example, setting the background, creating game characters, and configuring keyboard and mouse input.
- Last but not least, the update function is called every time the game needs to update its state. This is the most frequently called function and is usually invoked numerous times per second.
We will look into the main functions in more detail shortly, but first, let's finish the project's setup by following these steps:
- To finish the project's setup, we need to place the index.html file in the project's root folder and import the phaser.min.js and game.js files:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>Hello World!</title>
</head>
<body>
<script src="node_modules/phaser/dist/phaser.min.js"></script>
<script src="game.js"></script>
</body>
</html>
- Also, I suggest creating a dedicated CSS stylesheet file for the game. We need it so that we can remove all of the document margins and disable the scrollbars.
- Create a game.css file next to the game.js file and put the following content inside it:
body {
margin: 0;
overflow: hidden;
}
- Update the game window title and import the stylesheet. The content of the index.html file should now look as follows:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>Electron Game</title>
<link rel="stylesheet" href="game.css" />
</head>
<body>
<script src="node_modules/phaser/dist/phaser.min.js"></script>
<script src="game.js"></script>
</body>
</html>
- To see our first game project in action, run the following command in a Terminal window or Command Prompt:
npm start
- Once the application is started up, you should see a window with a dark blue surface, as shown in the following screenshot, which means that our Phaser game is up and running and that we can render the background as expected:
Our game doesn't do much yet, but it's a good template for all of your future game projects. To practice with this more, let's look at an official Phaser example and wrap it with our project's scaffold.