Glossary — Phaser terms for web developers

A consolidated list of the Phaser 4 terms used throughout this encyclopedia. Phaser runs right in the browser on JavaScript/TypeScript, so the web analogies here are especially close.

Game and scenes

Game — the root object (new Phaser.Game(config)): it creates the canvas, starts the game loop, and wires up the render, input, audio, and scene managers. Analogy: the application root (ReactDOM.createRoot) mounted into the DOM once.

Scene — a self-contained “screen” or mode: it owns its display list, a camera, an input handler, and (optionally) a physics world. Analogy: a route in an SPA. Scenes aren’t mutually exclusive — several can run in parallel (gameplay + HUD + pause).

Lifecycle — the scene methods the engine calls in order: init(data) → preload() → create(data) → update(t, dt) … → shutdown(). Analogy: a component’s lifecycle hooks (constructor → mount → render each frame → unmount).

preload / create / update — preload queues assets; create builds the scene once loading finishes; update runs every frame. Analogy: fetch data → first render → animation frame (requestAnimationFrame).

On-screen objects

Game Object — anything you can place in a scene: Sprite, Image, Text, Container, Graphics, and so on. Analogy: a DOM element. Created via the this.add.* factory (e.g. this.add.sprite(...)).

Sprite — a game object with a texture that can also play animations. Analogy: an <img> that animates frame by frame.

Image — like a Sprite but without animation support; lighter on overhead. Use it when the frame is static.

Container — a grouping game object with its own transform: move the container and its children move with it. Analogy: a wrapper <div> that establishes a coordinate system for nested elements.

Group — a pool/collection of game objects for bulk operations and reuse (bullets, for example). Unlike a Container, it doesn’t impose a shared transform — it’s about managing many objects, not nesting them.

Display List — the ordered list of a scene’s game objects; order determines draw order (z-order). Analogy: the DOM tree, where element order affects stacking. It’s retained mode: you describe the objects once and the engine redraws them every frame for you.

Graphics and assets

Texture — bitmap image data in video memory that sprites reference by key. Analogy: an already-decoded image in the browser cache, ready to draw.

Sprite Sheet — a single image with a grid of equally sized frames. Phaser slices it into frames by index. The basis of frame-by-frame animation.

Texture Atlas — a single image plus JSON describing arbitrary frame rectangles (names, coordinates). More flexible than a sprite sheet and saves draw calls. Analogy: CSS sprites with a coordinate map.

Loader — the asset-loading system (this.load.image(...), this.load.audio(...)) that runs in preload. Analogy: a batched fetch with progress and completion events.

Cache — the typed store of loaded assets (textures, audio, JSON). Once loaded, an asset is available by key from any scene. Analogy: an in-memory store of loaded resources.

Loop and time

Game Loop — the main loop: each frame the engine updates logic (update) and redraws. Analogy: an endless requestAnimationFrame, but with scene, input, and physics management layered on top.

delta (dt) — how many milliseconds elapsed since the previous frame. Multiply movement by dt so speed is independent of frame rate. Analogy: the timestamp difference between two rAF calls.

Time / Clock — the scene’s timers and delayed events (this.time.addEvent, delayedCall). Analogy: setTimeout / setInterval, but tied to the game loop and the scene’s pause state.

Camera and input

Camera — decides which part of the world to draw and where: scroll, zoom, rotation, follow a target, effects (shake, fade). Every scene has this.cameras.main. Analogy: a viewport plus a CSS transform applied to all content.

Viewport — the rectangular screen region a camera draws into. You can have several cameras (split-screen, minimap).

Input / Pointer — the unified input layer: keyboard, pointer (mouse + touch), gamepad. A Pointer abstracts mouse and finger into one object. Analogy: DOM pointer events.

Physics

Arcade Physics — fast physics based on AABBs (axis-aligned bounding boxes) and circles: no rotation, no stacking. For platformers, shooters, and most arcade games. Comparable in “cheapness” to simple rectangle-intersection checks.

Body — the physics representation of a game object (position, velocity, acceleration, bounds). You change the body and the engine moves the sprite. Can be dynamic or static.

collision / overlap — a collider makes bodies push apart; an overlap only reports an intersection without moving anything (triggers, pickups). Analogy: a hit-test with no physical response.

Matter — the Matter.js integration: full rigid-body physics with rotation, stacking, joints, and arbitrary shapes. Heavier than Arcade — reach for it when you need “real” physics.

Animation and effects

Animation — a named sequence of texture frames played on a sprite (this.anims.create, sprite.play('run')). Analogy: a frame-by-frame CSS @keyframes for a sprite sheet.

Tween — smooth interpolation of an object’s properties over time (position, angle, alpha, scale): this.tweens.add({ targets, x: 100, duration: 300 }). Analogy: a CSS transition / the Web Animations API.

Easing — a tween’s easing function (Linear, Sine.easeInOut, Bounce …) that gives the motion its “character”. Analogy: cubic-bezier() / ease-in-out.

Tween Chain — a sequence of tweens run one after another. Analogy: a chain of .then() calls or a sequence of keyframes.

Particle Emitter — a source of particles (this.add.particles) for effects: sparks, smoke, explosions. Configured by speed, lifespan, and gravity; explode mode fires a one-shot burst.

Tilemaps

Tilemap — a grid of tiles describing a level, usually imported from the Tiled editor (this.make.tilemap). Analogy: a CSS grid of reusable cells, but for a game level.

Tileset — the source image of tiles that a tilemap references.

Tile / Layer — a Tile is one cell of the grid; a Layer is a layer of tiles (ground, decor, collision). Layers are drawn and collision-tested independently.

Rendering and scaling

WebGL / Canvas — the two render backends. Phaser.AUTO picks WebGL where supported, otherwise falls back to Canvas 2D. Analogy: choosing between GPU-accelerated and software rendering.

Shader / Filter — a GPU program for post effects (glow, blur, displacement). In Phaser 4 the built-in effects are exposed via filters (filters.external.addGlow(...)); for custom code you write a Shader game object in GLSL.

Pipeline / RenderNode — the low-level layer of the WebGL rendering pipeline. Rarely touched — only when you need full control over how objects reach the screen.

Scale Manager — controls how the canvas fits the window (FIT, RESIZE, ENVELOP, … modes). Analogy: responsive layout / object-fit for the game canvas.

Extending

Plugin — a reusable module that adds capabilities to the Game or a scene (global or scene-scoped). Analogy: an npm package / middleware that extends the app without touching its core.