Pixi.js + TypeScript + Viteでゲームを作る

Viteの準備
Viteの起動
pixi.jsのinstall
pixi.jsでの画像の表示

Viteの準備

まずは公式ドキュメントに従って、viteのプロジェクトを作成します。

npm create vite@latest action-game -- --template vanilla-ts

その後、作成されたフォルダに移動して、npm installを実行。

cd action-game
npm install

この時点でフォルダ構成は以下のようになっているはずです。

.
├── README.md
├── index.html
├── node_modules
│   ├── @esbuild
│   ├── ...
│   └── vite
├── package-lock.json
├── package.json
├── public
│   └── vite.svg
├── src
│   ├── counter.ts
│   ├── main.ts
│   ├── style.css
│   ├── typescript.svg
│   └── vite-env.d.ts
└── tsconfig.json

Viteの起動

問題なくnpm installが動いたら、Viteでweb画面を立ち上げてみます。

npm run dev

これで下記のような画面が表示されれば成功です。

pixi.jsのinstall

次にpixi.jsをinstallします。

npm install pixi.js

pixi.jsでの画像の表示

pixi.jsがinstallされたら、まずはpixi.jsのApplicationを作ってみます。公式ドキュメントを参考にmain.tsを次のように書き換えます。Applicationを１つ作って、そこにpixi.jsのウサギを配置するだけの素朴な画面になります。


import { Application, Assets, Sprite } from "pixi.js";

// Create a new Stage.
const createApp = async () => {

  const app = new Application();

  await app.init({ background: '#cccccc', resizeTo: window });

  document.body.appendChild(app.canvas);
  return app
}

const main = async () => {
  const app = await createApp()
  const texture = await Assets.load('https://pixijs.com/assets/bunny.png');
  const sprite = new Sprite(texture)
  app.stage.addChild(sprite)
}

main()

これで立ち上げているWeb画面を確認して、以下のように変化していたら成功です。