Canvas (WebGL)

Pixi’VN uses PixiJS to render the visual novel. You can use the Pixi’VN API to add images, text, and animations to the PixiJS canvas (or, better yet, to the 2D WebGL rendering engine).

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 the fastest, most lightweight 2D library available for the web, working across all devices and allowing you to create rich, interactive graphics and cross-platform applications using WebGL and WebGPU. It is fast, flexible, and easy to use. It is used in games like Good Pizza, Great Pizza and The Enchanted Cave 2.

You can learn more about PixiJS on the PixiJS website.

Differences between Pixi’VN and PixiJS

Pixi’VN provides a API object called canvas used to interface with Pixi’VN's PixiJS application. So you don't need to install pixi.js and the features of Pixi’VN is not equivalent to that of PixiJS. Although not recommended, you can still install pixi.js and use canvas.app to access the PixiJS application.

The use of Pixi’VN, in rendering, is very similar to that of PixiJS. 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.

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