Did you find this helpful?

Getting Started with is a desktop and mobile HTML5 game framework that PlayFab now supports in our Javascript SDK. supports plugins, and thus we here at PlayFab thought that it would be useful to the community to have a powerful backend system that works as a plugin to the engine.

This guide shows by example how to setup and get started with PlayFab within


  • Knowledge of Javascript
  • Knowledge of setting up a webserver
  • General understanding of (a plus!)

Setting up a webserver using MAMP

To serve HTML pages to your browser you will need a web server,  we use MAMP / MAMP Pro, but you can use anything you are comfortable with.  

  • Setup a website via Mamp / Mamp Pro or your webserver of choice
  • Create an Index.html file in the root of your website folder

You can alternately read our Local Node HTTP-Server Guide.

Setting up Phaser

The first thing you will want to do is setup Phaser,  and thus you will need to download Phaser from  For this tutorial we advise just downloading the min.js file:

  1. Create a folder in your website root called js
  2. Download Phaser min.js and save it to your /js folder in the website root.

Setup Code

Start out by copy & pasting the following into Index.html:

<!doctype html>
<html class="no-js" lang="">
    <meta charset="utf-8">
    <meta http-equiv="x-ua-compatible" content="ie=edge">
    <meta name="description" content="">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <link rel="apple-touch-icon" href="apple-touch-icon.png">

    <script src=""></script>
    <script src="js/phaser.min.js"></script>
    Hello World!

You should get a blank page with "Hello World!" on the page.

Next Steps

  1. Add a new file in your  /js folder called  main.js
  2. Add the following code to main.js

var game = new Phaser.Game(800, 600, Phaser.AUTO, '', { preload: preload, create: create, update: update });

function preload() {

function create() {

function update() {

You should now be seeing the following image, and your installation is completed.

As you can see has initialized a canvas and it is blank.

Adding PlayFab & Phaser Plugin

PlayFab's Javascript SDK will now auto-detect if you have Phaser loaded on the webpage and inject itself into it as a Phaser Plugin.  There are only two lines of code that is needed to make this happen.   

  1. Add the script tag to load PlayFab just after the loading Phaser.

  2. Copy this code into your create() method of main.js

function create() {
    game.PlayFab = game.plugins.add(Phaser.Plugin.PlayFab);

Making your first API Call

Now that you have PlayFab installed as a plugin to phaser, you can set your titleId & make API calls.  Below you will see how to login a player: 

    game.PlayFab.settings.titleId = "D6EC"; //Your title Id from playfab goes here.
    }, function(result){
        console.log("LoggedIn as " + result.PlayFabId);

Did you find this helpful?