Pixi’VNTransitions
Learn about the built-in transition effects in Pixi’VN for showing and removing canvas components, including dissolve, fade, move, push, and zoom transitions. Discover how to customize or create your own transitions for advanced visual effects in your game's flow.
Pixi’VN provides various transition effects to show or remove a canvas component, as well as the ability to create your own transitions.
Custom class
The Pixi’VN Team welcomes new proposals and contributions to make this library even more complete. You can create a discussion to share or propose your transition.
Creating your own transition is simple: use canvas.animate to define custom effects.
To help you get started, here is a simplified version of showWithDissolve:
import { AnimationOptions, canvas, ImageSprite, UPDATE_PRIORITY } from "@drincs/pixi-vn";
export default async function showWithDissolve(
alias: string,
component: ImageSprite,
props: AnimationOptions = {},
priority?: UPDATE_PRIORITY
): Promise<string[] | undefined> {
let { forceCompleteBeforeNext = true, ...options } = props;
// add the new component
canvas.add(alias, component)
// edit the properties of the new component
component.alpha = 0;
// create the ticker and play it
let id = canvas.animate(
alias,
{
alpha: 1,
},
{
...options,
forceCompleteBeforeNext,
},
priority
);
// load the image if the image is not loaded
if (component.haveEmptyTexture) {
await component.load();
}
// return the ids of the tickers
if (id) {
return [id];
}
}Replace or remove the previous component
If a component with the same alias already exists, you can let it be replaced, or: