Pixi’VNReact UI
Как интегрировать Pixi’VN с React, включая настройку, шаблоны и лучшие UI-библиотеки. Создайте visual novel или сюжетно-ориентированную игру на React.
Pixi’VN отлично работает как движок для visual novel на React, позволяя вам создавать UI вашей visual novel или сюжетно-ориентированной игры с помощью компонентов React, при этом Pixi’VN отвечает за повествование и canvas.
Что такое React? React — это библиотека JavaScript для создания пользовательских интерфейсов (UI) для веб-сайтов, приложений и не только. Она бесплатна, имеет открытый исходный код и поддерживается компанией Meta (ранее Facebook) и большим сообществом.
Подробнее о React можно узнать на сайте React.
Как добавить Pixi’VN в приложение React
Templates
Доступны шаблоны Pixi’VN, использующие React. Подробнее о них можно узнать в разделе шаблоны.Если вы хотите добавить 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));