Übergänge
Erfahren Sie mehr über die integrierten Übergangseffekte in Pixi’VN zum Anzeigen und Entfernen von canvas-Komponenten, einschließlich Dissolve-, Fade-, Move-, Push- und Zoom-Übergängen. Entdecken Sie, wie Sie eigene Übergänge anpassen oder erstellen können, um fortgeschrittene visuelle Effekte im Ablauf Ihres Spiels zu erzeugen.
Pixi’VN bietet verschiedene Übergangseffekte zum Anzeigen oder Entfernen einer canvas-Komponente sowie die Möglichkeit, eigene Übergänge zu erstellen.
Benutzerdefinierte Funktionalität
Das Pixi’VN-Team freut sich über neue Vorschläge und Beiträge, um diese Bibliothek noch vollständiger zu machen. Teilen oder schlagen Sie Ihren Übergang gerne im Chat unten vor!
Einen eigenen Übergang zu erstellen ist einfach: Verwenden Sie canvas.animate, um benutzerdefinierte Effekte zu definieren.
Um Ihnen den Einstieg zu erleichtern, hier eine vereinfachte Version von 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];
}
}Die vorherige Komponente ersetzen oder entfernen
Wenn bereits eine Komponente mit demselben alias existiert, können Sie sie ersetzen lassen, oder: