Modern HTML5 Game Development With

Phaser.JS & TypeScript

Phaser.JS is a robust mobile and desktop game framework, distributed under the MIT open source licence, based on HTML5 Canvas and WebGL technologies that allow you to build once and deploy across all modern web enabled devices. This presentation goes over the basic workflow of getting up and running with Phaser.JS by presenting a simple game designed for this presentation. Even if you are not interested in making games, this platform is great for any applications that require complex user interactions.

Presented By: Andrew Ribeiro | Git: Andrewnetwork

PROLOGUE

ADOBE FLASH KILLED THE INTERNET

• Introduced several vulnerabilities
• Decreased performance
• Acceptance of plugins
• Proprietary
• A terror for early smartphones

Savior: HTML5

• No plugins!
• All application functionality is provided by the browser.
• Complete web applications platform.
• Phaser brings out the power of the HTML5 stack for applications previously done not natively in the browser ( through plugins ).

​

Flash is a mess, Flash is a waste, Flash is a big fat mistake.

WANTED

DEAD

What you need to know-------------Prerequisites

• Like any subject, you can tackle anything if you have the passion for it.
• Essential To Know:
• JavaScript or TypeScript( If you wish to use it )
• Object Oriented Design
• Good to Know:
• Basics of Game Development
• HTML5 Features.
• A server side language/platform for data processing. ( PHP, ASP.NET, Node.js )

What we’re covering ----------------- overview

• Prologue ✓
• Prerequisites ✓
• The HTML5 Game Landscape
• TypeScript and JavaScript
• About Phaser
• Examples
• Features
• Pixi.js
• Physics
• Phaser Phases
• preload,create,update, & render
• Simple Example: Castlevania Loader
• Advanced Example: TankGame
• OpenGl

• Deployment
• Intel XDK
• Cordova
• Servers & Platforms
• Resources
• TypeScript
• 3D Game Development
• Phaser Examples
• Misc
• Questions & Comments

​

The HTML5 Game Framework/Engine Landscape

https://html5gameengine.com/

The HTML5 Game Framework/Engine Landscape

• Easiest Game Engines($_$)
• ImpactJS $99 ♡
• Construct 2 $120
• Open Source
• Phaser
• Babylon
• Three.js
• EaselJS ( Suite of tools. Mostly for ads )
• Why Phaser though?
• One of the largest and most passionate communities.
• Great financing model ( Opinion ).
• Great examples and documentation.
• Rich toolset.
• Cool name.
• Company that is committed to innovation and community.
• and...................................

The HTML5 Game Framework/Engine Landscape

It’s free.

It’s open source.

I know you’re cheap.

MIT not GPL... chill.

JavaScript &

• Open source strict superset of JavaScript developed and maintained by Microsoft.
• Adds optional static typing and class-based object-oriented programming to the language.
• ( First version: October 1, 2012, Current: 1.8 / January 2016 )
• TypeScript supports definition files.
• This enables other programs to use the values defined in the files as if they were statically typed TypeScript entities
• There are definition files for Phaser and Pixi.js
• TypeScript is transcompiled to JavaScript.
• Nice compile time type checking.
• Free IDE: http://typecsdev.com/

What is PhaserJS?

Open source HTML5 game framework useful for developing cross platform 2D games or complex user interfaces for the web.

• What phaser is not:
• Not a 3D game engine.
• Use BabylonJS
• Does not support VR.
• Not a standalone application.
• Open Source Licence: MIT.

Phaser Features......................................1

• Cross Platform WebGL and Canvas Rendering ( Pixi.js )
• Simple Asset Preloading
• Built in Physics Support
• Sprites: tweens, movement, translation, collision, textures, responsive input, pixel perfect click detection.
• Groups: grouping of sprites for pooling, recycling, and collision with custom callbacks.
• Animation: sprite sheets, texture packing, JSON data.
• Particles: easily create particle effects like explosions, constant streams like rain or fire.

Phaser Features......................................2

• Camera: pan around and follow sprites in the built in game world easily.
• Input: Multi-touch, mouse, keyboard support. Robust input management system.
• Sound: Web Audio and legacy HTML Audio support. Simplifies dealing with mobile audio.
• Tile Maps: CSV and Tiled-map data formats. Powerful tile manipulation: swap tiles, replace, delete, and update maps in realtime.
• Device Scaling: allows you to scale your game to fit any size screen. Control aspect ratios, minimum and maximum scales and full-screen support.

Useful HTML5 Features

• Connectivity
• Web Sockets
• Sever-sent events ( server can push events to client without request)
• WebRTC
• Offline & Storage
• Application Cache
• Web Storage
• Indexed Database API
• File API
• Offline and Online Events
• Performance & Misc
• Web Workers
• Fullscreen API
• Pointer Lock API
• Orientation Detection

​

Phaser Examples...........................Be creative!

Colbert Segment :

https://www.youtube.com/watch?v=aMTGpcASAHw

Bubble Burst Bernie

Game URL:

http://www.cbs.com/shows/the-late-show-with-stephen-colbert/bubble-burst-bernie/

Phaser Examples...........................Be creative!

Ramp Lab 1.3

Game URL:

http://www.kongregate.com/games/toweld/ramp-lab

Physics Simulation

Phaser Examples...........................Be creative!

Bridge Color Race

Game URL:

http://www.bridgecolorrace.com/

Mobile Game

