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