getting started

Getting Started

If you have already initialized a new project for your visual novel, you can jump to the installation section.

Prerequisites

• Node.js version 18 or higher.
• Text Editor with TypeScript support.
  • VSCode is recommended.

Initialize a new project

If you want create a new project from scratch it is recommended initialize a new project with Vite. Otherwise you can use one of the following templates.

Pivi'VN Templates

Pixi’VN template (React + Vite + MUI joy) is a template for creating visual novels in React, contains basic functionality inspired by Ren'Py. (you can try this template here)

This template uses the following libraries:

• Pixi'VN
• Vite
• Vite Checker
• PWA Vite Plugin
• Recoil
• React Router
• Mui Joy
• Framer Motion
• Notistack
• i18next
• Reacr Markdown

Installation

For installing the Pixi’VN package, you can use the following command:

# for npm
npm install @drincs/pixi-vn
# for yarn
yarn add @drincs/pixi-vn

Usage

Now you must initialize the Pixi’VN window before using the engine.

For example, you add the following code to the main.ts or index.ts (It depends on your project configuration):

import { GameWindowManager } from '@drincs/pixi-vn'
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"
})

How enable the decorators in TypeScript?

In Pixi’VN, in some advanced features, it is necessary to use decorators.

By default, TypeScript does not enable the use of decorators. To enable the use of decorators in TypeScript, you must add the following configuration to the tsconfig.json file:

{
    "compilerOptions": {
        // ...
        "experimentalDecorators": true
    }
}