Articulated animations and effects

Articulated animations and effects are functions used to trigger combinations of multiple primitive animations and effects (Ticker). For example, the shakeEffect function is an articulated animation that uses multiple MoveTicker to create a shake effect.

Shake

The shakeEffect function is an articulated animation that shakes a canvas component (it uses multiple MoveTicker to create the shake effect).

This function has the following parameters:

• alias: The alias to identify the component.
• props: The properties of this effect. The properties are:
  • speed (Optional): A number that represents the speed of the shake effect.
  • shocksNumber (Optional): The number of shocks.
  • type (Optional): The type of shake effect.
  • maximumShockSize (Optional): The maximum size of the shock.
  • speedProgression (Optional): If the shake needs to increase or decrease in speed over time, this property can be used. You can read more about it here.
  • startOnlyIfHaveTexture (Optional): A boolean value. If true, the animation will alter the properties only if the canvas component has a non-empty texture. You can read more about it here.
• priority (Optional): The priority of the ticker.

import { CANVAS_APP_GAME_LAYER_ALIAS, newLabel, shakeEffect, showImage } from "@drincs/pixi-vn";

export const startLabel = newLabel("start_label", [
    async () => {
        await showImage("bg", "bg", { scale: 1.3 });
        await showImage("alien", "alien", { align: 0.5 });
        shakeEffect("alien"); 
    },
    async () => {
        shakeEffect(CANVAS_APP_GAME_LAYER_ALIAS); 
    },
]);

import { AssetsManifest } from "@drincs/pixi-vn";

/**
 * Manifest for the assets used in the game.
 * You can read more about the manifest here: https://pixijs.com/8.x/guides/components/assets#loading-multiple-assets
 */
const manifest: AssetsManifest = {
    bundles: [
        {
            name: "start",
            assets: [
                {
                    alias: "alien",
                    src: "https://pixijs.com/assets/eggHead.png",
                },
                {
                    alias: "bg",
                    src: "https://pixijs.com/assets/bg_grass.jpg",
                },
            ],
        },
    ],
};
export default manifest;