~1 min read

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

TypeUse when
ImageA static textured rectangle. No animation, no per-frame logic.
SpriteAn Image with an animation manager attached.
TextRendered text. Cheap if you don’t change it every frame.
BitmapTextText rendered from a font atlas. Cheap even if you mutate it.
ContainerA group of children sharing a transform.
GraphicsImmediate-mode shapes drawn into a single object.
TileSpriteA 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(...).

  • Scenes — owners of the display list.
  • Cameras — what determines which objects are drawn and where.