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.

With the PixiVNJson implementation you have the option to use various types of narrative languages (in addition to JavaScript/TypeScript). Currently you can use the following:

• Ink
• Ren'Py

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 UI with JavaScript frameworks.

By "UI" 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 UI 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 (JS/TS):
  • Dialogue
  • Label and Game Step
  • Choice Menus
  • Input
  • History
  • Translating
  • Typewriter effect
  • Style Text (Markdown)
• Narration with Ink:
  • Characters
  • Style Text (Markdown)
  • Input
  • Canvas
  • Sounds and Music
  • Translating
• Narration with Ren’Py
• PixiJS Canvas:
  • Images
  • Video
  • Transitions
  • Canvas Elements
  • Animations and Effects
  • Tickers
• Sounds and Music
• UI with JavaScript Framework
  • Angular UI
  • React UI
  • Vue UI
• Game storage:
  • Flags Management
  • Stored Classes
• Save and Load

Advanced topics

• Intecept Events
• Distribution
  • Mobile distribution
• Pixi’VN + Json

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 
npm create pixi-vn@latest  
# yarn 
yarn create pixi-vn@latest  
# pnpm 
pnpm create pixi-vn@latest  
# bun 
bun create pixi-vn@latest

The supported template presets are:

• Basic Visual Novel - Web page (Vite + React + MUI joy)
• Basic Visual Novel - Multi Device (Vite + React + MUI joy + Electron Forge)

( 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 example shown is the template i Pixi’VN made in React.

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 /narration 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 UI (Show only the canvas).

Used libraries

This template uses the following libraries:

Core libraries:

• Pixi’VN: A visual novel library for PixiJS.
• Vite: A build tool that aims to provide a faster and leaner development experience for modern web projects.
• Vite Checker: A Vite plugin that checks TypeScript types and ESLint on each build.
• PWA Vite Plugin: A Vite plugin that provides PWA support. This allows the possibility of installing the game as a Progressive Web App.
• Recoil: A state management library for React.
• React Router: A library that provides routing for React applications.
• Tanstack Query: A library that provides a set of tools for getting, caching, and updating game data.  You can use the following button to show Tanstack Query interactions with the game. (the button will be automatically hidden when released)

UI libraries:

• Mui Joy: A React UI framework that provides a set of components and styles for building a website.
• Framer Motion: A simple yet powerful motion library for React.
• Notistack: A library that provides snackbar notifications for React.
• React Color Palette: A library that provides a color picker for React.

Text libraries:

• i18next: A library that gives the possibility to manage multiple translations in the application.
• Reacr Markdown: A library that allows you to render markdown in React components.