Pixi’VN

Appearance

Tickers ​

The PixiJS Ticker is a class that manages the update loop. It is used to animate the canvas elements.

In Pixi’VN, you can use the Ticker, but through functions of the canvas class. The reason is that this way I can keep track of the Tickers and delete those that are no longer used.

Create a Ticker ​

In Pixi.js, you can add a Ticker by passing a lambda as a parameter that will be executed on each frame.

In Pixi’VN, you must create a class tha extends TickerBase, add a decorator @tickerDecorator to the class and override the fn method.

@tickerDecorator is a decorator that save the ticker in memory. It have a optional parameter that is the id of the ticker (must be unique). If you don't pass the id, the ticker will be saved with the class name. ( How enable the decorators in TypeScript? )

typescript
@tickerDecorator() // or @tickerDecorator('RotateTicker')
export default class RotateTicker extends TickerBase<{ speed?: number, clockwise?: boolean }> {
    override fn(
        t: Ticker,
        args: {
            speed?: number,
            clockwise?: boolean,
        },
        aliases: string[]
    ): void {
        let speed = args.speed === undefined ? 0.1 : args.speed
        let clockwise = args.clockwise === undefined ? true : args.clockwise
        aliases.forEach((alias) => {
            let element = canvas.find(alias)
            if (element && element instanceof Container) {
                if (clockwise)
                    element.rotation += speed * t.deltaTime
                else
                    element.rotation -= speed * t.deltaTime
            }
        })
    }
}

Run a Ticker and associate with a Canvas Element ​

To add a Ticker you must use the canvas.addTicker function and pass the ticker class.

typescript
const texture = await Assets.load('https://pixijs.com/assets/eggHead.png');
const alien = CanvasSprite.from(texture);
canvas.add("alien", alien);

canvas.addTicker("alien", new RotateTicker({ speed: my_speed }))

If a ticket needs to update multiple canvas elements, you can pass an array of aliases to the addTicker function.

typescript
canvas.addTicker(["alien", "alien2"], new RotateTicker({ speed: my_speed }))

You can also set the duration of the ticket so that upon completion it is deleted.

typescript
canvas.addTicker("alien", new RotateTicker({ speed: my_speed }, 2))

Remove association between a Ticker and a Canvas Element ​

For unlink a Ticker from a Canvas Element you must use the canvas.removeAssociationBetweenTickerCanvasElement function and pass the alias of the canvas element and a ticker class.

If the ticker not have any more canvas elements associated, it will be deleted.

typescript
const texture = await Assets.load('https://pixijs.com/assets/eggHead.png');
const alien = CanvasSprite.from(texture);
canvas.add("alien", alien);

canvas.addTicker("alien", new RotateTicker({ speed: my_speed }))

// ...

canvas.removeAssociationBetweenTickerCanvasElement("alien", RotateTicker)

If you remove the Canvas Element associated with the Ticker, if the Ticker not have any more canvas elements associated, it will be deleted.

typescript
const texture = await Assets.load('https://pixijs.com/assets/eggHead.png');
const alien = CanvasSprite.from(texture);
canvas.add("alien", alien);

canvas.addTicker("alien", new RotateTicker({ speed: my_speed }))

// ...

canvas.remove("alien")

Run a succession of Tickers ​

You can run a succession of Tickers. This means you can start a list of tokens, so that when one ends the next begins.

For this you must use the narration.addTickersSteps function and pass the alias of the canvas element and an array of tickers.

typescript
canvas.addTickersSteps("alien", [
    new RotateTicker({ speed: 0.1, clockwise: true }, 2),
    new RotateTicker({ speed: 0.2, clockwise: false }, 2),
])

Pause ​

If you want to pause the steps for a while, you can use the Pause token.

typescript
canvas.addTickersSteps("alien", [
    new RotateTicker({ speed: 0.1, clockwise: true }, 2),
    Pause(1),
    new RotateTicker({ speed: 0.2, clockwise: false }, 2),
])

Repeat ​

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

typescript
canvas.addTickersSteps("alien", [
    new RotateTicker({ speed: 0.1, clockwise: true }, 2),
    new RotateTicker({ speed: 0.2, clockwise: false }, 2),
    Repeat,
])