Pixi'VN is a npm package that provides various features for creating visual novels.
Pixi'VN has functions to manage story steps, saving and loading, variable storage, dialogues, and character creation.
Pixi'VN is based on Pixi.js, a modern 2D rendering engine, expanding the features by adding a save and load system, and functions to simplify the addition of images and animations.
In addition to managing the Pixi.js "Canvas", Pixi'VN offers the possibility of adding an HTML Element with the same dimensions as the "Canvas" to add interactions with the user. This allows the use of systems such as React, Vue, Angular, etc. to create much more complex interfaces with excellent performance.
For more information, visit the Web Page
- Characters
- Dialogue and Narration
- Choice Menus
- Label and Game Step
- Game Storage
- Flags Management
- Save and Load
- Images and Animations
npm install @drincs/pixi-vnFor the following example, we will use React to create the interface and Pixi'VN to manage the visual novel.
// main.tsx
import { GameWindowManager } from '@drincs/pixi-vn'
import { createRoot } from 'react-dom/client'
import App from './App'
import './index.css'
// Canvas setup with PIXI
const body = document.body
if (!body) {
throw new Error('body element not found')
}
GameWindowManager.initialize(body, 1920, 1080, {
backgroundColor: "#303030"
}).then(() => {
// React setup with ReactDOM
const root = document.getElementById('root')
if (!root) {
throw new Error('root element not found')
}
GameWindowManager.initializeHTMLLayout(root)
const reactRoot = createRoot(GameWindowManager.htmlLayout)
reactRoot.render(
<App />
)
})This is the HTML file that will be used to load the application.
<!-- index.html -->
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<link rel="icon" type="image/svg+xml" href="/pixiVN.svg" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Pixi'VN</title>
</head>
<body>
<div id="root"></div>
<script type="module" src="/src/main.tsx"></script>
</body>
</html>/* index.css */
:root {
background-color: #242424;
}
body {
margin: 0;
display: flex;
}