Pixi'VN - React UI

Comment intégrer Pixi’VN avec React, y compris la configuration, les templates et les meilleures bibliothèques 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.

Qu’est-ce que React ? React est une bibliothèque JavaScript permettant de créer des interfaces utilisateur (UI) pour des sites web, des applications et bien plus encore. Elle est gratuite, open source et maintenue par Meta (anciennement Facebook) ainsi que par une large communauté.

Vous pouvez en apprendre davantage sur React sur le React website.

Comment ajouter Pixi’VN à une application React

Modèles

Des templates Pixi’VN utilisant React sont disponibles. Vous pouvez en savoir plus dans la section 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

Comment ajouter Pixi’VN à une application React

Sur cette page