Pixi’VNTransizioni
Scopri gli effetti di transizione integrati in Pixi'VN per visualizzare e rimuovere i componenti del canvas, tra cui transizioni di dissolvenza, spostamento, push e zoom. Scopri come personalizzare o creare le tue transizioni per ottenere effetti visivi avanzati nel flusso del tuo gioco.
Pixi'VN offre vari effetti di transizione per mostrare o rimuovere un componente canvas, nonché la possibilità di creare le proprie transizioni.
Classe personalizzata
Il team di Pixi’VN accoglie con favore nuove proposte e contributi per rendere questa biblioteca ancora più completa. Puoi creare una discussione per condividere o proporre la tua transizione.
Creare la tua transizione è semplice: usa canvas.animate per definire effetti personalizzati.
Per aiutarti a iniziare, ecco una versione semplificata di 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];
}
}Sostituire o rimuovere il componente precedente
Se esiste già un componente con lo stesso alias, puoi lasciarlo sostituire oppure: