Game Objects
The retained-mode display list — what game objects are, how the transform hierarchy works, and when to use which built-in type.
A Game Object is anything that lives in the scene graph and can be rendered, transformed, or hit-tested. Phaser uses retained-mode rendering: you create objects once, mutate their properties, and the renderer draws whatever currently exists. There is no per-frame “draw a sprite at (x, y)” call.
The built-in types
| Type | Use when |
|---|---|
Image | A static textured rectangle. No animation, no per-frame logic. |
Sprite | An Image with an animation manager attached. |
Text | Rendered text. Cheap if you don’t change it every frame. |
BitmapText | Text rendered from a font atlas. Cheap even if you mutate it. |
Container | A group of children sharing a transform. |
Graphics | Immediate-mode shapes drawn into a single object. |
TileSprite | A texture tiled across a region; cheap for backgrounds. |
Rule of thumb: reach for Image first; promote to Sprite only when you need animations.
The transform hierarchy
Containers form a tree. Each child’s world transform is its local transform composed with its parent’s. This is how you build composite objects:
const ship = this.add.container(200, 200);
ship.add(this.add.image(0, 0, 'hull'));
ship.add(this.add.image(0, -20, 'turret'));
ship.setAngle(45); // rotates hull and turret together
Adding vs. creating
this.add.image(...) both creates an object and adds it to the scene’s display list. To create without adding (e.g. to add it to a container only), use this.make.image(...).