Documentation

Getting Started with Phaser.io

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

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

Requirements:

  • Knowledge of Javascript
  • Knowledge of setting up a webserver
  • General understanding of Phaser.io ( 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 Phaser.io.  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="">
<head>
    <meta charset="utf-8">
    <meta http-equiv="x-ua-compatible" content="ie=edge">
    <title></title>
    <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="https://code.jquery.com/jquery-1.12.0.min.js"></script>
    <script src="js/phaser.min.js"></script>
</head>
<body>
    Hello World!
</body>
</html>

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 show now be seeing the following image and your Phaser.io installation is completed.

As you can see phaser.io 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.
    game.PlayFab.LoginWithCustomId({
        "CustomId":"SomeUniqueIdForYourPlayer",
        "CreateAccount":true
    }, function(result){
        console.log("LoggedIn as " + result.PlayFabId);
    });