Zenn
🧑‍🎨

PixiJS v8 + GSAP + Spine のテンプレートです

2024/06/02に公開
JavaScript
TypeScript
PixiJS
GSAP
spine
tech

表題の通り、Vite をベースにして PixiJS v8 + GSAP + Spine のテンプレートを作成してみました。
誰のためというわけもなく、ほぼ自分用ですね。

リポジトリ・サンプルページ

> リポジトリ:t-tonyo-maru/pub_template_web_pixijs-gsap-spine
> サンプルページ

サンプルページ スクリーンショット
サンプルページ スクリーンショット

開発環境

開発環境 バージョン
node >=20

主なパッケージ

パッケージ バージョン
dotenv ^16.4.5
typescript ^5.2.2
vite ^5.2.0
vitest ^1.6.0
@pixi/spine-pixi ^1.0.10
@esotericsoftware/spine-pixi-v8 ^4.2.66
gsap ^3.12.5
lil-gui ^0.19.2
pixi.js ^8.1.5

PixijS 上で Spine を動かすために @pixi/spine-pixi を使っています。pixijs/open-games を参考にして導入してみました。
一応 Spine 公式の Pixijs ランタイムもあるにはあるのですが、PixiJS v8 にはまだ対応していないようでしたので、利用を見送りました。
PixiJS v8 対応の Spine ランタイム（@esotericsoftware/spine-pixi-v8）がリリースされましたので、@pixi/spine-pixiからアップデートしました！

PixiJS・GSAP・Spine の他に、dotenv や vitest や lil-gui なども入れています。
それぞれの用途は以下の通りです。

  • dotenv: Github Pages のパスを vite.config.ts と main.ts に流し込むために利用しています。それ以外の用途はないので、Github Pages を利用しない場合は dotenv は削除して構いません。
  • vitest: 単体テストを実行できるように入れています。
  • lil-gui: 画面上でのデバッグに利用します。

ディレクトリ構成

/
├── .env.sample
├── README.md
├── index.html
├── package-lock.json
├── package.json
├── public
│   └── assets … 静的ファイルの格納先。Spine のエクスポートファイルをココに格納しています。
├── src
│   ├── main.ts … 主な処理はココに書いています。
│   ├── reset.css
│   ├── utils
│   └── vite-env.d.ts
├── tsconfig.json
├── vite.config.ts
└── vitest.config.ts

main.ts の解説

主要な処理は src/main.ts に記述しています。

src/main.ts
// 各種パッケージの読み込み
// import '@pixi/spine-pixi'
import * as PIXI from 'pixi.js'
import { gsap } from 'gsap'
import { PixiPlugin } from 'gsap/PixiPlugin'
// import { Spine } from '@pixi/spine-pixi'
import { Spine } from '@esotericsoftware/spine-pixi-v8'
import GUI from 'lil-gui'
import './reset.css'

// .env から Github Pages のパスを読み込む。
// Github Pages を利用しないなら不要な変数です。
const VITE_GITHUB_PAGES_PATH = import.meta.env.VITE_GITHUB_PAGES_PATH || '/'

const app = new PIXI.Application()

// GSAP プラグインの登録を行います。
// 下記のコードがないと PixiJS 上で GSAP を扱えません。
gsap.registerPlugin(PixiPlugin)
PixiPlugin.registerPIXI(PIXI)

// lil-gui のサンプルコードです。
const gui = new GUI()
const testFolder = gui.addFolder('test folder')
testFolder.add({ alpha: 1 }, 'alpha', 0, 1, 0.001)
testFolder
  .addColor({ color: 0xff5252 }, 'color')
  .onChange((updatedvalue: number) => {
    console.log('updatedvalue: ', updatedvalue)
  })

const init = async () => {
  // PixiJS v8 からは、初期化関数が非同期になっています。
  // https://pixijs.com/8.x/guides/migrations/v8#async-initialisation
  await app.init({
    resizeTo: window,
    background: '#1099bb'
  })
  document.body.appendChild(app.canvas)

  // public/assets/spines にある Spine エクスポートデータを読み込んでいます。
  await PIXI.Assets.load([
    {
      alias: 'modelSkeleton',
      src: `${VITE_GITHUB_PAGES_PATH}/assets/spines/model.json`
    },
    {
      alias: 'modelAtlas',
      src: `${VITE_GITHUB_PAGES_PATH}/assets/spines/model.atlas`
    }
  ])

  // Spine インスタンスの作成
  const spine = Spine.from({
    skeleton: 'modelSkeleton',
    atlas: 'modelAtlas'
  })
  spine.scale.set(0.25)
  spine.state.setAnimation(0, 'idle', true)

  // container
  const container = new PIXI.Container()
  container.pivot.set(0.5, 0.5)
  container.position.set(app.screen.width / 2, app.screen.height / 2)
  // container に Spine インスタンスを追加します
  container.addChild(spine)
  app.stage.addChild(container)

  // GSAP の timeline を使って、container にアニメーションを適用します。
  // container には　Spine アニメーションが格納されているので、GSAP のアニメーションが適用されます。
  const timeline = gsap.timeline({ defaults: { duration: 2 } })
  timeline
    .to(container, { pixi: { colorize: 'red', colorizeAmount: 1 } })
    .to(container, { pixi: { hue: 180 } })
    .to(container, { pixi: { scale: 1.75 } })
    .to(container, { pixi: { saturation: 0 } })
    .to(container, { pixi: { brightness: 2 } })
    .to(container, { pixi: { contrast: 1.5 } })
    .to(container, { pixi: { scale: 1 } })
}

init()

参考ページ

本テンプレートを作成するにあたり、下記のページ・プロジェクトを参考にしました。

まとめ

いい感じにテンプレートが作成できましたので、機会を見つけて使っていきたいと思います〜。

Discussion