Getting started with phaser-framework

Download phaser-framework eBook

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

VersionRelease Date
2.6.2 Kore Springs2016-08-25
2.6.1 Caemlyn2016-07-11
2.6.0 Fal Moran2016-07-08
2.5.0 Five Kings2016-06-17
2.4.9 Four Kings2016-06-16
2.4.8 Watch Hill2016-05-19

Getting Started Phaser

  1. Create a folder
  2. Create an index.html inside the new directory. Open it in the Bracket editor
  3. Download the Phaser repository from github, then grab the phaser.js file from the build folder. Place the file inside your project directory.
  4. Open index.html and link the phaser.js inside the header tag.
<!doctype html> 
<html lang="en"> 
<head> 
    <meta charset="UTF-8" />
    <title>My Gamer</title>    
    
     <script type="text/javascript" src="lib/phaser.js"></script>

    <style type="text/css">
        body {
            margin: 0;
        }
    </style>
    
</head>
<body>    
        <div id="gameContainer"></div>
</body>
</html>
 
  1. Create another js file inside the directory named game.js
  2. 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.
}
 
  1. Save all files and open index.html using Bracket liveserver (top right icon).
  2. 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

  1. Create a folder where you would like to have your game live, and move into that
mkdir my-new-game
cd my-new-game
  1. Initialize the directory using npm.
npm init -y
  1. Install phaser as a node package.
npm install phaser
  1. Install http-server as a global module, to be used on the commandline.
npm install -g http-server
  1. 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>
  1. Start the server and load http://localhost:8080 in your browser!
    hs    

Stats

52 Contributors: 6
Friday, December 9, 2016
Licensed under: CC-BY-SA

Not affiliated with Stack Overflow
Rip Tutorial: info@zzzprojects.com

Download eBook