Phaser (game framework)

Last updated
Phaser
Developer(s) Richard Davey
Initial release12 April 2013;11 years ago (2013-04-12)
Stable release
v3.60.0 / 12 April 2023;13 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]

Contents

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

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]

Architecture and features

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. [9]

Rendering

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

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

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

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

Related Research Articles

<span class="mw-page-title-main">Adobe Flash</span> Discontinued multimedia platform used to add animation and interactivity to websites

Adobe Flash is a discontinued multimedia software platform used for production of animations, rich internet applications, desktop applications, mobile apps, mobile games, and embedded web browser video players.

Web3D, also called 3D Web, is a group of technologies to display and navigate websites using 3D computer graphics.

This is a comparison of web frameworks for front-end web development that are heavily reliant on JavaScript code for their behavior.

<span class="mw-page-title-main">WebGL</span> JavaScript bindings for OpenGL in web browsers

WebGL is a JavaScript API for rendering interactive 2D and 3D graphics within any compatible web browser without the use of plug-ins. WebGL is fully integrated with other web standards, allowing GPU-accelerated usage of physics, image processing, and effects in the HTML canvas. WebGL elements can be mixed with other HTML elements and composited with other parts of the page or page background.

Cocos2d is an open-source game development framework for creating 2D games and other graphical software for iOS, Android, Windows, macOS, Linux, HarmonyOS, OpenHarmony and web platforms. It is written in C++ and provides bindings for various programming languages, including C++, C#, Lua, and JavaScript. The framework offers a wide range of features, including physics, particle systems, skeletal animations, tile maps, and others.

<span class="mw-page-title-main">Away3D</span>

Away3D is an open-source platform for developing interactive 3D graphics for video games and applications, in Adobe Flash or HTML5. The platform consists of a 3D world editor, a 3D graphics engine, a 3D physics engine and a compressed 3D model file format (AWD).

Modernizr is a JavaScript library that detects the features available in a user's browser. This lets web pages avoid unsupported features by informing the user their browser is not supported or loading a polyfill. Modernizr aims to provide feature detection in a consistent and easy to use manner that discourages the use of failure-prone browser sniffing.

In software development, a polyfill is code that implements a feature of the development environment that does not natively support the feature. Most often, it refers to JavaScript code that implements an HTML5 or CSS web standard, either an established standard on older browsers, or a proposed standard on existing browsers. Polyfills are also used in PHP and Python.

Emscripten is an LLVM/Clang-based compiler that compiles C and C++ source code to WebAssembly, primarily for execution in web browsers.

<span class="mw-page-title-main">Three.js</span> JavaScript library for 3D graphics

Three.js is a cross-browser JavaScript library and application programming interface (API) used to create and display animated 3D computer graphics in a web browser using WebGL. The source code is hosted in a repository on GitHub.

<span class="mw-page-title-main">Simple and Fast Multimedia Library</span> Graphics and Multimedia Library written in C++

Simple and Fast Multimedia Library (SFML) is a cross-platform software development library designed to provide a simple application programming interface (API) to various multimedia components in computers. It is written in C++ with bindings available for Ada, C, Crystal, D, Euphoria, Go, Java, Julia, .NET, Nim, OCaml, Python, Ruby, and Rust. Experimental mobile ports were made available for Android and iOS with the release of SFML 2.2.

CopperLicht is an open-source JavaScript library for creating games and interactive 3D applications using WebGL, developed by Ambiera. The aim of the library is to provide an API for making it easier developing 3D content for the web. It is supposed to be used together with its commercial 3D world editor CopperCube, but it can also be used without.

<span class="mw-page-title-main">Godot (game engine)</span> Cross-platform, open-source game engine

Godot is a cross-platform, free and open-source game engine released under the permissive MIT license. It was initially developed in Buenos Aires by Argentine software developers Juan Linietsky and Ariel Manzur for several companies in Latin America prior to its public release in 2014. The development environment runs on many platforms, and can export to several more. It is designed to create both 2D and 3D games targeting PC, mobile, and web platforms and can also be used to develop non-game software, including editors.

<span class="mw-page-title-main">PlayCanvas</span>

PlayCanvas is an open-source 3D game engine/interactive 3D application engine alongside a proprietary cloud-hosted creation platform that allows for simultaneous editing from multiple computers via a browser-based interface. It runs in modern browsers that support WebGL, including Mozilla Firefox and Google Chrome. The engine is capable of rigid-body physics simulation, handling three-dimensional audio and 3D animations.

<span class="mw-page-title-main">OpenFL</span> Software framework for video games

OpenFL is a free and open-source software framework and platform for the creation of multi-platform applications and video games. OpenFL applications can be written in Haxe, JavaScript, or TypeScript, and may be published as standalone applications for several targets including iOS, Android, HTML5, Windows, macOS, Linux, WebAssembly, Flash, AIR, PlayStation 4, PlayStation 3, PlayStation Vita, Xbox One, Wii U, TiVo, Raspberry Pi, and Node.js.

Crosswalk Project was an open-source web app runtime built with the latest releases of Chromium and Blink from Google. The project was founded by Intel's Open Source Technology Center in September 2013.

LayaBox, also named Laya, is a Chinese-developed freeware framework which includes a web-based game engine named LayaAir which targets mobile and web platforms, as well as online publishing and digital distribution services. First announced on the Global Mobile Game Confederation in March 2015, it offers a feature set for developing multi-platform games.

Turbulenz was a video game development company based in the United Kingdom, and was focused on HTML5 game development. They created a HTML5 game engine also named Turbulenz. The company published third party video games as well as developing their own.

<span class="mw-page-title-main">Babylon.js</span>

Babylon.js is a JavaScript library and 3D engine for displaying real time 3D graphics in a web browser via HTML5. The source code is available on GitHub and distributed under the Apache License 2.0.

LÖVE is a free, open-source, cross-platform framework released under the zlib license for developing video games. The framework is written in C++ and uses Lua as its scripting language and is still maintained by its original developers. The framework is cross-platform supporting the platforms Microsoft Windows, macOS, Linux, Android, and iOS.

References

  1. ↑ "Phaser - JavaScripting".
  2. ↑ "How to Learn the Phaser HTML5 Game Engine".
  3. ↑ "Phaser - HTML5 Game Framework". GitHub . 2 November 2021.
  4. ↑ "Announcing Phaser (Flixel HTML5) and our Adobe Max session". 12 April 2013.
  5. ↑ "Phaser 1.0 and the journey we took to get there". 16 September 2013.
  6. ↑ "Phaser - Download - Phaser CE - Community Edition".
  7. ↑ "Phaser - The fast, fun and free HTML5 Game Framework". phaser.io. Retrieved 2018-05-15.
  8. ↑ "Phaser 3 Dev Log #148: Phaser 4 Announcement and a catch-up on Phaser 3.18 and 3.19 releases. - Phaser3 - Phaser". phaser.io. Retrieved 2020-04-26.
  9. ↑ "Same-origin policy - Web security MDN". mozilla.org. Retrieved 2021-09-30.
This page is based on this Wikipedia article
Text is available under the CC BY-SA 4.0 license; additional terms may apply.
Images, videos and audio are available under their respective licenses.