Phaser (game framework)

The topic of this article may not meet Wikipedia's notability guidelines for products and services. Please help to demonstrate the notability of the topic by citing reliable secondary sources that are independent of the topic and provide significant coverage of it beyond a mere trivial mention. If notability cannot be shown, the article is likely to be merged, redirected, or deleted. Find sources: "Phaser" game framework – news · newspapers · books · scholar · JSTOR (January 2018) (Learn how and when to remove this template message)

Phaser

Developer(s)	Richard Davey
Initial release	12 April 2013; 10 years ago (2013-04-12)
Stable release	v3.60.0 / 12 April 2023; 11 months ago (2023-04-12)
Repository	github.com/photonstorm/phaser
Written in	JavaScript, TypeScript
Type	application framework
License	MIT License
Website	phaser.io

Phaser is a 2D game framework used for making HTML5 games for desktop and mobile.^[1] It is free software developed by Photon Storm.^[2]

Phaser uses both a Canvas and WebGL renderer internally and can automatically swap between them based on browser support. This allows for fast rendering across desktop and mobile. It uses the Pixi.js library for rendering.

Games can be deployed to iOS, Android and native desktop apps via 3rd party tools like Apache Cordova and phonegap.^[3]

History[edit]

Richard Davey announced the first release of Phaser on a blog post in April 2013.^[4] Version 1.0 was released on September, incorporating the Pixi.js library for rendering.^[5]

The last official version of Phaser 2 was 2.6.2, but to allow improvements to the stable version while working on Phaser 3, a new repository was created: Phaser CE (Community Edition).^[6] Phaser CE is thus the currently recommended stable platform for development with Phaser.

Phaser 3.0.0 was released on February 13, 2018, and development is ongoing on GitHub.^[7] Most elements and features of the framework have been rebuilt from scratch using a fully modular structure and data-orientated approach. Phaser 3 includes a brand-new custom WebGL renderer designed for modern 2D games. Since then, much of the documentation and examples for users has been completed, and the majority of features have been implemented.

Currently in development is Phaser 4, announced August 19, 2019, which is an attempt to rewrite Phaser 3 in TypeScript. It is not an API rewrite and will instead be focused on porting the scripts that are currently in Phaser 3 to TypeScript.^[8]

The fundamental structure of an HTML5 game project[edit]

A HTML5 game project typically consists of the following folders and files:

1. Scripts/ (or js/): Within this folder one can find the essential framework file, which is typically referred to as “Phaser.js.” It typically contains a file that is dedicated to the game code that utilizes the framework.  
2. Src/: This folder is designated for storing source files. These files will eventually be compiled to create the complete game code.  
3. Assets/: Within this folder one can find various subfolders:
   • Images: This holds graphical assets like backgrounds and sprites.
   • Maps: This holds data necessary for any tilemaps used in the game.
   • Sounds: This is where sound effects for the game are kept, often in multiple formats.
   • Music: This contains music tracks for the game, also in multiple formats.
   • Misc: Miscellaneous data, such as dialog files, runtime scripts, and other special files, are stored here.
4. Index.html: This file serves as the entry point for the game. So, it sets up the game and initialises the loading process. JavaScript handles interactions after the initial setup. This html file may also include basic styling to position the game on the webpage and creates a user interface (UI) around it. ^[9]

Architecture and features[edit]

Phaser can run in any web browser that supports the canvas element. Games made with phaser are developed either in JavaScript or TypeScript. A web server is required to load resources like images, sounds, and other game files, as browsers require web pages to access files only from the same origin.^[10]

Rendering[edit]

Phaser can be either rendered in WebGL or a Canvas element, with an option to use WebGL if the browser supports it, or if a device doesn't support it, it will fall back to Canvas.

Physics[edit]

Phaser ships with 3 physics systems: Arcade Physics, Ninja Physics and P2.JS.

Arcade Physics is for high-speed AABB collision only. Ninja Physics allows for complex tiles and slopes, which are adequate for level scenery, and P2.JS is a full-body physics system, which supports constraints, springs, and polygon among others.

As of phaser 3.6, there are two major physics engines. These are called Arcade and Matter. There is also a less known engine similar to Arcade called Impact.

Arcade is probably the most used out of the three, since it is fast and easy to use. It uses axis-aligned (not rotated) rectangles and circles for collision detection on top of all basic physics engine features, like gravity, acceleration and drag. Its downside is that its features are limited. Complex hitboxes can be very difficult to make out of the supported shapes and multiple objects in close proximity can cause stability issues.

Matter is the more advanced physics engine but its complexity also rises with the added features. Matter is capable of simulating very realistic full-body physics. It supports a multitude of features such as rigid, compound and composite bodies, elastic collisions, stable stacking and physical properties like mass and density.

Impact holds many similarities to Arcade but brings some useful advantages. For example, Impact can have slopes in its tilemaps, which is not possible with Arcade's axis-aligned rectangles. However, the downside to this is that you have to use the Impact engine's developer's own "Weltmeister" editor for creating tilemaps.

Animation and Audio[edit]

Phaser is a powerful game engine that boasts outstanding animation and audio features, offering various tools and options to achieve an immersive gaming experience:

Animation: Phaser supports Spritesheets and texture atlases, which include multiple frames or character animations. Developers can use frame sequences to craft animations. Phaser's animation sequence capability allows developers to effortlessly create animation sequences for sprites, including control over looping, speed, and frame rates. From simple character movements to complex special effect animations. Furthermore, Phaser offers a built-in Tweening engine for crafting smooth transition animations. This is particularly useful for effects like fading, scaling, rotating, and can also be used for other complex special effect animations.

Audio: Phaser allows developers to manage and play web audio and HTML5 audio, providing a rich set of audio effect control options, including volume, mute, looping, fading in and out, and sound positioning. These attributes can be adjusted as needed. Additionally, Phaser supports preloading of audio files, ensuring sound plays without delay, ready for immediate playback, delivering a better gaming experience.

Comparison With Other Lightweight Game Engines[edit]

Phaser is an open source engine that focuses on 2D game development and is loved by many developers all over the world. Compared with other popular game engines, Phaser has its unique advantages and limitations.

Phaser vs. Cocos2d-x: Cocos2d-x is a cross-platform 2D/3D game development framework. Compared with Phaser, it supports more native platforms, such as iOS and Android. However, Phaser is based on HTML5, which makes it easier to integrate with modern web technologies and is suitable for rapid iteration and deployment of web platforms.

Phaser vs. Unity 2D: Unity is a well-known game development engine in the industry, supporting both 2D and 3D game development. Compared with Phaser, Unity provides more powerful editor tools and wider platform support. But Phaser is relatively lightweight, and the entry barrier may be lower for beginners, especially those who only want to focus on web game development.

Phaser vs. Three.js: Three.js is a cross-browser Javascript and application programming interface used to create and display animated 3D computer graphics in a web browser using WebGL. It is more general than Phaser. Instead, Phaser focuses more on browser-side game development.

When choosing a game engine, developers need to consider factors such as the target platform, project size, learning curve, and community support. Phaser is loved for its simplicity and ease of use, especially for those who want to quickly get started with web game development.

See also[edit]

• List of game engines
• Video game development

References[edit]

External links[edit]

• Official website
• Repository at GitHub
• Discussion community at Discord
• Discussion forum at Html5gamedevs.com