LogoPixi’VN
Canvas (WebGL)/Animations and Effects/Primitives (ticker)

Tickers methods

Edit on GitHubTranslate on Crowdin

To play, pause, or stop a ticker, you must use the functions of the canvas.

It is important to keep the following behaviors in mind:

  • If a ticker does not have any canvas components associated with it, it will be deleted.
  • If you remove a canvas component, your alias will be unlinked from the ticker.
  • If you add a canvas component with an alias that already exists, the new component will replace the old one. The new component will inherit the tickers of the old component.

Run a tickerRun a ticker

To add a ticker you must use the canvas.addTicker function. This function receives the following parameters:

  • canvasElementAlias: The alias of the canvas element that will use the ticker. You can pass a string or an array of strings. If you pass an array of strings, the ticker will be associated with all canvas components.
  • ticker: The ticker instance to be run.

The function returns the id of the ticker that was added.

import { canvas, newLabel, RotateTicker, showImage } from "@drincs/pixi-vn";

export const startLabel = newLabel("start_label", [
    async () => {
        await showImage("egg_head", "egg_head", { yAlign: 0.5, xAlign: 0.25, anchor: 0.5 });
        await showImage("flower_top", "flower_top", { yAlign: 0.5, xAlign: 0.75, anchor: 0.5 });
        let tikerId = canvas.addTicker(["egg_head", "flower_top"], new RotateTicker({})); 
    },
]);

Remove a ticker

To remove a ticker, you must use the canvas.removeTicker function. This function receives the following parameters:

  • tikerId: The id or an array of ids of the ticker to be removed.
import { canvas, newLabel, RotateTicker, showImage, storage } from "@drincs/pixi-vn";

export const startLabel = newLabel("start_label", [
    async () => {
        await showImage("egg_head", "egg_head", { yAlign: 0.5, xAlign: 0.25, anchor: 0.5 });
        await showImage("flower_top", "flower_top", { yAlign: 0.5, xAlign: 0.75, anchor: 0.5 });
        let tikerId = canvas.addTicker(["egg_head", "flower_top"], new RotateTicker({}));
        storage.setVariable("tiker_id", tikerId);
    },
    () => {
        let tikerId = storage.getVariable<string>("tiker_id");
        tikerId && canvas.removeTicker(tikerId); 
    },
]);

For unlink a canvas component from a ticker class you can use the canvas.unlinkComponentFromTicker function. This function receives the following parameters:

  • alias: The alias of the canvas element that will be unlinked from the ticker. You can pass a string or an array of strings.
  • ticker (Optional): The ticker class to be unlinked. If you do not pass this parameter, all tickers will be unlinked.
import { canvas, newLabel, RotateTicker, showImage } from "@drincs/pixi-vn";

export const startLabel = newLabel("start_label", [
    async () => {
        await showImage("egg_head", "egg_head", { yAlign: 0.5, xAlign: 0.25, anchor: 0.5 });
        await showImage("flower_top", "flower_top", { yAlign: 0.5, xAlign: 0.75, anchor: 0.5 });
        let tikerId = canvas.addTicker(["egg_head", "flower_top"], new RotateTicker({}));
    },
    () => {
        canvas.unlinkComponentFromTicker("egg_head", RotateTicker); 
    },
]);

Force completion of the transition at the end of the step

When the animation has a goal to reach, such as a destination, we sometimes need the animation to reach the goal before the current step ends.

To do this, you can use the canvas.completeTickerOnStepEnd function. This function receives the following parameters:

  • step: The step that the ticker must be completed before the next step. It receives an object with the following properties:
    • id: The id of the step.
    • alias: If it is a sequence of tickers, the alias of the sequence of tickers.
import { canvas, MoveTicker, narration, newLabel, showImage } from "@drincs/pixi-vn";

export const startLabel = newLabel("start_label", [
    async () => {
        await showImage("egg_head", "egg_head", { yAlign: 0, xAlign: 0, anchor: 0 });
        let tikerId = canvas.addTicker(["egg_head"],
            new MoveTicker({
                destination: { x: 1, y: 0, type: "align" },
                speed: 1,
            })
        );
        tikerId && canvas.completeTickerOnStepEnd({ id: tikerId }); 
    },
    () => {
        narration.dialogue = "complete";
    },
]);

Pause and resume a ticker

To pause a ticker, you must use the canvas.pauseTicker function. This function receives the following parameters:

  • alias: The alias of the canvas element that will use the ticker.
  • tickerIdsExcluded: The tickers that will not be paused.

To resume a paused ticker, you must use the canvas.resumeTicker function. This function receives the following parameters:

  • alias: The alias of the canvas element that will use the ticker.
import { canvas, narration, newLabel, RotateTicker, showImage } from "@drincs/pixi-vn";

export const startLabel = newLabel("start_label", [
    async () => {
        await showImage("egg_head", "egg_head", { align: 0.5, anchor: 0.5 });
        let tikerId = canvas.addTicker(["egg_head"], new RotateTicker({}));
        narration.dialogue = "start";
    },
    () => {
        canvas.pauseTicker("egg_head"); 
        narration.dialogue = "pause";
    },
    () => {
        canvas.resumeTicker("egg_head"); 
        narration.dialogue = "resume";
    },
]);

Sequence of tickers

If you want to run a sequence of tickers, you can use the canvas.addTickersSequence function. This function receives the following parameters:

  • canvasElementAlias: The alias of the canvas element that will use the ticker. Please note that a component alias can only have one sequence sequence of tickers to it. If you add a new sequence of tickers to the same alias, the new sequence will replace the old one.
  • tickers: An array of tickers to be run in sequence.
import { canvas, MoveTicker, newLabel, RotateTicker, showImage } from "@drincs/pixi-vn";

export const startLabel = newLabel("start_label", [
async () => {
    await showImage("egg_head", "egg_head", { anchor: 0.5 });
    let tikerId = canvas.addTickersSequence("egg_head", [ 
        new MoveTicker({ 
            destination: { x: 0.5, y: 0.5, type: "align" }, 
        }), 
        new RotateTicker({ speed: 2, clockwise: false }, 2), 
    ]); 
},
]);

Pause

If you want to pause the steps for a while, you can use the Pause token. The Pause token receives the time in seconds to pause.

import { canvas, newLabel, Pause, RotateTicker, showImage } from "@drincs/pixi-vn";

export const startLabel = newLabel("start_label", [
    async () => {
        await showImage("egg_head", "egg_head", { anchor: 0.5, align: 0.5 });
        let tikerId = canvas.addTickersSequence("egg_head", [ 
            new RotateTicker({ speed: 1, clockwise: true }, 2), 
            Pause(1), 
            new RotateTicker({ speed: 1, clockwise: false }, 2), 
        ]); 
    },
]);

Repeat

If you want to repeat the steps, you can use the Repeat token.

import { canvas, newLabel, Repeat, RotateTicker, showImage } from "@drincs/pixi-vn";

export const startLabel = newLabel("start_label", [
    async () => {
        await showImage("egg_head", "egg_head", {
            anchor: 0.5,
            align: 0.5,
        });
        let tikerId = canvas.addTickersSequence("egg_head", [ 
            new RotateTicker({ speed: 1, clockwise: true }, 2), 
            new RotateTicker({ speed: 2, clockwise: false }, 2), 
            Repeat, 
        ]); 
    },
]);

Primitives (ticker)

Previous Page

Articulated

Next Page