Images

Images creates named Graphic objects and draws them with the shared canvas context. Game creates the service with its rendering context and exposes it as services.images.

Quick Start

const imageDefinitions = [
  { name: 'logo', path: '/images/logo.png', width: 128, height: 64 },
];

const images = this.game.images;
images.render('logo', 24, 24);

flowchart LR
	A[ImageDefinition] --> B[Images.load]
	B --> C[Graphic]
	C --> D[Browser Image]
	E[Images.render name x y] --> C
	C --> F[context.drawImage]

Constructor

new Images(context)

new Images(context);

Creates an image service that will render through context, a CanvasRenderingContext2D. Game constructs this service for you.

Methods

load(imageDefinitions)

images.load(imageDefinitions);

Creates a Graphic for each image definition and stores it under definition.name.

Definition field	Meaning
name	Stable key used by get() and render().
path	URL of the image file.
width	Natural logical width used to construct and render the graphic.
height	Natural logical height used to construct and render the graphic.

Creating a Graphic starts the browser image load; load() does not wait for readiness.

get(name)

const logo = images.get('logo');

Returns the named Graphic. The implementation expects a loaded name; requesting an unknown name returns undefined at runtime even though the JSDoc return type is Graphic.

render(name, x, y)

images.render('logo', 24, 24);

Draws the complete graphic at the logical canvas coordinates x and y, using the dimensions from its definition.

Use Graphic.render() directly when you need to supply a different destination width or height. Use Sprite when drawing only a source rectangle from a larger image.

Load before drawing

Register images through Game’s image definitions before rendering them. A missing name causes rendering to fail, and a newly created browser image may not have finished loading on the first frame.

Internal state

images is a Record<string, Graphic> of loaded graphics. It is useful for debugging, but use get() and render() in application code rather than modifying the record directly.