pixi-js-0.md

About this PixiJS Tutorial Series

I. Overview

This series of tutorials/lecture notes will get you started in creating highly visual web experiences with the PixiJS rendering engine.

II. Prerequisite knowledge

Before doing these exercises, you should have completed the entire web app series

III. How to get the most out of these tutorials

• Try out the code samples! Tweak and modify them! Most of the code samples are 100% complete. You just need to copy the code and paste it into a text file, and save it to your desktop. You can then make changes to the code and preview them in a web browser (we will be using Chrome)
• Be sure to answer all of the questions at the end of each section, and to do the review exercises.
• Check out all of the PixiJS resources, sample code, and demos that we link to.

IV. The Tutorials

1. Intro to PixiJS:
   1. PixiJS Resources
   2. "Hello PixiJS"
   3. Drawing Shapes
   4. Two More Shapes
   5. Adding DOM Button Events
   6. Sprites and Displaying Images & Running code on a server
2. ES6 Classes & PixiJS Animation
   1. ES6 Class Resources
   2. A simple ES6 class
   3. Inheritance
   4. Extending PIXI.Graphics
   5. Animation

V. Assignments

Refer to the mycourses dropboxes for due dates:

• Circle Blast! - part I
• Circle Blast! - part II
• Circle Blast! - part III
• Circle Blast! - part IV
• Project 3 - Sprite-based Game or Experience

VI. Demos

• Particle Demo
• Vector Demo
• Smooth Keyboard Control Demo