Phaser vs PixiJS for making 2D games

This page summarizes the projects mentioned and recommended in the original post on dev.to

Our great sponsors
  • SurveyJS - Open-Source JSON Form Builder to Create Dynamic Forms Right in Your App
  • InfluxDB - Power Real-Time Data Analytics at Scale
  • WorkOS - The modern identity platform for B2B SaaS
  • matter-js

    a 2D rigid body physics engine for the web ▲● ■

    Another option is to add a third-party physics library such as Matter.js, although setting up and integrating the physics library can be tricky. If you need physics in your game, especially more complex physics effects, Phaser is a better choice.

  • particle-emitter

    A particle system for PixiJS

    PixiJS and Phaser have basic animation functionality for sprite sheet animation, tweens for smooth animation and they have particle systems to create effects such as an explosion. The particle system needs to be installed as a separate library for PixiJS.

  • SurveyJS

    Open-Source JSON Form Builder to Create Dynamic Forms Right in Your App. With SurveyJS form UI libraries, you can build and style forms in a fully-integrated drag & drop form builder, render them in your JS app, and store form submission data in any backend, inc. PHP, ASP.NET Core, and Node.js.

  • sound

    WebAudio API playback library, with filters. Modern audio playback for modern browsers.

    Both Phaser and PixiJS provide support for sound functionality. They provide a beginner-friendly interface for the Web Audio API. Phaser also supports legacy HTML Audio. For PixiJS, the PixiJS Sound library needs to be added. This library is a Web Audio API playback library that is built for modern browsers. It has a small bundle size (8.7 kB minified and GZipped) with no dependencies and is tree-shakable so you can remove unused modules in your production build.

  • PixiJS

    The HTML5 Creation Engine: Create beautiful digital content with the fastest, most flexible 2D WebGL renderer.

    Phaser and PixiJS are popular open-source JavaScript WebGL libraries that are used to create 2D browser games. They render graphics inside an HTML canvas element. Games can be developed using JavaScript or TypeScript. These libraries use WebGL for creating high-performance, complex visual effects. You can create simple browser games using vanilla JavaScript, but if you want to have performant rendering or advanced features in your game such as physics or realistic lighting, vanilla JavaScript is not a good choice. These libraries speed up game development by providing useful functionality and they improve performance.

  • Phaser

    Discontinued Phaser is a fun, free and fast 2D game framework for making HTML5 games for desktop and mobile web browsers, supporting Canvas and WebGL rendering. [Moved to: https://github.com/phaserjs/phaser] (by photonstorm)

    Phaser and PixiJS are popular open-source JavaScript WebGL libraries that are used to create 2D browser games. They render graphics inside an HTML canvas element. Games can be developed using JavaScript or TypeScript. These libraries use WebGL for creating high-performance, complex visual effects. You can create simple browser games using vanilla JavaScript, but if you want to have performant rendering or advanced features in your game such as physics or realistic lighting, vanilla JavaScript is not a good choice. These libraries speed up game development by providing useful functionality and they improve performance.

  • webaudio-examples

    Code examples that accompany the MDN Web Docs pages relating to Web Audio.

    Both Phaser and PixiJS provide support for sound functionality. They provide a beginner-friendly interface for the Web Audio API. Phaser also supports legacy HTML Audio. For PixiJS, the PixiJS Sound library needs to be added. This library is a Web Audio API playback library that is built for modern browsers. It has a small bundle size (8.7 kB minified and GZipped) with no dependencies and is tree-shakable so you can remove unused modules in your production build.

  • Apache Cordova

    Apache Cordova Android

    Browser games can be played on desktop or mobile devices; they may also be compiled to native mobile apps by using third-party tools such as Cordova. It's important that your 2D game has a responsive layout. Phaser has a Scale Manager that handles scaling, resizing, and alignment; it also has a full-screen mode. When using PixiJS, you need to create a responsive layout manually. This can be tricky with more complex layouts.

  • InfluxDB

    Power Real-Time Data Analytics at Scale. Get real-time insights from all types of time series data with InfluxDB. Ingest, query, and analyze billions of data points in real-time with unbounded cardinality.

NOTE: The number of mentions on this list indicates mentions on common posts plus user suggested alternatives. Hence, a higher number means a more popular project.

Suggest a related project

Related posts