This article is part of the "Complete Phaser 3 Game Development Guide" series, if you haven't installed Phaser 3 into your game project go to Part 0. Also this is a required section if you are using commonjs to require the Phaser 3 library.
What's this about?
Since Phaser 3 is a front-end library, the files that we include inside our game file need to be included in the main html file we are using. The problem is, the require function is used to import libraries using Node.js and since html doesn't execute code without the use of a browser (hence not using Node.js), this will cause an error in our game not compiling properly or at all!
To solve this, the lovely developer community created tools that bundle your Node.js libraries into normal Javascript files that your browser can execute.
In this part of the guide we will complete the following tasks:
After this you can go ahead to Part 1 and continue the tutorial.
Installing Bundling Tool
There are a bunch of bundling tools that are used to convert Node.js code into normal Javascript code. The most popular and complete tool is called webpack, but it's a "bit to much" for beginners. In this tutorial we will use browserify, mostly because of it's simplicity (even though the creator of Phaser doesn't like it...).
Regardless of this, it's a great beginner tool to start with, later (if you want of course) you can move into webpack.
To install browserify you just need to use npm and write:
npm install --save-dev browserify
on console and install it as development dependency.
And that's it!
Bundling Code
After installing browserify as a dependency in your project you can bundle your code with the following command.
npx browserify game.js -o bundle.js
Assuming your game is inside a file named game.js, the following command takes your game file (game.js) where you have Phaser 3 included, bundles it and outputs a file called bundle.js (this happens because we used the -o or --outfile option).
Now instead of including your game.js (that basically uses Node.js libraries) inside your html file, you include your bundle.js into your library.
Basically this works because browserify includes EVERYTHING from the required library into a single Javascript file including your game.js code so that your browser can execute it. This is why it's called "bundling".
And that's it!!
Optionally: Since it's so tedious to bundle your game every time you edit something, you can install watchify which works exactly the same as browserify, but your bundle.js file is updated everytime you save your game.js file.
Install with the following:
npm install --save-dev watchify
Run with the following:
npx watchify game.js -o bundle.js
And that's basically it for this section! If you feel comfortable, you can now move on to Part 1 where we create our first "Hello World" in Phaser 3!
Top comments (0)