LogoPixi’VN

クイックスタート

Pixi’VN の始め方

GitHubで編集Crowdinで翻訳ChatGPTに質問Patreon

新しいプロジェクトを初期化する か、既存のプロジェクトに パッケージをインストールする ことで、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 Application の初期化時に使用できるオプションと同等です。 以下のオプションは必須です：
    • 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>

On this page

前提条件プロジェクトの初期化インストール初期化