Pixi’VN 2D game engine

Appearance

PixiJS Canvas ​

drawing

Pixi’VN uses PixiJS to render the visual novel. You can use the Pixi’VN API to add images, text, and animations to the canvas PixiJS.

If In addition to being able to interact with the canvas from JavaScript/TypeScript, you can also use other narrative languages:

  • ink
  • Ren'Py (Under development)

What is PixiJS? ​

PixiJS is a rendering engine that allows you to create rich, interactive graphics and animations. It is used in games like Good Pizza, Great Pizza and The Enchanted Cave 2.

PixiJS is a powerful tool for creating games and interactive experiences. It is fast, flexible, and easy to use. You can learn more about PixiJS on the PixiJS website.

Differences between Pixi’VN and PixiJS ​

Use PixiJS Canvas in Pixi’VN is very similar to use PixiJS in a normal project. The only differences are as follows:

  • All the components added in the canvas will be linked to an alias of your choice. This alias will be used to identify the component and to manipulate it.
  • Compared to PixiJS, Pixi’VN saves the current canvas state at each step. Attention: when saving the canvas state, only components linked to an alias will be saved (if you added components by directly accessing PixiJS.Application, they will not be considered).
  • Pixi’VN provides various functionalities to add, remove, find... components in the canvas.
  • Pixi’VN provides their components of which some correspond to PixiJS while others are added to add some features.
  • Just like for the components, the tickers are managed by Pixi’VN. If you use a PixiJS ticker, the ticker state will not be saved.
  • You can't set a listener with the on method, but must use the onEvent to add a listener.

Use PixiJS DevTools with Pixi’VN ​

PixiJS DevTools is a Chrome extension that allows you to inspect and debug PixiJS applications. You can use it to view the display list, inspect textures, and debug your PixiJS application. You can use it with Pixi’VN to inspect the canvas and debug your visual novel.

devtools

For access to the PixiJS DevTools after installing it, you need to open the Chrome DevTools (F12) and go to the PixiJS tab.

image