Pixi’VN빠른 시작
Pixi’VN 시작하기
Pixi’VN을 새 프로젝트 초기화 또는 기존 프로젝트에 패키지 설치를 통해 사용을 시작할 수 있습니다.
사전 요구 사항
시작하기 전에 다음 도구들이 설치되어 있어야 합니다:
- Node.js 버전 18 이상.
- TypeScript를 지원하는 텍스트 편집기, 예:
- (권장) Git
- GitHub 계정 - Copilot(AI 어시스턴트)을 사용하고, 배포용 패키지를 자동 생성하며, 위키에 댓글을 추가할 수 있습니다.
프로젝트 초기화
새 프로젝트를 시작하려면 다음 명령어를 사용하여 Pixi’VN 템플릿으로 새 프로젝트를 초기화할 수 있습니다:
npm create pixi-vn@latest사용 가능한 템플릿 목록과 인터랙티브 데모는 여기에서 확인할 수 있습니다.
프로젝트가 초기화된 후, 텍스트 편집기(VSCode 권장)로 프로젝트 디렉터리를 열고 프로젝트 개발을 시작하세요.
설치
기존 JavaScript 프로젝트에 Pixi’VN 패키지를 설치하려면 다음 명령어 중 하나를 사용하세요:
npm install @drincs/pixi-vn초기화
Pixi’VN 엔진을 사용하기 전에 게임을 초기화해야 합니다. Game.init 메서드를 호출하여 초기화할 수 있습니다.
import { Game } from "@drincs/pixi-vn";
const body = document.body;
if (!body) {
throw new Error("body element not found");
}
Game.init(body, {
height: 1080,
width: 1920,
backgroundColor: "#303030",
}).then(() => {
// ...
Game.start("start", {});
});
// 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();
// navigate to main menu
});
Game.addOnError((error, props) => {
console.error(`Error occurred`, error);
});
Game.onNavigate((path) => navigateTo(path));<!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>html,
body {
background-color: #242424;
height: 100%;
}
body {
margin: 0;
min-height: 100vh;
display: flex;
overflow: hidden;
}