Getting started with phaser-framework

Remarks#

Phaser is an open source Desktop and Mobile HTML5 game framework primarily.

It includes a robust set of documentation, features and examples to get you moving towards a working game quickly. It supports WebGL, via the Pixi.js rendering engine, and includes a Canvas fallback for support on older devices.

Although the engine is built in JavaScript it also includes TypeScript definitions

There is a new envisioning of the project that is ES6 compliant called Lazer.

Versions#

Phaser 2

Version	Release Date
2.6.2 Kore Springs	2016-08-25
2.6.1 Caemlyn	2016-07-11
2.6.0 Fal Moran	2016-07-08
2.5.0 Five Kings	2016-06-17
2.4.9 Four Kings	2016-06-16
2.4.8 Watch Hill	2016-05-19

Getting Started Phaser

Create a folder
Create an index.html inside the new directory. Open it in the Bracket editor
Download the Phaser repository from github, then grab the phaser.js file from the build folder. Place the file inside your project directory.

Open index.html and link the phaser.js inside the header tag.

My Gamer

 <script type="text/javascript" src="lib/phaser.js"></script>

<style type="text/css">
    body {
        margin: 0;
    }
</style>

Create another js file inside the directory named game.js
Open game.js file in editor and write the following code:

// Phaser instance, width 800px, height 600px render as CANVAS. // Method signature - preload, create and update

var game = new Phaser.Game(800, 600, Phaser.CANVAS,‘gameContainer’, { preload: preload, create: create, update: update });

function preload() { // this method used to load your game assets }

function create() { // this method run only once used to create to game world }

function update() { // this method loop 60 times in a seconds, used to handle gameplay. }
Save all files and open index.html using Bracket liveserver (top right icon).
The Phaser development environment is now created. A console screen should appear in the browser for error verification.

Getting Started with Phaser using Node.js

Create a folder where you would like to have your game live, and move into that

mkdir my-new-game
cd my-new-game

Initialize the directory using npm.

npm init -y

Install phaser as a node package.

npm install phaser

Install http-server as a global module, to be used on the commandline.

npm install -g http-server

Create an index.html file and reference the Phaser executable and paste the following code into it.

<!doctype html>
<html lang="en">

<head>
    <meta charset="UTF-8" />
    <title>My Gamer</title>
    <script type="text/javascript" src="node_modules/phaser/build/phaser.js"></script>
    <style type="text/css">
    body {
        margin: 0;
    }
    </style>
</head>

<body>
    <div id="helloWorld"></div>
</body>
<script>
var game = new Phaser.Game(800, 600, Phaser.CANVAS, 'helloWorld', {
    create: create
});

function create() {

    var text = "Hello World!";
    var style = {
        font: "65px Arial",
        fill: "#ff0044",
        align: "center"
    };

    var t = game.add.text(game.world.centerX, 300, text, style);
    t.anchor.set(0.5);

}
</script>

</html>

Start the server and load https://localhost:8080 in your browser!

hs