Docs: from most to least helpful
Our Example Code: CPU Hat Adventure
Stage
- The
stage
is what we can see in the game, to see an object we’ve created we have to add it as a child to the stage using theaddChild
method. - If a student can’t see something they’ve created, this is probably where the issue lies.
- The order in which something is added to the stage matters, the most recently added will appear on top of everything: like adding something to a stack of paper.
Sprite
- Basically just a picture.
- Most commonly filled with the
fromImage
method. - Has lots of good documentation on the Pixi.JS website for actual Sprite methods.
Graphics
- A vector drawing of a shape (uses math to display it instead of pixels).
- There are specific
drawRect
anddrawCircle
functions to create shapes.
Sprite vs. Graphic vs. Display Object
- A
DisplayObject
is the (parent) abstract class of aSprite
and aGraphic
.- Generally only used in collision checking (see our example code)
- A sprite is basically just a picture while a
Graphic
can be many different shapes. - Graphics have their own functions which are pretty well covered in the Graphics documentation on Pixi.JS’s website.
Event Listeners
window.addEventListener('keydown', (e: KeyboardEvent): void => { ... }
'keydown'
andkeyup
are most common.- The above function is called whenever a key is pressed and held down; programmers usually assign this an anonymous function.
- Only allows for one key to be pressed at a time so will run into issues for multiplayer games.
Ticker
- Ticker updates the stage (what you’re seeing) 60 times a second so whatever you put in here will happen 60 times per second.
- Best used for checking for collisions, updating player positions, and other changes in the game’s state.
- Please please please don’t create any objects here, issues galore will arise. (There are exceptions to this)
"I can’t register more than one button press at a time..."
- Create boolean values to represent whether or not a button is currently being pressed.
- Handler =>
window.onkeydown
- Expectation => set booleans to true
- Handler =>
window.onkeyup
- Expectation => sets booleans to false
- Handler =>
- Use those booleans in the
ticker
method to update position or whatever the desired result is.
"Something isn’t appearing on my screen..."
- See if
displayObject
is added to stage.- Students may try to add an object to the stage but only display objects can be added like a graphics or a sprite.
- Check if object is being created in
ticker
method.- This creates the object 60 times per second and can create serious issues.
"Something won’t move..."
- Check if object is being created in
ticker
method.- This creates the object 60 times per second so it can’t be updated.