Pixi'VN - React UI

如何将 Pixi’VN 与 React 集成，包括设置、模板以及最佳 UI 库。使用 React 创建视觉小说或 2D 游戏。

在 GitHub 上编辑在 Crowdin 上翻译询问 ChatGPT Patreon

什么是 React？ React 是一个用于构建用户界面（UI）的 JavaScript 库，适用于网站、应用程序等。它是免费的开源项目，由 Meta（前 Facebook）及其庞大的社区共同维护。

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

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

React template

提供了使用 React 的 Pixi’VN 模板。你可以在 templates 部分中阅读更多相关内容。

如果你想将 Pixi’VN 添加到现有的 React 应用程序中，请按照以下步骤操作。

首先，你需要一个 React 应用程序，并安装 pixi-vn。建议使用 Vite 来创建新的 React 应用程序。

然后，你可以将以下文件的内容替换为示例代码：

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 组件库

为了创建美观的用户界面，你可以使用以下一些优秀的 React UI 组件库：

React UI

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

最佳 React 组件库

On this page