{"id":1648,"date":"2019-03-02T04:25:18","date_gmt":"2019-03-02T04:25:18","guid":{"rendered":"https:\/\/blog.hassler.ec\/wp\/?p=1648"},"modified":"2019-02-28T03:34:37","modified_gmt":"2019-02-28T03:34:37","slug":"how-to-build-a-simple-game-in-the-browser-with-phaser-3-and-typescript","status":"publish","type":"post","link":"https:\/\/blog.hassler.ec\/wp\/2019\/03\/02\/how-to-build-a-simple-game-in-the-browser-with-phaser-3-and-typescript\/","title":{"rendered":"How to build a simple game in the browser with Phaser 3 and TypeScript"},"content":{"rendered":"
\n
\n
\n

<\/h1>\n
Photo by Phil Botha<\/a> on Unsplash<\/a><\/figcaption><\/figure>\n

I\u2019m a developer advocate and a backend developer, and my frontend development expertise is relatively weak. A while ago I wanted to have some fun and make a game in a browser; I chose Phaser 3 as a framework (it looks quite popular these days) and TypeScript as a language (because I prefer static typing over dynamic). It turned out that you need to do some boring stuff to make it all work, so I wrote this tutorial to help the other people like me get started faster.<\/p>\n

Preparing the environment<\/h3>\n

IDE<\/h4>\n

Choose your development environment. You can always use plain old Notepad if you wish, but I would suggest using something more helpful. As for me, I prefer developing pet projects in Emacs, therefore I have installed tide<\/a>and followed the instructions to set it up.<\/p>\n

Node<\/h4>\n

If we were developing on JavaScript, we would be perfectly fine to start coding without all these preparation steps. However, as we want to use TypeScript, we have to set up the infrastructure to make the future development as fast as possible. Thus we need to install node and npm.<\/p>\n

As I write this tutorial, I use node 10.13.0<\/a> and npm 6.4.1<\/a>. Please note that the versions in the frontend world update extremely fast, so you simply take the latest stable versions. I strongly recommend using nvm<\/a> instead of installing node and npm manually; it will save you a lot of time and nerves.<\/p>\n

Setting up the project<\/h3>\n

Project structure<\/h4>\n

We will use npm for building the project, so to start the project go to an empty folder and run npm init<\/code>. npm will ask you several questions about your project properties and then create a package.json<\/code> file. It will look something like this:<\/p>\n

{\n  \"name\": \"Starfall\",\n  \"version\": \"0.1.0\",\n  \"description\": \"Starfall game (Phaser 3 + TypeScript)\",\n  \"main\": \"index.js\",\n  \"scripts\": {\n    \"test\": \"echo \\\"Error: no test specified\\\" && exit 1\"\n  },\n  \"author\": \"Mariya Davydova\",\n  \"license\": \"MIT\"\n}<\/pre>\n
Packages<\/h4>\n
Install the packages we need with the following command:<\/p>\n
npm install -D typescript webpack webpack-cli ts-loader phaser live-server<\/code><\/p>\n
-D<\/code> option (a.k.a. --save-dev<\/code>) makes npm add these packages to the list of dependencies in package.json<\/code> automatically:<\/p>\n
\"devDependencies\": {\n   \"live-server\": \"^1.2.1\",\n   \"phaser\": \"^3.15.1\",\n   \"ts-loader\": \"^5.3.0\",\n   \"typescript\": \"^3.1.6\",\n   \"webpack\": \"^4.26.0\",\n   \"webpack-cli\": \"^3.1.2\"\n }<\/pre>\n
Webpack<\/h4>\n
Webpack will run the TypeScript compiler and collect the bunch of resulting JS files as well as libraries into one minified JS so that we can include it in our page.<\/p>\n
Add webpack.config.js<\/code> near your project.json<\/code>:<\/p>\n
const path = require('path');<\/pre>\n
module.exports = {\n  entry: '.\/src\/app.ts',\n  module: {\n    rules: [\n      {\n        test: \/\\.tsx?$\/,\n        use: 'ts-loader',\n        exclude: \/node_modules\/\n      }\n    ]\n  },\n  resolve: {\n    extensions: [ '.ts', '.tsx', '.js' ]\n  },\n  output: {\n    filename: 'app.js',\n    path: path.resolve(__dirname, 'dist')\n  },\n  mode: 'development'\n};<\/pre>\n
Here we see that webpack has to get the sources starting from src\/app.ts<\/code>(which we\u2019ll add very soon) and collect everything in dist\/app.js<\/code> file.<\/p>\n
TypeScript<\/h4>\n
We also need a small configuration file for the TypeScript compiler (tsconfig.json<\/code>) where we explain which JS version we want the sources to be compiled to and where to find those sources:<\/p>\n
{\n  \"compilerOptions\": {\n    \"target\": \"es5\"\n  },\n  \"include\": [\n    \"src\/*\"\n  ]\n}<\/pre>\n
TypeScript definitions<\/h4>\n
TypeScript is a statically typed language. Therefore, it requires type definitions for the compilation. At the time of writing this tutorial, the definitions for Phaser 3 were not yet available as the npm package, so you may need to download them<\/a> from the official repository and put the file in the src<\/code>subdirectory of your project.<\/p>\n
Scripts<\/h4>\n
We have almost finished the project set up. At this moment you should have created package.json<\/code>, webpack.config.js<\/code>, and tsconfig.json<\/code>, and added src\/phaser.d.ts<\/code>. The last thing we need to do before starting to write code is to explain what exactly npm has to do with the project. We update the scripts<\/code> section of the package.json<\/code> as follows:<\/p>\n
\"scripts\": {\n  \"build\": \"webpack\",\n  \"start\": \"webpack --watch & live-server --port=8085\"\n<\/strong>}<\/pre>\n
When you execute npm build<\/code>, the app.js<\/code> file will be built according to the webpack configuration. And when you run npm start<\/code>, you won\u2019t have to bother about the build process: as soon as you save any source, webpack will rebuild the app and the live-server<\/a> will reload it in your default browser. The app will be hosted at http:\/\/127.0.0.1:8085\/<\/a>.<\/p>\n
Getting started<\/h3>\n
Now that we have set up the infrastructure (the part I personally hate when starting a project), we can finally start coding. In this step we\u2019ll do a straightforward thing: draw a dark blue rectangle in our browser window. Using a big game development framework for this is a little bit of\u2026 hmmm\u2026 overkill. Still, we\u2019ll need it on the next steps.<\/p>\n
Let me briefly explain the main concepts of Phaser 3. The game is an instance of the Phaser.Game<\/code> class (or its descendant). Each game contains one or more instances of Phaser.Scene<\/code> descendants. Each scene contains several objects, either static or dynamic, and represents a logical part of the game. For example, our trivial game will have three scenes: the welcome screen, the game itself, and the score screen.<\/p>\n
Let\u2019s start coding.<\/p>\n
First, create a minimalistic HTML container for the game. Make an index.html<\/code>file, which contains the following code:<\/p>\n
<!DOCTYPE html>\n<html>\n  <head>\n    <title>Starfall<\/title>\n    <script src=\"dist\/app.js\"><\/script>\n  <\/head>\n  <body>\n    <div id=\"game\"><\/div>\n  <\/body>\n<\/html><\/pre>\n
There are only two essential parts here: the first one is a script<\/code> entry which says that we are going to use our built file here, and the second one is a div<\/code>entry which will be the game container.<\/p>\n
Now create a file src\/app.ts<\/code> with the following code:<\/p>\n
import \"phaser\";<\/pre>\n
const config: GameConfig = {\n  title: \"Starfall\",\n  width: 800,\n  height: 600,\n  parent: \"game\"\n  backgroundColor: \"#18216D\"\n};<\/pre>\n
export class StarfallGame extends Phaser.Game {\n  constructor(config: GameConfig) {\n    super(config);\n  }\n}<\/pre>\n
window.onload = () => {\n  var game = new StarfallGame(config);\n};<\/pre>\n
This code is self-explanatory. GameConfig has a lot of various properties, you can check them out here<\/a> .<\/p>\n
And now you can finally run npm start<\/code>. If everything was done correctly on this and previous steps, you should see something as simple as this in your browser:<\/p>\n
\n
\n
<\/div>\n
<\/canvas><\/div>\n<\/div>
Yes, this is a blue screen.<\/figcaption><\/figure>\n
Making the stars fall<\/h3>\n
We have created an elementary application. Now it\u2019s time to add a scene where something will happen. Our game will be simple: the stars will fall to the ground, and the goal will be to catch as many as possible.<\/p>\n
To achieve this goal create a new file, gameScene.ts<\/code>, and add the following code:<\/p>\n
import \"phaser\";<\/pre>\n
export class GameScene extends Phaser.Scene {<\/pre>\n
constructor() {\n    super({\n      key: \"GameScene\"\n    });\n  }<\/pre>\n
init(params): void {\n    \/\/ TODO\n  }<\/pre>\n
preload(): void {\n    \/\/ TODO\n  }\n  \n  create(): void {\n    \/\/ TODO\n  }<\/pre>\n
update(time): void {\n    \/\/ TODO\n  }\n};<\/pre>\n
Constructor here contains a key under which other scenes may call this scene.<\/p>\n
You see here stubs for four methods. Let me briefly explain the difference between then:<\/p>\n