Pixi'VN - React UI

セットアップ、テンプレート、最適な UI ライブラリを含め、Pixi’VN を React と統合する方法。 React を使ったビジュアルノベルや 2D ゲームを作成できます。

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

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

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

React template

React を使用した Pixi’VN のテンプレートが用意されています。詳細は templates セクションを参照してください。

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

まず、React アプリケーションを用意し、pixi-vn をインストールします。新しい React アプリケーションを作成するには、Vite の使用を推奨します。

次に、以下のファイルの内容をコード例に置き換えます：

import { canvas, Container, Game, RotateTicker, showImage } from '@drincs/pixi-vn'
import { StrictMode } from 'react'
import { createRoot } from 'react-dom/client'
import './index.css'
import App from './App.tsx'

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", 
  }) 
  .then(() => { 
    // Pixi.JS UI Layer
    canvas.addLayer("ui", new Container()); 
    showImage( 
      "juliette", 
      "https://firebasestorage.googleapis.com/v0/b/pixi-vn.appspot.com/o/public%2Fcharacters%2Fjuliette-icon.webp?alt=media&token=cbcdd613-12e4-48b5-b7b3-16443b4e125e", 
      { xAlign: 0.9, yAlign: 0.1, anchor: 0.5 } 
    ); 
    canvas.addTicker("juliette", new RotateTicker({ speed: 1 })); 
    // React setup with ReactDOM
    const root = document.getElementById("root"); 
    if (!root) { 
      throw new Error("root element not found"); 
    } 
    const htmlLayer = canvas.addHtmlLayer("ui", root, { 
      position: "absolute", 
      pointerEvents: "none"
    }); 
    if (!htmlLayer) { 
      throw new Error("htmlLayer not found"); 
    } 
    const reactRoot = createRoot(htmlLayer); 
    reactRoot.render( 
      <StrictMode>
        <App />
      </StrictMode>,
    ); 
  } 
)

React UI

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

おすすめの React コンポーネントライブラリ

On this page