Skip to content

animations effects

Jump to bottom
Black Ram edited this page Jul 29, 2024 · 1 revision

Animations and Effects

Pixi’VN provides a set of functions to create animations and effects in your visual novel.

Animations and Effects are based on Ticker. So for add, remove... animations and effects read the Tickers documentation.

Animations

Animations are Tickers that move a canvas element without altering the texture.

Move

For moving a canvas element in a x and y direction you can use the MoveTicker class. This Ticker edit the x and y properties of the canvas element. It is possible to start moving on all canvas element.

MoveTicker have a constructor that takes the a object with the following properties:

  • speed: is a number that represents the speed of the movement. default is 0.01.
  • destination: is a {y: number, x: number} that represents the destination of the movement. ( is required )
  • speedProgression: is a TickerProgrationType. default is undefined.
  • startOnlyIfHaveTexture: is a boolean that represents if the animation should start only if the canvas element have a texture not empty. default is false.

Rotate

For rotating a canvas element you can use the RotateTicker class. This Ticker edit the rotation property of the canvas element. It is possible to start rotation on all canvas element.

RotateTicker have a constructor that takes the a object with the following properties:

  • speed: is a number that represents the speed of the rotation. default is 0.01.
  • clockwise: is a boolean that represents the direction of the rotation. if true the rotation is clockwise, if false the rotation is counterclockwise. default is true.
  • speedProgression: is a TickerProgrationType. default is undefined.
  • startOnlyIfHaveTexture: is a boolean that represents if the animation should start only if the canvas element have a texture not empty. default is false.

for example:

const texture = await Assets.load('https://pixijs.com/assets/eggHead.png');
const alien = CanvasSprite.from(texture);
alien.anchor.set(0.5);
GameWindowManager.addCanvasElement("alien", alien);

// in this example we rotate the canvas element "alien" with a speed of 0.2
GameWindowManager.addTicker("alien", new RotateTicker({ speed: 0.2 }));
const texture = await Assets.load('https://pixijs.com/assets/eggHead.png');
const alien = CanvasSprite.from(texture);
alien.anchor.set(0.5);
GameWindowManager.addCanvasElement("alien", alien);

// in this example we rotate the canvas element "alien" with a speed of 0.2 and counterclockwise
GameWindowManager.addTicker("alien", new RotateTicker({ speed: 0.2, clockwise: false }, 2))
const texture = await Assets.load('https://pixijs.com/assets/eggHead.png');
const alien = CanvasSprite.from(texture);
alien.anchor.set(0.5);
GameWindowManager.addCanvasElement("alien", alien);

// in this example the canvas element "alien" will rotate with a speed of 0 and the speed will increase linearly until it reaches 0.5
GameWindowManager.addTicker("alien", new RotateTicker({ speed: 0, speedProgression: { type: "linear", amt: 0.001, limit: 0.5 } }))

Effects

Effects are Tickers that alter the texture of a canvas element.

( More are on the way )

Fade

For fading a canvas element you can use the FadeAlphaTicker class. This Ticker edit the alpha property of the canvas element. It is possible to start fading on all canvas element.

FadeAlphaTicker have a constructor that takes the a object with the following properties:

  • duration: is a number that represents the duration of the fade. default is 1.
  • type: it can be hide or show. if hide the canvas element will disappear, if show the canvas element will appear. default is show.
  • limit: is a number that represents the limit of the fade. default is 1 if type is show and 0 if type is hide.
  • startOnlyIfHaveTexture: is a boolean that represents if the animation should start only if the canvas element have a texture not empty. default is false.
  • tagToRemoveAfter: is a string[] that contains the tags of the canvas element that will be removed after the fade. default is [].

for example:

const texture = await Assets.load('https://pixijs.com/assets/eggHead.png');
const alien = CanvasSprite.from(texture);
alien.alpha = 0;
GameWindowManager.addCanvasElement("alien", alien);

// in this example we fade the canvas element "alien" with a duration of 2 seconds
GameWindowManager.addTicker("alien", new FadeAlphaTicker({ duration: 2 }));

How to force completion of an Transition/Effect/Animation in the next step?

Read this

Clone this wiki locally