Size and Scale

Quads have a size and a scale property.

finalWidth = size.width * scale.x
finalHeight = size.height * scale.y

Size:

• Does not affect the size of children
• Defaults to the natural size of the texture, eg 32x32 for this sample texture

Scale:

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

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

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

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

const apple = toodle.Quad("apple");
apple.add(
  toodle.Quad("banana", {
    position: { x: 16, y: 16 },
  }),
);

const appleWithSizeChange = toodle.Quad("apple", {
  idealSize: {
    width: 100,
    height: 100,
  },
  position: { x: -100, y: 0 },
});
appleWithSizeChange.add(
  toodle.Quad("banana", {
    position: { x: 16, y: 16 },
  }),
);

const appleWithScaleChange = toodle.Quad("apple", {
  scale: { x: 3, y: 3 },
  position: { x: 100, y: 0 },
});
appleWithScaleChange.add(
  toodle.Quad("banana", {
    position: { x: 16, y: 16 },
  }),
);

toodle.startFrame();
toodle.draw(apple);
toodle.draw(appleWithSizeChange);
toodle.draw(appleWithScaleChange);
toodle.endFrame();