2D Rendering

Image

An Image can be either a source texture or a rendering target. The screen passed to Spot::draw is the default screen target:

screen.draw(
    ctx,
    &self.sprite,
    DrawOption::default()
        .with_position([Pt(320.0), Pt(180.0)])
        .with_scale([2.0, 2.0])
        .with_rotation(0.25)
        .with_layer(10),
);

Coordinate system

2D drawing uses screen-space logical points. The origin is the top-left corner of the render target: x grows to the right and y grows downward. DrawOption::with_position([x, y]) places the top-left corner of the image at that point before scale, rotation, and layer ordering are applied.

Raw RGBA pixel data uses the same row-major order: pixel (0, 0) is the top-left pixel, then pixels continue left to right across each row, followed by the next row below.

Images smaller than 512 pixels are automatically placed in a texture atlas to reduce state changes and draw calls. Slice sprite sheets with Image::sub_image without managing separate textures.

Encoded images

With the utils feature enabled, decode PNG, JPEG, or WebP data while preserving pixel dimensions:

let decoded = image::load_from_memory(include_bytes!("sprite.png"))?;
let sprite = spottedcat::utils::image::from_image(ctx, &decoded)?;

Use AsyncImageLoader to read and decode larger asset sets in the background. Check completion and slice each sheet once in update to avoid blocking the frame loop.

Text

Text provides high-level layout with custom fonts, wrapping, color, and strokes. Register fonts with the Context first; measurement and drawing live in the spottedcat::text domain and on the target Image.

Offscreen rendering

The lower-level Texture type can create rendering targets. Draw several elements into an offscreen Image, then draw that Image normally for minimaps, cached UI, and post-processing chains.