pixi.js tools

Posted 2021-01-12 honghong

Awesome pixi.js tools

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

Websites and forums

github organization. -pixi相关的git

github main repository - pixi git

pixijs.com – 官网.

docs – 官方文档

examples – 官方例子

html5gamedev forum section – pixi论坛

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-tiled – import tile maps from Tiled Editor.

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.

Essential

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

pixi-timer – manage event timers easily.

Debug

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

fconsole – very powerful debugging tools, requires a custom setup in your project.

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-dragonbones – plugin for royalty-free animation tool dragonbones.

pixi-tween – tweens!

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

gsap-pixi – plugin for popular gsap animation library.

Filters, shaders, vfx

PixiGlitch – various glitch effects .

pixi-filters – some official filters.

pixi-extra-filters – even more official filters, some of these can be outdated.

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.

pixi-keyboard – powerful keyboard handling for pixi.

text-input – text input add-on.

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

Audio

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

pixi-audio – another great audio plugin with native pixi structure.

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

PIXI.draggable – "easiest way to get drag & drop done in PIXI.js!"

Particles

pixi-particles – official particles plugin.

pixi-particles-editor – see online demo.

Game Engines

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

qiciengine(abandoned) – rich unity-like game creation tool.

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.

robotlegs-pixi – RobotlegsJS framework integration with PixiJS.

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

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.