PixiJS
Graphics · 4 stages · 28 units in the full series · 28 published in English
Series goal
Understand PixiJS 8 scene graphs and asynchronous resource lifetimes, and build an interactive 2D editor.
Prerequisites
Canvas 2D loops and textures
Practice approach and scope
Learning units are not calendar days. Read the explanation and tasks, check the completion criteria, then move on. Use each example as a starting point: change variables and observe the results. Built-in examples and tasks requiring a separate environment are identified separately. Opening an example does not complete a unit.
Existing unit IDs and notes are preserved. The original 01, 02, and 03 examples occupy positions 1, 14, and 28 in the expanded sequence, so the number in the address may differ from the learning order.
Only published English units are linked below. The full series has 28 units.
Learning path
Stage 1 · Application, Coordinates, and Display Objects
- 01. Application and Scene Graph — Editable example
- 02. Sprites and Anchors — Editable example
- 03. Containers and Local Coordinates — Editable example
- 04. Graphics 8 Shape API — Editable example
- 05. Text and Style Updates — Editable example
- 06. Layers and Drawing Order — Editable example
- 07. Responsive Screens and Resolution — Editable example
Stage 2 · Ticker, Assets, and Pointer Input
- 08. Ticker and Time Units — Editable example
- 09. Starting, Stopping, and Callback Cleanup — Editable example
- 10. Asynchronous Asset Loading — Editable example
- 11. Atlases and Frames — Editable example
- 12. Event Modes and Hit Areas — Editable example
- 13. Dragging and Global Pointers — Editable example
- 14. Assets and Events — Editable example
Stage 3 · Accessibility, Scene Composition, and Effects
- 15. Keyboard Input and Accessibility — Editable example
- 16. Scene Transitions and State Preservation — Editable example
- 17. Animation Frame Sequences — Editable example
- 18. Masks and Scroll Regions — Editable example
- 19. Filters and Their Scope — Editable example
- 20. Blend Modes and Order — Editable example
- 21. Caching Static UI — Editable example
Stage 4 · Resource Ownership, Large-Scale Rendering, and Measurement
- 22. Releasing Textures and Owning Caches — Editable example
- 23. Large Particle Sets and Feature Boundaries — Editable example
- 24. Offscreen Handling and Fewer Updates — Editable example
- 25. Forming a Batching Hypothesis — Editable example
- 26. Profiling and Quality Budgets — Editable example
- 27. Completing the 2D Scene Editor — Editable example
- 28. Batching and Quality — Editable example
Capstone project and deliverables
An atlas-based 2D scene editor, keyboard controls and failure recovery, and a comparison report on batching, filters, and resolution
Keep the implementation, run instructions, baseline and changed conditions, failure cases, and recovery steps together. Do not report unmeasured performance or tests you have not run as results.