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