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 应用程序 时使用的选项相同。 此外，还支持以下选项：
    • id：分配给 canvas 元素的 ID。
    • resizeMode：使用的调整大小模式。 可能的值：
      • none：不调整大小。
      • contain：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>
styles.css
:root {
  background-color: #242424;
}

html,
body {
  height: 100%;
}

body {
  margin: 0;
  min-height: 100vh;
  display: flex;
  overflow: hidden;
}

Templates

Next Page

On this page

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