LogoPixi’VN

빠른 시작

Pixi'VN 시작하기

GitHub에서 편집Crowdin에서 번역하기ChatGPT에게 물어보세요Patreon

Pixi’VN을 사용하려면 새 프로젝트 초기화하거나 기존 프로젝트에 패키지 설치하면 됩니다.

전제 조건

시작하기 전에 다음 도구를 설치해야 합니다:

프로젝트 초기화

새 프로젝트를 시작하려면 다음 명령을 사용하여 Pixi'VN 템플릿을 사용하여 새 프로젝트를 초기화할 수 있습니다:

npm create pixi-vn@latest

사용 가능한 템플릿 목록과 인터랙티브 데모는 여기에서 확인할 수 있습니다.

프로젝트를 초기화한 후, 텍스트 편집기(VSCode 권장)로 프로젝트 디렉터리를 열고 프로젝트 개발을 시작하세요.

모든 템플릿에는 프로젝트에 대한 자세한 정보가 담긴 README.md 파일이 포함되어 있습니다.

설치

기존 JavaScript 프로젝트에 Pixi'VN 패키지를 설치하려면 다음 명령 중 하나를 사용합니다:

npm install @drincs/pixi-vn

Initialize

Pixi'VN 엔진을 사용하기 전에 게임을 초기화해야 합니다. 'Game.init' 메서드를 호출하여 이 작업을 수행할 수 있습니다.

This function has the following parameters:

  • 'element': 캔버스에 추가할 HTML 요소.
  • 'options': PixiJS 애플리케이션 을 초기화할 때 사용할 수 있는 옵션과 동일합니다. 다음 옵션은 필수입니다:
    • width: 캔버스의 너비.
    • height: 캔버스의 높이.
  • devtoolsOptions: PixiJS Devtools를 초기화할 때 사용할 수 있는 옵션과 동일합니다.
src/main.tsx
import { Game } from "@drincs/pixi-vn";

// Canvas setup with PIXI
const body = document.body
if (!body) {
    throw new Error('body element not found')
}

Game.init(body, {
    height: 1080,
    width: 1920,
    backgroundColor: "#303030",
}).then(() => {
    // ...
});

// read more here: https://pixi-vn.web.app/start/other-narrative-features.html#how-manage-the-end-of-the-game
Game.onEnd(async (props) => {
    Game.clear();
    props.navigate("/");
});

Game.onError((type, error, { notify }) => {
    notify("allert_error_occurred");
});
index.html
<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Game</title>
  </head>
  <body>
    <div id="root"></div>
    <script type="module" src="/src/main.ts"></script>
  </body>
</html>

On this page

전제 조건프로젝트 초기화설치Initialize