All examples · Sprites and 2D · As Markdown, for AIs

Masks

What this example shows

A mask keeps the objects it is added to, and everything under them, to a rectangle or to the shape of another object. useMask makes it and it masks nothing until you add to it, so one mask can keep a map and its enemies and leave the HUD alone.

Top left, a list scrolling inside a window: a rectangle square to the screen costs nothing. Top right, a round torch over a wall of tiles: only what it lights is drawn, and the pointer only touches what is drawn. Move the mouse over the tiles. Bottom left, invert: true cuts a star out of a wall, and bottom right, soft: true with channel: 'luminance' lets the stripes through as much as a black and white spot painted in code is white. Inside the spot, a bar with a turned mask of its own keeps to both.

A mask's shape is an object like any other: it moves, turns and is animated like the rest, and it is not drawn unless the mask says showShape: true.

Starting
Starting
—