Phaser Examples...........................Be creative!

Rival Command

Game URL:

https://www.digi-dom.co.uk/games/rival-command/

TypeScript Tutorial:

https://www.digi-dom.co.uk/rival-command-a-game-built-with-phaser-js/

Pixi.js............................PhaserJS Rendering

• Multi-Platform 2D webGL renderer with canvas fallback.
• Seamless canvas fallback means that you really can author once, and then deploy everywhere – in browser.
• Multi-touch support.
• WebGL filters.
• Tinting and Blend Modes
• Sprite Sheets
• Scene Graph
• Hierarchical arrangement of items.
• The backed of PhaserJS.
• https://pixijs.github.io/examples/

Physics Engines

• Arcade Physics
• An extremely light-weight AABB(collision detection) library perfect for low-powered devices.
• Ninja Physics
• Ninja Physics. The Ninja Physics system was created in Flash by Metanet Software and ported to JavaScript by Richard Davey. It allows for AABB and Circle to Tile collision. Tiles can be any of 34 different types, including slopes, convex and concave shapes.
• P2.js
• A full-body system with springs, constraints and advanced polygon support.
• Box2D
• Available as a premium plug-in, but there are free sources.

Phaser Phases..................................preload

• preload() is called first. Normally you'd use this to load your game assets (or those needed for the current State) You shouldn't create any objects in this method that require assets that you're also loading in this method, as they won't yet be available.

Phaser Phases...................................CREATE

• The constructor for the game state.
• create() is called once preload has completed, this includes the loading of any assets from the Loader. If you don't have a preload method then create is the first method called in your State.

Phaser Phases........................UPDATE & Render

• State.render()
• Called once per requestAnimationFrame.
• Nearly all display objects in Phaser render automatically, you don't need to tell them to render. However the render method is called AFTER the game renderer and plugins have rendered, so you're able to do any final post-processing style effects here. Note that this happens before plugins postRender takes place.
• State.update()
• Called game.time.desiredFps times per second (desiredFps is 60 by default).
• Called during the core game loop AFTER debug, physics, plugins and the Stage have had their preUpdate methods called. Called BEFORE Stage, Tweens, Sounds, Input, Physics, Particles and Plugins have had their postUpdate methods called.
• You can typically put all your update code in the update() function, but you will want to investigate if you can place it in render() as your game grows larger.

Simple Example: Castlevania Loader.............States

• We can create modular game elements by using states.
• Castlevania Loader States
• Boot
• Preloader
• Main Menu
• Level1
• We start the game by starting the

​

• Each state has its own phases.

​

Boot state.

Code: Basics/AdvancedPhaserSetup

TankGame...............................in typescript

Look at the Code

• Uses arcade physics
• Port of the JS EX

​

​

Code: TankGame

WebGl Filters

• Phaser’s rendering engine, Pixi.JS, supports OpenGl shaders.
• Phaser an Pixi calls shaders “filters.”
• See the built-in filters here: http://www.goodboydigital.com/pixijs-webgl-filters/
• WebGL support is the reason I’ve labeled this talk “Modern.”
• They are also stackable and nestable so a sprite can have multiple webGL filters attached to it with another sprite inside it with multiple webGL filters on that.
• See example: WebGL/Shaders_Filters/WebGL_PlaneDeformation/

PHASER

Deployment

Cordova

• Cordova wraps your HTML/JavaScript app into a native container which can access the device functions of several platforms. These functions are exposed via a unified JavaScript API, allowing you to easily write one set of code to target nearly every phone or tablet on the market today and publish to their app stores.

Intel XDK..........................................................................1

• All-in-one development environment to easily simulate, test, tune, and deploy games to many app stores using one code base.
• Game engine support for Construct2, Cocos2D, Phaser, Pixi.js*, and Easel.JS to easily import assets and code.
• The Intel XDK Game Asset Manager provides a central place to view game assets, including viewing animation (if any) and details. The Game Asset Manager also generates a code snippet for each selected asset that you can use to help you develop your HTML5/JavaScript/CSS game sources.

Intel XDK...........................................2

• Google Play Game Services and Apple Game Center services support to drive engagement, socialize, and reward players.
• W3C Gamepad API support enables high-impact game interaction using gamepad or joystick devices
• Apache Cordova plugins and APIs to monetize and market action-packed multi-OS games
• Works with Cordova
• “Easy Path to HTML5 App Development, Fast Path to Multi-OS App Stores”

Aws,Heroku,Web Servers.......Where to put your stuff

​

What do you use to host your web applications?

http://phaser.io/examples

RESOURCE

Really awesome categorized source code examples.

http://phaser.io/sandbox

RESOURCE

An online sandbox for running phaser code.

Phaser TypeScript Tutorials

RESOURCE

http://phaser.io/tutorials/how-to-use-phaser-with-typescript

Part 1

http://www.photonstorm.com/phaser/advanced-phaser-and-typescript-projects

Part 2

Misc Resources (1)

RESOURCE

Misc Resources (2)

RESOURCE

Misc Resources (3)

RESOURCE

Misc Resources (4)

RESOURCE

QUESTIONS& COMMMENTS

​

Presented By: Andrew Ribeiro

AndrewRIB.com

AndrewNetwork@gmail.com

FIND THIS PRESENTATION ONLINE:

​

https://github.com/Andrewnetwork/PhaserPresentation2016