トランジション
canvasコンポーネントの表示・削除に使用する、Pixi’VNに組み込まれたトランジション効果(ディゾルブ、フェード、ムーブ、プッシュ、ズームの各トランジションを含む)について学びます。 ゲームの流れに高度なビジュアル効果を加えるために、独自のトランジションをカスタマイズまたは作成する方法を学びます。
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を持つコンポーネントがすでに存在する場合、それを置き換えることも、次のようにすることもできます: