Pixi'VN - PixiJS Visual Novel Engine

Pixi’VN is a npm package that provides various features for creating visual novels, has functions to manage story steps, saving and loading, variable storage, dialogues, character,canvas management, and much more.

Pixi’VN + Templates provides a complete solution and is in effect a visual novel engine.

It is designed for web developers, with basic experience in JavaScript/TypeScript, who want to create a visual novel with a modern 2D rendering engine and their favorite JavaScript framework.

It is based on Pixi.js, a rendering engine that allows you to create fast 2D graphics. It is based on WebGL and is very fast and efficient. It is used by many developers to create games, websites, and applications.

Pixi’VN offers the possibility of adding an HTML Element with the same dimensions as the PixiJS Canvas to add an interface with JavaScript frameworks.

By "Interface" is meant the elements that are above the canvas, such as buttons, forms, etc.

This allows the use of systems such as React, Vue, Angular, etc. to create much more complex interface screens with excellent performance.

• Angular
• React Interface
• Vue

Wiki

For more information, visit the Web Page

• Why Pixi’VN?
• Get Started

First steps

• Characters
• Narration:
  • Dialogue
  • Label and Game Step
  • Choice Menus
  • History
• PixiJS Canvas:
  • Images
  • Video
  • Transitions
  • Canvas Elements
  • Animations and Effects
  • Tickers
• Sounds and Music
• Interface with JavaScript Framework
  • Angular Interface
  • React Interface
  • Vue Interface
• Game storage:
  • Flags Management
  • Stored Classes
• Save and Load

Advanced topics

• Intecept Events
• Distribution
• Mobile distribution

Prerequisites

• Node.js version 18 or higher.
• Text Editor with TypeScript support.
  • Visual Studio Code is recommended.

Project Initialization

To initialize a new project, you can use the following command:

npm create pixi-vn@latest

The supported template presets are:

Basic Visual Novel - Web page (Vite + React + MUI joy)

( More templates will be added in the future, see this issue for more information )

After the project is initialized, you can open the project directory with your text editor (VSCode is recommended) and start developing your visual novel.

Into all templates there is a README.md file with more information about the project.

Example overview

The first page that appears is the main menu. From there, you can start the game, load a saved game, or go to the settings.

The game page is in /game route. It contains the text box, character avatar, and canvas for the background image. The text box displays the text of the current dialogue. The character avatar displays the character speaking the dialogue. The background image is the background of the scene. When a choice has to be made, the choices are displayed at the top of the screen.

When you are in the game page, you can access with many features through a list of buttons located at the bottom. In this list you can save the game, load a saved game, skip the dialogue, auto play the dialogue, access to the history modal, and access to the settings modal.

The history modal is a list of all the dialogues and choices that have been displayed.

The settings modal allows you to change the text speed, go to full screen, edit theme colors, and change go to main menu. The settings for the audio have not been added nor the libraries to manage it, but I recommend adding them.

Keyboard shortcuts (hotkeys)

• Space or Enter: Continue the dialogue.
• Keep Space or Keep Enter: Skip the dialogue.
• Shift + S: Quick save the game.
• Shift + L: Quick load the game.
• Shift + H: Open the history modal.
• Esc: Open the settings modal.
• Shift + V: Hide the Interface (Show only the canvas).