PixiJS＆TypeScriptで2Dゲームを作る ①viteで爆速環境構築編

この記事の内容

PixiJSはJavaScript(TypeScript)で2Dのグラフィックスを描画するためのライブラリです。
ブラウザで2Dのゲームやアニメーション盛り盛りのページを作りたいときには結構な割合でお世話になるのですが、使いこなしてゲーム作ったりするのは結構大変です。

とは言え一番壁になるのは最初に環境構築して絵を自由に表示して動かす部分です。そこで、何回かに分けて最初の壁を超えて好きなゲーム制作の入り口に立てるようになるまでを解説したいと思います。

ちなみに、技術習得とか置いといて本当にゲーム作りたいだけなのであれば、phina.jsのようなPixiJSをゲーム用にラップしたフレームワークを使っても良いと思います。ここではより汎用的で自由な開発ができるよう、こうしたフレームワークは使用しません。

▼ PixiJS使うとこんな感じのゲームも作れます

https://nekomzs21.web.app/

今回の内容

• PixiJSを使ったイケてる開発環境を準備する
• PixiJSで画像を読み込んで表示する

ソースコード： https://github.com/yuneco/zenn-samples/tree/master/pixi-vite-setup

前提の環境

以下の環境・ツールを前提に説明しています。フロント系の開発やったことのある方なら大抵導入済みかと思います。

• node.js（そこそこ最近のバージョン）
• yarn（デフォルトのnpmでもok）
• VS Code（他のエディターでもok）

viteをセットアップして起動する

PixiJS自体はCDNでも提供されているので、適当にhtmlファイル作ってCDNから<script>タグで読み込めば使えます。実際それで解説しているサイトも多いのですが、正直あまりにも学習・開発の環境として辛すぎます。エディターの補完も効かないですし、TypeScriptやSCSSといった便利な道具も使えません。なのでまずはイケてる環境を作ります。今回はviteでいきます。

viteを聞いたことのある方は「viteってVueの環境作れやつでしょ？」みたいに思うかもしれませんが、viteそのものはVueとは別物です（作者は同じですが）。VueやReactのようなフレームワークとは関係なしに、汎用的なwebの開発環境を提供してくれるツールです。

viteのプロジェクトを作成

まずviteで新しいプロジェクトを作ります。npmかyarnか、お好みで下記のどちらかを実行します。
vanillaは一番シンプルなバニラJSのテンプレです。なくても良いくらいだけど、ちょっとでも楽するために指定します。

# npm 7+, extra double-dash is needed:
npm init @vitejs/app my-pixi-app -- --template vanilla

# yarn
yarn create @vitejs/app my-pixi-app --template vanilla

基本これだけです。詳しく確認したい方は公式のGetting Startedを参照。
で、↓こんなのが出ればok

Done. Now run:
  cd my-pixi-app
  npm install
  npm run dev

言われた通りに上の3つのコマンドを実行します。↓のメッセージが出るのでブラウザで開けばok。

  vite v2.2.1 dev server running at:

  > Local:    http://localhost:3000/
  > Network:  http://192.168.0.177:3000/

  ready in 226ms.

あとはこのプロジェクトをエディタで編集していくだけです。

JS→TypeScriptに変更

vanillaのテンプレはファイルがJSなので、これをTypeScriptに変更します。

1. プロジェクトフォルダのmain.jsをmain.tsにリネーム
2. index.html内のsrc="/main.js"をsrc="/main.ts"に変更

これだけ。ほんとにこれだけでTypeScriptが普通に使えます。
いろいろ拘りたい方は普通にtsconfig.jsonとか追加して設定してください。

PixiJSをインストールする

つづけてPixiJSをインストールします

npm install pixi.js

で、これをmain.tsから読み込みます。
main.tsを一旦クリアして、↓をコピペします。

main.ts

// PixiJSを読み込み
import * as PIXI from 'pixi.js'

// ステージを作る
const createApp = () => {
  // キャンバスサイズと背景色を指定してステージを作成
  const app = new PIXI.Application({
    width: 800,
    height: 600,
    backgroundColor: 0xcccccc // 背景色(= #cccccc)
  })
  document.body.appendChild(app.view)
  return app
}

const app = createApp()

変更を保存するとブラウザにグレー（#cccccc）の四角(Canvas)が表示されます。
また、コンソールを見るとPixiJSが読み込まれていることを示すメッセージが表示されていることがわかります。

PIXI.ApplicationはPixiJSを使うときの起点になるクラスです。
今回はサイズと背景色だけを指定していますが、他にも色々設定があるのでざっとみておくと良いかもです。

公式ドキュメント：PIXI.Application

PixiJSで画像を表示する

グレーの背景だけだと気分も上がらないので、好きな画像を表示してみます。

プロジェクトのフォルダにassetsフォルダを追加し、その中に好きな画像を入れます。
今回は↓のtama.svgを使います。とりあえずはjpegでもpngでも良いのですが、この記事シリーズでは画像のフォーマットとしてSVGを強く推薦するので、自前の画像を使う場合もできればSVGで用意していただくと良いと思います。もちろん、このサンプルのSVGファイルをそのまま使ってもokです。

▼ tama.svg（たまさん）

画像の用意ができたらmain.tsを書き換えて灰色のステージの上に画像を読み込みます。
↓が画像を読み込んで表示する最小のコードです。

main.ts

import * as PIXI from 'pixi.js'

const createApp = () => {
  const app = new PIXI.Application({
    width: 800,
    height: 600,
    backgroundColor: 0xcccccc // 背景色(= #cccccc)
  })
  document.body.appendChild(app.view)
  return app
}

// const app = createApp() ...削除
// 🌟 ここから下を追加 🌟 //

// 初期化処理
const main = async () => {
  const app = createApp()
  const tamaTexture = await PIXI.Texture.fromURL('assets/tama.svg')
  const tamaSprite = new PIXI.Sprite(tamaTexture)
  app.stage.addChild(tamaSprite)
}

// 起動
main()

↓のように画像が表示されれば完璧です🎉

これで最低限、好きな画像を読み込んで表示することができました。
あとはこの画像を好きな位置やサイズに組み合わせて表示できれば、自由に画面を作れるようになるはずです。

実は現状のSVG画像の読み込みには少々問題もあるのですが、ひとまず次回は今回のコードをベースに、画像を好きな位置やサイズで表示する方法を解説します。