Azerion Phaser Boilerplate

Yet another Phaser Boilerplate, but instead of showing a working toolchain, this is all about fixing bugs, working around browser issues, analytics and advertising. This is the core of every HTML5 Azerion Game :)

Due to this boilerplate having no focus on the toolchain, we also assume in this readme that you have some basic knowledge about webpack, npm and TypeScript

Getting Started

So the first thing you'd want to is too clone this game repo and start changing some ID's around in the webpack.base.config.js file. We have some base ID's setup for google analytics, game analytics and GameDistribution ads

Development

During development itself you only need to run 1 command, namely:

PC@OG:~/Projects/GameName$ npm run dev

It will starts webpack-dev-server/browsersync and open a browser tab for you. This will make sure that every time a Typescript file has changed, it wil update your project.

A webserver is also started on your local machine on port 3000. You can point your browser to http://localhost:3000, check out your game, and browsersync will refresh your browser every time a change has been made. To check out all the features of BrowserSync you can check out http://localhost:3001

Production

For production builds there are two commands, one that compiles and minifies all the code and assets, and one for writing a version number.

PC@OG:~/Projects/GameName$ npm run dist

Development

It's time to start developing! Keep the following guidelines in mind when developing a game.

Configuration

So in order to set up the correct analytics and ads you need to make some accounts at:

• google analytics
• game analytics
• GameDistribution ads

Then get the id's you're given and you can put them in the Constants.

Code

Game logic

In the ts/Backend folder goes all the logic of the game. This is logic without any front-end or animations linked to it. The idea is that this logic can be copied 1 on 1 to the backend server so that when the game is on the portal, this backend server knows exactly whats going on in the game. This makes online integration a lot easier for the game.

./ts/Backend

Game States

Any class that extends a Phaser.State should be located in the ts/States folder, also don't forget to register the new state in app.ts :)

//Here we load all the states, but they shouldn't start automaticly
this.state.add(Boot.Name, Boot, false);
this.state.add(Fabrique.SplashScreen.Preloader.Name, Fabrique.SplashScreen.Preloader, false);
this.state.add(Menu.Name, Menu, false);
this.state.add(Gameplay.Name, Gameplay, false);

All these files are placed here.

./ts/States

Data

Configs, asset names etc. go into

./ts/Data

Objects

Sometimes, in-game objects are a bit bigger than just a Phaser.Sprite or Phaser.Image. In those cases, we create separate classes for them that extend any of the default Phaser objects (like Phaser.Sprite or Phaser.Button) and place them in the ts/Objecst folder.

./ts/Data/Objects

Fabrique

The ts/Fabrique contains a set of files, that will mostly be re-used utils for other games like a FadeToColor state, and stuff that is needed in order for the TypeScript compiler to find all the references. Like Fabrique.IState or Fabrique.IGame

Assets

Images

First, add the images to this folder:

./assets/images

Then implement them in code as so:

class Images {
 //All the separate images needed in the game
 public static Background: string = 'background';
}

Next you need to add the static image reference to the preloadList as well, so the game knows this image has to be loaded.

class Images {
//All the seperate images needed in the game
public static Background: string = 'background';

public static preloadList: string[] = [
    Images.Background,
];
}

Now the game will automatically load the background image, and all you have to do is use the static reference to add it to the game:

game.add.image(
    100,                // x position
    100,                // y position
    Images.Background   // Loaded image reference
);

Sound

This should be located in

./assets/sound

The adding and handling of sound is the same as those of images, but the added requirement for audio is that every audio file needs an mp3, ogg and m4a version. This is due to cross-browser support.

Fonts

Fonts require files to be in 2 places. First of all we need a css file that defines a font-face in the css folder

./assets/css/yourFontFace.css

Then the font files themselves should be place in

./assets/fonts

WebFonts require a definition in css, apart from any woff/ttf/eot files, thats why fonts are located into folders. Ideally every font has woff, eot, svg AND ttf files to make sure it works in every major browser.

Once that's done you can add the font to the fontloader, which is located in app.ts.

//Load the fonts
WebFont.load(<WebFont.Config>{
 custom: <WebFont.Custom>{
     families: ['Century Gothic'],
     urls: [
         'assets/css/CenturyGothic.css'
     ]
 }
});

In the above example there is only one font specified, but this can be extended with an infinite amount of fonts.

The WebFont.load will be implemented along with update function which will check if fonts have been loaded. And if so, the function will update the text to use the loaded fonts.

Atlasses

This should be located in

./assets/atlas

Atlases are images that contain multiple assets in a game. Every atlas image has a corresponding JSON file that tells the Phaser framework where in the atlas each image is located, and what the image's original size should be.

Our atlases are generated with TexturePacker, and we store the .tps config file also in assets/atlas folder.

Other than that atlases are treated and loaded the same as images and audio.

Notable games

We have over 100 games made with this boilerplate, here are some of our best titles:

Credits

CSS loader by @lukehaas phaser-npm-webpack-typescript-starter-project by @rroylance Music Menu state - Doobly Doo Kevin MacLeod Licensed under Creative Commons: By Attribution 3.0 License Music Gameplay state - Overworld Kevin MacLeod Licensed under Creative Commons: By Attribution 3.0 License

Handy Sources / Links

Here you find a list of libraries used by the games in general. They link to the lib's respective docs

• phaser-cachebuster A Phaser plugin that allows for assets to be cachebusted by queryparameters
• phaser-ads A Phaser plugin for providing nice ads integration in your phaser.io game
• phaser-spine A plugin for Phaser that adds Spine support
• phaser-i18next Phaser plugin for translations using i18next
• phaser-web-workers A simple Phaser plugin that allows you to easily integrate Web Workers in your game
• phaser-super-storage A cross platform pluggable storage plugin for Phaser.
• webfontloader A library that allows for 'good' loading of multiple fonts
• phaser-nineslice A plugin that adds 9 slice scaling support
• phaser-input An input library that works on canvas and WebGL. Also has mobile support.