In this tutorial, we’re going to learn the fundamental parts of the Javascript library Pixi.js, like how to create and add elements to the canvas, animation, capturing mouse and keyboard events to move elements, using loaders to load assets like sprite sheets/tilesets and JSON files, and way more.
Note that you don’t necessarily need to be interested in developing games to learn this library, because it has many use cases.


  • 00:00 Intro - What is Pixi.js?
  • 00:47 Setting up
  • 02:20 Canvas properties
  • 04:16 Creating and adding shapes to the canvas
  • 11:21 Creating text
  • 13:25 Ticker
  • 15:33 Images, textures, and sprites
  • 17:10 Geometric transformations
  • 20:36 Pointer and keyboard events
  • 22:35 Containers and particle containers
  • 27:08 Loaders
  • 30:31 Tilesets/sprite sheets
  • 33:29 Sprite sheets the “.JSON” way
  • 36:31 Animating sprites
  • 39:09 Animating backgrounds/Infinite backgrounds
  • 41:57 Sound
  • 43:17 Filters
  • 44:41 Wrapping up

Sprite sheet packer
Filters repository
A bit deeper guide (care though it’s outdated)
Sprite sheets

#pixi #game-development #javascript #programming #developer

Pixi.js Tutorial For Complete Beginners - Create 2D Games & All Sorts Of Interactive Content With JS
17.00 GEEK