Introduction to Phaser.js

Francesco Raimondo
Senior FrontEndDev, HTML5 addicted,
CLM expert, PhaserJs learner, CBM64
Lover… && Retrogamer 4ever!
Presentation Layer Architect @
Healthwareinternational
CO-FOUNDER
www.zero89.it
www.devday.it
mgc.zero89.it

A fast, free and fun open
source framework for
Canvas and WebGL
powered browser games.
PHASER

1. Introduction 2. What we need?
3. Code and Examples 4. Tools and Resources

Introduction

Introduction
Phaser is an HTML5 game framework which aims to help developers make
powerful, cross-browser HTML5 games really quickly and, unlike some
others, has solely been built to work with the mobile browsers. The only
browser requirement is the support of the canvas tag.
Phaser overview
„Desktop and
Mobile HTML5
game framework“
Created by
14.700 stars && 4.800 forks on GitHub

Introduction
• 2D JS framework
• Based on Pixi.js
• WebGL with Canvas fallback
• Tailored for mobile web games
• Open Source <3
What is Phaser?

Introduction
• Aspiring and experienced game developers
• JavaScript developers
• Great for learning game development
Who is it for?

Introduction
Phaser CE 2.7.5 (Community edition)
In November 2016 the ownership of Phaser was handed over to the open
source community.
https://github.com/photonstorm/phaser-ce
Phaser 3 (under development)
Phaser 3 is not yet ready for production use.
https://github.com/photonstorm/phaser/tree/master/v3
http://labs.phaser.io/
Where we are && where we go.

What we
need?

What we need?
• Sublime text
This is the editor the Phaser team use for building the
framework and all projects.
http://www.sublimetext.com
• Visual Studio Code
This should only really be considered if you wish to write your
game using TypeScript instead of JavaScript.
https://code.visualstudio.com
• Brackets
It's a free open-source code editor and runs across Windows,
OS X and Linux.
http://brackets.io
Text editor

What we need?
• Wamp
A Windows web development environment.
It allows you to create web applications with Apache2, PHP and
a MySQL database
http://www.wampserver.com/en/
• Mamp
My Apache - MySQL - PHP for OS X and Windows
http://www.mamp.info/
• Lite-server
Lightweight development only node server that serves a web
app, opens it in the browser, refresh and more.
https://github.com/johnpapa/lite-server
Local server

What we need?
Templates
Phaser + ES6 + Webpack
A bootstrap project to create games
with Phaser + ES6 + Webpack.
https://github.com/lean/phaser-es6-
webpack
Phaser NPM Webpack
Typescript starter project
Project to get you started with your
Phaser games!
https://github.com/rroylance/phaser-
npm-webpack-typescript-starter-project

Code and
Examples

Code and Examples
• Easy setup & preload mechanism
• Common game objects: camera, time, image, text, sprite, group, tween
• Sprite sheets & texture atlases
• TileSprites & collision maps
• Bitmap fonts, Google fonts
• Physics: Arcade, Box2d
• Particles, tinting, WebGL shaders
• Sound and FX (ogg, mp3, m4a )
• Plugins
Features overview

Code and Examples
// create the game
var game = new Phaser.Game(
800, 600, Phaser.CANVAS, 'phaser-example‘,
{ preload: preload, create: create }
);
// preload all assets here
function preload() {
game.load.image(‘HW', 'assets/pics/helloworld.png');
}
// attach everything to the stage here
function create() {
game.add.image(0, 0, 'HW');
}
Hello world!

Code and Examples
Working example: Meetup Rush && Xmas run 2k16
Meetup rush
Meetup participation reward system
http://mr.zero89.it
https://github.com/sH4rk0/meetupRush
Xmas run 2k16
Xmas 2k16 celebration game
http://xmas2016.zero89.it
https://github.com/sH4rk0/xmas2016

Tools and
Resources

Tools and Resources
• Tiled
Your free, easy to use and flexible tile map editor.
http://www.mapeditor.org
• Texture packer
The best sprite sheet generation tool on the market.
https://www.codeandweb.com/texturepacker
• Spriter
Spriter enables the "modular" method of creating silky-
smooth animations where key-frames are constructed
from small, re-useable images
http://www.brashmonkey.com/
Tools

Tools and Resources
• QICI
Free and opensource JavaScript library, based on free
and opensource game engine Phaser, with a web-
based comprehensive suite of HTML5 game making
editor.
https://github.com/qiciengine/qiciengine/
• Phaser editor
The tool to learn Phaser and code html5 games
http://phasereditor.boniatillo.com/
Editor on top

Tools and Resources
• Cocoon
Cocoon provides all the tools and services to build
awesome native HTML5 apps and games with a
simple workflow and all the power of Cordova
https://cocoon.io/
• PhoneGap
Reuse existing web development skills to quickly
make hybrid applications built with HTML, CSS and
JavaScript. Create experiences for multiple platforms
with a single codebase.
http://phonegap.com/
Deploy

Tools and Resources
• Enhance
Enhance modifies your app to automatically implement
third party services and start making money in few clicks.
https://enhance.fgl.com/
• Smaato
To give publishers full control over monetizing their
inventory. It’s the only integrated mobile monetization
solution bringing mobile, native, and programmatic
together on a unified platform.
https://www.smaato.com/
Monetize

Tools and Resources
• Telegram gaming platform
Telegram Bots can offer their users HTML5 games to
play solo or to compete against each other in groups
and one-on-one chats.
Games are a new type of content on Telegram that
your bot can send to users.
https://core.telegram.org/bots
https://core.telegram.org/bots/games
https://telegram.org/blog/games
Integration

Tools and Resources
Github: https://github.com/photonstorm/phaser-ce
Phaser homepage: http://www.phaser.io/
Phaser docs: http://docs.phaser.io/index.html
Phaser examples: http://examples.phaser.io/
Phaser forum: http://www.html5gamedevs.com/forum/14-phaser/
Phaser books: http://phaser.io/shop/books
Tutorial website: http://www.emanueleferonato.com/
Game Mechanic Explorer: http://gamemechanicexplorer.com/
Phaser Book: https://leanpub.com/html5shootemupinanafternoon
Blogger website: https://www.truevalhalla.com
Game publishers: https://www.truevalhalla.com/
WWW Resources
Some input from: http://www.slideshare.net/IndieOutpost/making-html5-games-with-phaser

Introduction to Phaser.js

Recomendados

Recomendados

Más contenido relacionado

La actualidad más candente

La actualidad más candente (20)

Similar a Introduction to Phaser.js

Similar a Introduction to Phaser.js (20)

Último

Último (20)

Introduction to Phaser.js