Detecting Touches

To check if your shape is overlapping another one, use self.isTouching(otherId) — where otherId is the other shape's name, exactly as it shows on its tab (like "cube1" or "circle2").

export function update(self) {
    if (self.isTouching("hazard")) {
        self.setColor("red");
    }
}

This shape turns red the whole time it's overlapping the shape called hazard, and back to normal the moment they separate — because isTouching() is checked fresh, every single frame.

That's exactly what makes it right for some things and wrong for others. isTouching() returns true on every frame the two shapes overlap — dozens of times a second if they stay touching. That's perfect for something that should keep happening the whole time contact lasts, like losing health while standing in fire. It's the wrong tool for something that should happen once per hit, like a score going up — for that, see "Only Once, Not Every Frame," next.

export function update(self) {
    if (self.isTouching("fire")) {
        self.health -= 1; // ticks down every frame you're standing in it
    }
}