Skip to content

Scale Manager

samme edited this page Jun 15, 2022 · 18 revisions

A debug view of the scale manager's values

It's on the game's scale or this.scale in a scene.

Configure in the scale property of the game config.

Easy mode

Use scale mode FIT and skip the rest.

Parent

The scale parent is where you want to insert the game canvas.

There's no warning if you give a bad parent value, so you may need to verify once by looking in the DOM Inspector.

Scaling/resizing

The Scale Manager does whole-canvas scaling or resizing, depending on the scale mode.

The scaling modes are FIT, ENVELOP, HEIGHT_CONTROLS_WIDTH, and WIDTH_CONTROLS_HEIGHT. All scaling involves some distortion, and scaling up will lose detail. Scaling means canvas pixels are mapped onto CSS pixels, e.g.,

<canvas width=100 height=100 style="width: 200px; height: 200px"></canvas>

NONE

No scaling or resizing, but it's still running and emits events.

FIT

Scale to fit, meaning the largest size where both canvas dimensions don't exceed the parent. If the aspect ratios don't match, there will be gaps ("bars") one one axis.

ENVELOP, HEIGHT_CONTROLS_WIDTH, WIDTH_CONTROLS_HEIGHT

Scale to fill, meaning the smallest size where both canvas dimensions meet the parent. If the aspect ratios don't match, the canvas will be clipped on one axis. You should ensure that only nonessential game content gets hidden.

RESIZE

The canvas is resized to match the parent exactly.

Clone this wiki locally