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.

Timestamps

• 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

---

Resources
Pixi.js
https://www.pixijs.com/
Sprite sheet packer
https://www.codeandweb.com/free-sprite-sheet-packer
Filters repository
https://github.com/pixijs/filters
Examples
https://pixijs.io/examples/#/demos-basic/container.js
A bit deeper guide (care though it’s outdated)
https://github.com/kittykatattack/learningPixi
Sprite sheets
https://www.spriters-resource.com/genesis_32x_scd/ps4/sheet/45444/
https://retrogamezone.co.uk/littlesamson.htm
Soundtrack
https://soundcloud.com/8bitthemes/the-first-night-of-the-journey

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