useMaskfunctionhooknacatamalon
useMask(options: TMaskOptions) => TMaskMakes a mask: what keeps objects, and everything under them, to a rectangle or to the shape of
another object, so nothing of them is drawn, or touched by the pointer, outside it. It masks
nothing until it is added to something, and can be added to as many objects as want it: a map
and its enemies, and not the HUD.
rectkeeps to a rectangle in the space of each object it is added to. Square to the screen it costs nothing at all.bykeeps to the shape of another object: everything that object and the ones under it draw, sprites by their pictures, shapes, texts, added together. That object is not drawn itself unlessshowShape, and it moves, turns, grows and is tweened like any other.channel: 'luminance'reads a black and white cut-out: white shows, black cuts.invertdraws only outside the shape.softlets the shape through as much as it is there, a soft edge or a fade, and is the only kind that costs a picture of its own; the others cut hard, in or out at half way, which is what pixel art wants.
An object has one mask. One mask inside another keeps to both: put each on its own object, one
inside the other. zIndex sorts what is masked as it always did. A mask goes away with the object
it was asked for in, and everything it masked is drawn whole again.
Parameters
optionsTMaskOptionsWhat it keeps to (
rectorby) and how.
Example
const Flashlight = () => {
useTransform({ x: 100, y: 80 });
createSprite({ texture: 'cone' });
};
const Ground = () => {
createSprite({ texture: 'cave' });
};
const Bats = () => {
createSprite({ texture: 'bat', transform: { x: 200, y: 60 } });
};
export const Cave: TSceneFn = () => {
const light = useSpawn(Flashlight)();
const mask = useMask({ by: light, soft: true });
mask.add(useSpawn(Ground)());
mask.add(useSpawn(Bats)());
useTween()({ from: 40, to: 300, duration: 2, yoyo: true, loop: true, onUpdate: (x) => { light.transform!.x = x; } }).play();
return createScene();
};
const Inventory = () => {
useMask({ rect: { x: 0, y: 0, width: 200, height: 120 } }).add(useSelf());
createSprite({ texture: 'items' });
};