PixiJS x Spineでキャラクターアニメーションを作ってみる

# PixiJS x Spineでキャラクター アニメーションを作ってみる

## PixiJS x Spine デモURL
https://t-tonyo-maru.github.io/pub_web_pixijs_sakura-girl-animation/
※スマホ向けの最適化を行っていないため、 PC での閲覧推奨です。

### 使用ツール・技術
- Stable diffusion (イラスト生成)
- Photoshop & ペンタブレット (イラスト清書)
- Spine v4.0 (キャラクターアニメーション作成)
- PixiJS v7.3.2 (キャラクターや舞い散る桜、光の描画)

## リンク集
- PixiJS: https://pixijs.com/
- pixi-spine: https://github.com/pixijs/spine/
- Spine: https://ja.esotericsoftware.com/
- Spine Runtime: https://ja.esotericsoftware.com/spine-runtimes

Transcript

1. PixiJS x Spineでキャラクター アニメーションを作ってみる
2. PixiJS とは 2Dグラフィック描画に特化したJavaScriptライブラリです。 内部ではWebGLを利⽤しており、⾼速なレンダリングが可能です。 (引⽤元: What PixiJS Is)
3. Spineは主にゲーム⽤2Dアニメーションに特化したアニメーション ツールです。 エディターを使ってアニメーションを作成したり、Spineランタイ ムを使ってゲーム内でアニメーションを利⽤したりするための、効 率的で合理的なワークフローを提供します。 (引⽤元: Spine とは？) Spine とは
4. • デモ URL: ◦ https://t-tonyo-maru.github.io/pub_web_pixijs_sak ura-girl-animation/ ◦ ※スマホ向けの最適化を⾏っていないため、 PC での 閲覧推奨です。 • 使⽤ツール‧技術 ◦ Stable diffusion (イラスト⽣成) ◦ Photoshop & ペンタブレット (イラスト清書) ◦ Spine v4.0 (キャラクターアニメーション作成) ◦ PixiJS v7.3.2 (キャラクターや舞い散る桜、光の描画) PixiJS x Spine のデモ
5. • Spine アニメーションは JavaScript（TypeScript）で⾃由に制御できます。 ◦ 〇〇アニメーションを再⽣した後に任意のコールバック関数を発⽕する…などが可能で す。 • PixiJS ⽤のプラグインがあり、Web ページ上で簡単に Spine アニメーションを再⽣できます。 ◦ リンク先: PixiJS x Spine ランタイム リポジトリ • PixiJS の Filter 機能をはじめとして、HTML Canvas の様々な機能と組み合わせて、ユニークな アニメーションを表現できます。 • Spine 体験版では Export 機能が使えないため、「⾃作したアニメーションを Web ページで動 かしたい！」場合は、製品版を購⼊する必要があります。 ◦ リンク先: Spineを購⼊ PixiJS x Spine のまとめ
6. • PixiJS ◦ PixiJS: https://pixijs.com/ ◦ pixi-spine: https://github.com/pixijs/spine/ • Spine ◦ Spine: https://ja.esotericsoftware.com/ ◦ Spine Runtime: https://ja.esotericsoftware.com/spine-runtimes リンク集