Pixi'VN - React UI

セットアップ、テンプレート、最適な UI ライブラリを含め、Pixi’VN を React と統合する方法。 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 は、Web サイトやアプリなどのユーザーインターフェース（UI）を構築するための JavaScript ライブラリです。無料でオープンソースとして提供されており、Meta（旧 Facebook）と大規模なコミュニティによってメンテナンスされています。

React について詳しくは、React website を参照してください。

React アプリケーションに Pixi’VN を追加する方法

テンプレート

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

React アプリケーションに Pixi’VN を追加する方法

このページの内容