FlipX and FlipY

You can mirror a Quad across the X or Y axis by setting scale.x or scale.y to a negative value. However, this will also affect children.

quad.flipX and quad.flipY can be used to independently flip the Quad without affecting its children.

Scale:

• Affects the scale of children
• Defaults to 1, 1

FlipX / FlipY:

• Affects only the quad that the values are set for
• Defaults to false, false.

import { Toodle } from "@blooper.gg/toodle";

const canvas = document.querySelector("canvas")!;
const toodle = await Toodle.attach(canvas, { filter: "nearest" });

await toodle.assets.loadTextures({
  apple: new URL("https://toodle.gg/img/ItemApple.png"),
  banana: new URL("https://toodle.gg/img/ItemBanana.png"),
});

// Declare our first apple quad with an inverted scale on both the x and y axis...
const scaleApple = toodle.Quad("apple", {
  position: { x: -100, y: 0 },
  scale: { x: -1, y: -1 },
});
scaleApple.add(
  toodle.Quad("banana", {
    position: { x: 25, y: 25 },
  }),
);

//Declare our second apple quad with the flipX and flipY values set to true...
const flipApple = toodle.Quad("apple", {
  position: { x: 100, y: 0 },
  flipX: true,
  flipY: true,
});
flipApple.add(
  toodle.Quad("banana", {
    position: { x: 25, y: 25 },
  }),
);

toodle.startFrame();
toodle.draw(scaleApple);
toodle.draw(flipApple);
toodle.endFrame();