Transitions
Découvrez les effets de transition intégrés à Pixi’VN pour afficher et supprimer des composants canvas, notamment les transitions de fondu enchaîné, de fondu, de déplacement, de poussée et de zoom. Découvrez comment personnaliser ou créer vos propres transitions pour des effets visuels avancés dans le déroulement de votre jeu.
Pixi’VN propose divers effets de transition pour afficher ou supprimer un composant canvas, ainsi que la possibilité de créer vos propres transitions.
Fonctionnalité personnalisée
L'équipe Pixi’VN accueille avec plaisir les nouvelles propositions et contributions pour rendre cette bibliothèque encore plus complète. N'hésitez pas à partager ou proposer votre transition dans le chat ci-dessous !
Créer votre propre transition est simple : utilisez canvas.animate pour définir des effets personnalisés.
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];
}
}Remplacer ou supprimer le composant précédent
Si un composant avec le même alias existe déjà, vous pouvez le laisser être remplacé, ou :