Pixi'VN - React UI

Pixi’VNをReactと統合する方法（セットアップ、テンプレート、最適なUIライブラリを含む）。 Reactでビジュアルノベルやストーリー主導のゲームを作成しましょう。

Pixi’VNはビジュアルノベルReactエンジンとして優れた性能を発揮し、Pixi’VNがナレーションとキャンバスを処理する一方で、Reactコンポーネントを使ってビジュアルノベルやストーリー重視のゲームのUIを構築できます。

Reactとは？ Reactは、ウェブサイトやアプリなどのユーザーインターフェース（UI）を構築するためのJavaScriptライブラリです。無料でオープンソースであり、Meta（旧Facebook）と大規模なコミュニティによってメンテナンスされています。

Reactについては、Reactのウェブサイトで詳しく知ることができます。

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

テンプレート

Reactを使用したPixi’VNのテンプレートが用意されています。詳細については、テンプレートセクションをご覧ください。既存のReactアプリケーションにPixi’VNを追加したい場合は、以下の手順に従ってください。

既存のReactアプリケーションにPixi’VNを追加したい場合は、以下の手順に従ってください。

まず、Reactアプリケーションが必要であり、pixi-vnをインストールする必要があります。新しいReactアプリケーションを作成するには、Viteを使用することをお勧めします。

次に、以下のファイルの内容を、下記のコードに置き換えることができます:

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.layers.add("ui", new Container()); 

    // Sound setup
    sound.channels.add("bgm", { background: true }); 
    sound.channels.add("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.htmlLayers.add("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アプリケーションに追加する方法

このページの内容