Pixi’VN - PixiJS & Visual Novel engine
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.
Wiki
For more information, visit the Web Page
First steps
- Characters
- Narration:
- PixiJS Canvas:
- Sounds and Music
- Interface with JavaScript Framework
- Game storage:
- Save and Load
Advanced topics
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
orEnter
: Continue the dialogue.Keep Space
orKeep 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).
Updated | 13 days ago |
Status | Released |
Category | Tool |
Platforms | HTML5 |
Rating | Rated 5.0 out of 5 stars (1 total ratings) |
Author | DRincs Productions |
Genre | Visual Novel |
Made with | PixiJS |
Tags | 2D, Game engine, html, react, Ren'Py |
Links | Homepage, Discord, Source code, Patreon, npm |