sprite

Sprite

Sprite component.

Examples

The easiest way to use sprites is using a spritesheet (a.k.a. Texture Atlas). A Spritesheet is a combination of a large image composed of smaller images and a json file. We even create our own tool to build a spritesheet from separate images.

Pencil.js offer an easy way to load and use a spritesheet.

import { Sprite } from "pencil.js";

Sprite.sheet("spritesheet.json")
    .then((sheet) => {
        const position = scene.center;
        const selector = "image_*.png";
        const options = {
            speed: 1, // Change frame every draw call (~60 fps)
            loop: true, // Repeat the animation indefinitely
        };

        const sprite = sheet.extract(position, selector, options);
        // Equivalent to
        const sprite = new Sprite(position, sheet.file, sheet.get(selector), options);

        scene.add(sprite).startLoop();
    });

You can also use the Sprite class directly if you prefer, but you'll need to fill the frames list yourself.

import Sprite from "@pencil.js/sprite";

const position = scene.center;
const url = "sprite-sheet.png";
const frames = [
   // list of frames data
];
const options = {
    speed: 1,
    loop: true,
};
const sprite = new Sprite(position, url, frames, options);
scene.add(sprite).startLoop();

SpriteOptions

Inherit from ImageOptions.

Name	Type	Default	Comment
speed	Number	1	Frame rate of the animation (1 means about 60 frame per seconds, 0 means stopped)
loop	Boolean	true	Should the animation start over indefinitely