LogoPixi’VN

快速开始

开始使用 Pixi’VN

在 GitHub 上编辑在 Crowdin 上翻译询问 ChatGPTPatreon

您可以通过初始化一个新项目或在现有项目中安装该包来开始使用 Pixi’VN。

前提条件

在开始之前，您必须安装以下工具：

项目初始化

如果您想从一个新项目开始，可以使用以下命令来通过 Pixi’VN 模板初始化项目：

npm create pixi-vn@latest

您可以在 此处 查看可用模板和交互式演示。

项目初始化完成后，使用您的文本编辑器（推荐 VSCode）打开项目目录并开始开发。

所有模板都包含一个 README.md 文件，其中包含有关项目的更多信息。

安装

要在现有的 JavaScript 项目中安装 Pixi’VN 包，请使用以下任一命令：

npm install @drincs/pixi-vn

初始化

在使用 Pixi’VN 引擎之前，必须初始化游戏。 您可以通过调用 Game.init 方法来实现。

该函数具有以下参数：

  • element: 要附加 canvas 的 HTML 元素。
  • options: 与初始化 PixiJS 应用程序 时使用的选项相同。 以下选项是必需的：
    • width: canvas 的宽度。
    • height: canvas 的高度。
  • 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>

Templates

Next Page

On this page

前提条件项目初始化安装初始化