Pixi’VNクイックスタート
Pixi’VN を使い始める
Pixi’VN を使用するには、新しいプロジェクトを初期化するか、既存のプロジェクトにパッケージをインストールすることで始められます。
前提条件
開始する前に、以下のツールをインストールしておく必要があります：
- Node.js バージョン 18 以上。
- TypeScript をサポートするテキストエディタ（例）：
- （推奨）Git
- GitHub アカウント - Copilot（AI アシスタント）の利用、配布パッケージの自動生成、wiki へのコメント追加が可能になります
プロジェクトの初期化
新しいプロジェクトから始める場合は、以下のコマンドを使用して 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;
}