Pixi’VN전환
디졸브, 페이드, 무브, 푸시, 줌 전환을 비롯해 Pixi’VN이 canvas 컴포넌트를 표시하고 제거하기 위해 제공하는 내장 전환 효과에 대해 알아보세요. 게임 흐름에 고급 시각 효과를 적용하기 위해 전환을 커스터마이즈하거나 직접 만드는 방법을 알아보세요.
Pixi’VN은 canvas 컴포넌트를 표시하거나 제거하기 위한 다양한 전환 효과를 제공하며, 나만의 전환 만들기 기능도 제공합니다.
사용자 정의 기능
Pixi’VN 팀은 이 라이브러리를 더욱 완성도 있게 만들기 위한 새로운 제안과 기여를 환영합니다. 아래 채팅에서 여러분의 전환을 자유롭게 공유하거나 제안해 주세요!
나만의 전환을 만드는 것은 간단합니다. canvas.animate를 사용하여 커스텀 효과를 정의하세요.
시작하는 데 도움이 되도록, 다음은 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];
}
}이전 컴포넌트 교체 또는 제거
동일한 alias를 가진 컴포넌트가 이미 존재하는 경우, 이를 교체되도록 두거나 다음과 같이 할 수 있습니다: