Awesome pixi.js tools

A list of useful libs/resources/tools for renowned html5 rendering framework

Websites and forums

github organization.

github main repository.

pixijs.com – official website.

docs – official documentation for the latest version of pixi.

examples – official examples list.

slack – official slack channel.

html5gamedev forum section – self-explanatory.

goodboydigital twitter – the creator.

goodboydigital blog – same as above.

Scene, textures, sprites, other augmentations

pixi-richtext – SDF text plugin.

pixi-display – allows to change rendering order of pixi-v4 containers without changing the stage, z-index for the win.

pixi-picture – top-quality render for sprites, removes any artifacts that are present in basic sprite.

pixi-tilemap – tilemaps with ease.

pixi-sdf-text – most efficient text rendering approach for webgl now in pixi.

pixi-multistyle-text – adds a MultiStyleText object inside pixi.js to easily create text using different styles.

pixicam – 2d camera for pixi.

pixi-super-atlas – create image atlas in your runtime, mipmaps supported.

pixi-heaven – runtime atlas, double tint for sprites, fastest glsl-calculated sprite masks.

pixi-viewport – a highly configurable viewport/2D camera designed to work with pixi.js.

canvas-latex – render latex formulas in pixi.js.

yy-rendersheet - generate on-the-fly spritesheets for pixi.js

Essential

ee3-timer – addition to ee3 and works with PIXI >4.

Debug

pixi-inspector – awesome plugin for chrome, visually inspect and modify nodes in your scene graph.

pixi-console - adds a container that shows console log. Useful on mobile devices.

gstatsjs - shows several texture-related metrics, like drawcalls. Works with Pixi, Phaser, can be integrated in custom renderers.

Animate

pixi-spine – port of official spine-ts runtime to pixi.

pixi-action – animations in Cocos2d-x style.

pixi-live2d – plugin for japanese animation tool live2d.

pixi-tween – tweens!

pixi-animate – plugin for Pixi.js which provides a runtime for content export using PixiAnimate Extension.

pixi-ease - pixi.js animation library using easing functions

[pixi-animate-extension] – Custom Platform Plugin for Adobe Animate CC (Formerly Adobe Flash CC) - to export animation for the Pixi.js renderer.

Filters, shaders, vfx

pixi-filters – some official filters.

GUI and interaction

EZGUI – bunch of crafted UI elements to use in your app.

gown.js – UI system for pixi.js inspired by feathers-ui.

dat.gui – DOM-based GUI can be used as dev tools on top of pixi.

heatmap – WebGL Heatmap Viewer for Bioinformatics and Big Data.

Audio

pixi-sound – official WebAudio API playback without any Flash shims or HTML Audio fallback.

sound.js – a micro-library to load, play and generate sound effects and music for games and interactive applications.

Particles

pixi-particles – official particles plugin.

pixi-particles-editor – see online demo.

Game Engines

chocolatier – ClojureScript game/engine using Pixi.js for rendering.

hexi – minimalistic game engine with pixi rendering.

pixi-engine - Provides a minimal engine-like structure for developing games with PixiJS

Integrations

pixi-haxe – externs for haxe compiler.

react-pixi – integration for facebook's framework.

pixi.scala.js – externs for scala.js compiler.

react-pixi-fiber – integration with react.js framework.

react-pixi – another react.js integration with custom renderer, reconcilation, etc.

(RobotlegsJS-Pixi)[https://github.com/RobotlegsJS/RobotlegsJS-Pixi] – RobotlegsJS framework integration with PixiJS.

Books & Learning

The Book of Shaders – ✨ comprehensive book about glsl with examples in javascript and online sandbox.

WebGL How it Works – ✨ if you have zero computer graphics knowledge, the set of articles helps to get your hands on webgl api and fundamentals.

kittenattack – check that person github repositories, most of them are incredibly suited for learning.

learningPixi – definitive guide to game development with pixi.

Forks

gameofbombs – custom pixi 3.0 with static transforms, 2d camera and 2.5d transforms. Used in production on gameofbombs.com.

Tools

TexturePacker – sprite sheet packer for PixiJS with graphical user interface and command line. Optimizes sprite sheets for best render quality and low memory usage.

spritesheet.js – is command-line spritesheet (a.k.a. Texture Atlas) generator written in node.js. Support export to pixi.js

SpriteIlluminator – normal map generator for sprites. Allows creating awesome dynamic light effects.

Games

polyball – fast, multiplayer, physics-driven tennis in two dimensions..

bemuse – web-based online rhythm action game. Based on HTML5 technologies, React, Redux and Pixi.js.

breakout – breakout game made in JavaScript and Pixi.js.

duckhunt – DuckHunt ported to JS and HTML5.

doom-lgs – a multiplayer Node.js light gun shooter inspired on Doom.

rockvomit – ragdoll rhythm game.

railways – railways game.

tetris – just a tetris.

wbwwb-ko

LegendOfMountainSea – 4X sandbox game with legend of Mountain and Sea Classics.