Pixi’VN用户界面（UI）JavaScript框架
React UI
如何将 Pixi’VN 与 React 集成，包括设置、模板和最佳 UI 库。 创建一个 React 视觉小说或故事驱动的游戏。
Pixi’VN 作为视觉小说 React 引擎表现出色，让你可以使用 React 组件构建视觉小说或故事驱动游戏的 UI，同时由 Pixi’VN 处理叙事和画布。
什么是 React？ React 是一个用于为网站、应用等构建用户界面（UI）的 JavaScript 库。 它是免费、开源的，由 Meta（前身为 Facebook）和一个庞大的社区维护。
你可以在 React 网站 上了解更多关于 React 的信息。
如何将 Pixi’VN 添加到 React 应用程序中
Templates
有使用 React 的 Pixi’VN 模板可供使用。 你可以在模板部分阅读更多相关信息。如果你想将 Pixi’VN 添加到现有的 React 应用程序中，请按照以下步骤操作。
如果你想将 Pixi’VN 添加到现有的 React 应用程序中，请按照以下步骤操作。
首先，你需要一个 React 应用程序，并安装 pixi-vn。 建议使用 Vite 创建一个新的 React 应用程序。
现在你可以用下面的代码替换以下文件的内容：
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));