Getting started with phaser-framework

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>

    My Gamer
     <script type="text/javascript" src="lib/phaser.js"></script>
    <style type="text/css">
        body {
            margin: 0;
  5. Create another js file inside the directory named game.js

  6. 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. }

  7. Save all files and open index.html using Bracket liveserver (top right icon).

  8. 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">

    <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;

    <div id="helloWorld"></div>
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(, 300, text, style);


  1. Start the server and load http://localhost:8080 in your browser!