Pixi'VN - React UI

Как интегрировать Pixi’VN с React, включая настройку, шаблоны и лучшие UI-библиотеки. Create a React visual novel or story-driven game.

Pixi’VN works great as a visual novel React engine, letting you build the UI of your visual novel or story-driven game with React components while Pixi’VN handles the narration and canvas.

Что такое React? React — это JavaScript-библиотека для создания пользовательских интерфейсов (UI) для веб-сайтов, приложений и других платформ. Она бесплатна, имеет открытый исходный код и поддерживается компанией Meta (ранее Facebook) и большим сообществом.

Подробнее о React можно узнать на React website.

Как добавить Pixi’VN в React-приложение

Шаблоны

Доступны шаблоны Pixi’VN, использующие React. Подробнее о них можно прочитать в разделе templates.If you want to add Pixi’VN to an existing React application, follow the steps below.

If you want to add Pixi’VN to an existing React application, follow the steps below.

First, you need a React application and to install pixi-vn. It is recommended to use Vite to create a new React application.

Now you can replace the content of the following files with the code below:

import { Assets, canvas, Container, drawCanvasErrorHandler, Game, showImage, sound } from "@drincs/pixi-vn"; 
import { StrictMode } from "react";
import { createRoot } from "react-dom/client";
import App from "./App.tsx";
import "./index.css";

createRoot(document.getElementById("root")!).render( 
const body = document.body; 
if (!body) { 
    throw new Error("body element not found"); 
} 

Game.init(body, { 
    height: 1080, 
    width: 1920, 
    backgroundColor: "#303030", 
    resizeMode: "contain", 
}).then(() => { 
    showImage( 
        "juliette", 
        "https://raw.githubusercontent.com/DRincs-Productions/pixi-vn-bucket/refs/heads/main/icon.webp", 
        { xAlign: 0.9, yAlign: 0.1, anchor: 0.5 }, 
    ).then(() => { 
        canvas.animate("juliette", { angle: 360 }, { repeat: Infinity, duration: 5 }); 
    }); 

    // Pixi.JS UI Layer
    canvas.addLayer("ui", new Container()); 

    // Sound setup
    sound.addChannel("bgm", { background: true }); 
    sound.addChannel("sfx"); 
    sound.defaultChannelAlias = "sfx"; 

    // React setup with ReactDOM
    const root = document.getElementById("root"); 
    if (!root) { 
        throw new Error("root element not found"); 
    } 

    const htmlLayout = canvas.addHtmlLayer("ui", root); 
    if (!htmlLayout) { 
        throw new Error("htmlLayout not found"); 
    } 
    const reactRoot = createRoot(htmlLayout); 

    reactRoot.render(
        <StrictMode>
            <App />
        </StrictMode>,
    )
}); 

Game.onEnd(async (props) => { 
    Game.clear(); 
    // Navigate to the main menu after the game ends
}); 

Game.addOnError(drawCanvasErrorHandler()); 
Game.addOnError((error, props) => { 
    console.error(`Error occurred`, error); 
}); 

Game.onLoadingLabel((_stepId, { id }) => Assets.backgroundLoadBundle(id));

React UI

Как добавить Pixi’VN в React-приложение

На этой странице