Transiciones
Obtén información sobre los efectos de transición integrados en Pixi’VN para mostrar y eliminar componentes de canvas, incluidas las transiciones de disolución, desvanecimiento, desplazamiento, empuje y zoom. Descubre cómo personalizar o crear tus propias transiciones para lograr efectos visuales avanzados en el flujo de tu juego.
Pixi’VN ofrece varios efectos de transición para mostrar o eliminar un componente de canvas, así como la posibilidad de crear tus propias transiciones.
Funcionalidad personalizada
El equipo de Pixi’VN da la bienvenida a nuevas propuestas y contribuciones para hacer esta biblioteca aún más completa. ¡Siéntete libre de compartir o proponer tu transición en el chat de abajo!
Crear tu propia transición es sencillo: usa canvas.animate para definir efectos personalizados.
To help you get started, here is a simplified version of transitions.showWithDissolve:
import { canvas, ImageSprite, UPDATE_PRIORITY } from "@drincs/pixi-vn";
import { AnimationOptions } from "@drincs/pixi-vn/motion";
export default async function showWithDissolve(
alias: string,
component: ImageSprite,
props: AnimationOptions = {},
priority?: UPDATE_PRIORITY,
): Promise<string[] | undefined> {
let { completeOnContinue = 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,
completeOnContinue,
},
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];
}
}Reemplazar o eliminar el componente anterior
Si ya existe un componente con el mismo alias, puedes dejar que se reemplace, o: