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 是一个用于构建用户界面（UI）的 JavaScript 库，适用于网站、应用程序等。它是免费的开源项目，由 Meta（前 Facebook）及其庞大的社区共同维护。

你可以在 React website 上了解更多关于 React 的信息。

如何将 Pixi’VN 添加到 React 应用程序中

模板

提供了使用 React 的 Pixi’VN 模板。你可以在 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 应用程序中

本页内容