Pixi'VN - React UI

설정, 템플릿, 최고의 UI 라이브러리를 포함하여 React와 Pixi’VN을 통합하는 방법입니다. React로 비주얼 노벨이나 스토리 기반 게임을 만들어보세요.

Pixi’VN은 비주얼 노벨 React 엔진으로서 훌륭하게 작동하며, Pixi’VN이 내레이션과 캔버스를 처리하는 동안 React 컴포넌트로 비주얼 노벨이나 스토리 기반 게임의 UI를 구축할 수 있게 해줍니다.

React란 무엇인가요? React는 웹사이트, 앱 등을 위한 사용자 인터페이스 (UI)를 구축하기 위한 JavaScript 라이브러리입니다. 무료이며 오픈소스이고, Meta(구 Facebook)와 대규모 커뮤니티에 의해 유지 관리됩니다.

React 웹사이트에서 React에 대해 더 알아볼 수 있습니다.

React 애플리케이션에 Pixi’VN을 추가하는 방법

Templates

React를 사용하는 Pixi’VN 템플릿을 이용할 수 있습니다. 이에 대해 템플릿 섹션에서 더 알아볼 수 있습니다.기존 React 애플리케이션에 Pixi’VN을 추가하고 싶다면 아래 단계를 따르세요.

기존 React 애플리케이션에 Pixi’VN을 추가하고 싶다면 아래 단계를 따르세요.

먼저 React 애플리케이션이 필요하며 pixi-vn을 설치해야 합니다. 새로운 React 애플리케이션을 만들려면 Vite를 사용하는 것이 권장됩니다.

이제 다음 파일들의 내용을 아래 코드로 교체할 수 있습니다:

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));

React UI

React 애플리케이션에 Pixi’VN을 추가하는 방법

이 페이지에서