phaser-framework
#phaser-
framework
Table of Contents
About 1
Chapter 1: Getting started with phaser-framework 2
Remarks 2
Versions 2
Phaser 2 2
Examples 2
Getting Started Phaser 2
Getting Started with Phaser using Node.js 3
Chapter 2: Add An Image In Phaser 6
Introduction 6
Syntax 6
Remarks 6
Examples 6
Create And Add To Screen 6
Chapter 3: Working with TypeScript 8
Examples 8
Phaser environment setup (Asp.Net MVC5 - Typescript - Visual Studio 2015) 8
Credits 19
About
You can share this PDF with anyone you feel could benefit from it, downloaded the latest version
from: phaser-framework
It is an unofficial and free phaser-framework ebook created for educational purposes. All the
content is extracted from Stack Overflow Documentation, which is written by many hardworking
individuals at Stack Overflow. It is neither affiliated with Stack Overflow nor official phaser-
framework.
The content is released under Creative Commons BY-SA, and the list of contributors to each
chapter are provided in the credits section at the end of this book. Images may be copyright of
their respective owners unless otherwise specified. All trademarks and registered trademarks are
the property of their respective company owners.
Use the content presented in this book at your own risk; it is not guaranteed to be correct nor
accurate, please send your feedback and corrections to info@zzzprojects.com
https://riptutorial.com/ 1
Chapter 1: 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
Examples
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.
https://riptutorial.com/ 2
<!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>
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.
}
8. Save all files and open index.html using Bracket liveserver (top right icon).
9. 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
2. Initialize the directory using npm.
npm init -y
https://riptutorial.com/ 3
3. Install phaser as a node package.
npm install phaser
4. Install http-server as a global module, to be used on the commandline.
npm install -g http-server
5. 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>
6. Start the server and load http://localhost:8080 in your browser!
hs
Read Getting started with phaser-framework online: https://riptutorial.com/phaser-
https://riptutorial.com/ 4
framework/topic/6168/getting-started-with-phaser-framework
https://riptutorial.com/ 5
Chapter 2: Add An Image In Phaser
Introduction
Adding an image file (preferable a png) to your game as an "Image" object in Phaser.
Syntax
• game.load.image( name:string, file:string,);
• game.add.image( x:number, y:number, name:string);
Remarks
• An Image object is a good choice for things in your game that don't use frame animations
and don't otherwise need to be a Sprite.
• By default the anchor point for an image in the upper left corner, but you can change it like
this: image.anchor.setTo(0.5, 0.5);
Examples
Create And Add To Screen
You first must create a "Game" object in Phaser.
var game = new Phaser.Game(800, 600, Phaser.AUTO, 'phaser-example', { preload: preload,
create: create });
In the preload callback function load the image.
function preload() {
game.load.image('thing', 'assets/thing-image.png');
Parameter Details (Game.add.image)
name the name used to reference the image in the game.add.image method.
file path to the asset file (relative to the root directory for the project.
Then in the create function use the "add" method of the game object to create the Image object
and it to the screen.
function create() {
https://riptutorial.com/ 6
var image = game.add.image(100, 100, 'thing');
Parameter Details (Game.add.image)
x the x coordinates where the image should be added.
y the y coordinate where the image should be added.
name the name of the image assigned in the game.load.image method.
Read Add An Image In Phaser online: https://riptutorial.com/phaser-framework/topic/9853/add-an-
image-in-phaser
https://riptutorial.com/ 7
Chapter 3: Working with TypeScript
Examples
Phaser environment setup (Asp.Net MVC5 - Typescript - Visual Studio 2015)
Create a new ASP.Net Project:
Select the empty template:
https://riptutorial.com/ 8
Add two new folders: App and Scripts in the root folder:
https://riptutorial.com/ 9
Add npm configuration file in the root folder:
https://riptutorial.com/ 10
{
"version": "1.0.0",
"name": "phaser.js.environment.setup",
"private": true,
"devDependencies": {
"gulp": "3.9.1",
"phaser": "2.6.2"
}
}
Add gulp configuration file in the root folder:
https://riptutorial.com/ 11
Add typings folder in Scripts folder:
https://riptutorial.com/ 12
Gulp task:
/// <binding ProjectOpened='install' />
var gulp = require('gulp');
gulp.task('phaser-setup-typings', function () {
gulp.src([
'./node_modules/phaser/typescript/pixi.d.ts',
'./node_modules/phaser/typescript/p2.d.ts',
'./node_modules/phaser/typescript/phaser.d.ts',
])
.pipe(gulp.dest('./Scripts/typings'));
});
gulp.task('phaser-setup', function () {
gulp.src([
'./node_modules/phaser/build/phaser.min.js',
])
.pipe(gulp.dest('./Scripts/'));
});
gulp.task('install', ['phaser-setup-typings', 'phaser-setup']);
Run the install task:
https://riptutorial.com/ 13
Add a typescript file in the App folder:
https://riptutorial.com/ 14
Add an MVC controller:
using System.Web.Mvc;
namespace PhaserSetUp.Controllers
{
https://riptutorial.com/ 15
public class HomeController : Controller
{
// GET: Home
public ActionResult Index()
{
return View();
}
}
}
Add web optimization nuget package:
Install-Package Microsoft.AspNet.Web.Optimization
Add BundleConfig.cs class into the App_Start folder:
using System.Web.Optimization;
namespace PhaserSetUp.App_Start
{
public class BundleConfig
{
public static void RegisterBundles(BundleCollection bundles)
{
bundles.Add(new ScriptBundle("~/bundles/app").Include(
"~/App/app.js"));
}
}
}
Edit the Global.asax
using System;
using System.Web;
using System.Web.Mvc;
using System.Web.Routing;
using System.Web.Http;
https://riptutorial.com/ 16
namespace PhaserSetUp
{
public class Global : HttpApplication
{
void Application_Start(object sender, EventArgs e)
{
// Code that runs on application startup
AreaRegistration.RegisterAllAreas();
GlobalConfiguration.Configure(WebApiConfig.Register);
RouteConfig.RegisterRoutes(RouteTable.Routes);
BundleConfig.RegisterBundles(BundleTable.Bundles);
}
}
}
Add a View:
@using System.Web.Optimization
<!DOCTYPE html>
<html>
<head>
https://riptutorial.com/ 17
<meta name="viewport" content="width=device-width" />
<title>@ViewBag.Title</title>
</head>
<body>
<div>
@RenderBody()
</div>
<script src="../../Scripts/phaser.min.js"></script>
@Scripts.Render("~/bundles/app")
</body>
</html>
Read Working with TypeScript online: https://riptutorial.com/phaser-framework/topic/8054/working-
with-typescript
https://riptutorial.com/ 18
Credits
S.
Chapters Contributors
No
Getting started with
1 4444, Bob_Gneu, Community, InferOn, Shohanur Rahaman
phaser-framework
Add An Image In
2 Jim
Phaser
Working with
3 Bob_Gneu, InferOn
TypeScript
https://riptutorial.com/ 19
