PixiJS 入門 環境作りと テキストアニメーション

アニメーション 関連は苦手でコレまでやってこなかったのですが、 いま作成中サービスのデザインまわり担当している方から pixi.js を提案されたので勉強ついでに少し試してた記事です。

PixiJS とは

PixiJS で提供されている JavaScript用2D描画ライブラリで、WebGLを使って高速な描画が簡単に実装することができるようになります。

公式のデモ
たくさんのデモコードが公開されているので参考にして サンプルを動かしてみようと思います。

環境構築

npm で提供されているようなので vue cli の初期設定と組み合わせると
簡単に環境を作ることができます。
※ pixi.js@5.0.0 を指定するとエラーなく実行できるようです。

mkdir pixijs-sample
cd pixijs-sample
vue create vue-app
cd vue-app/
npm i --save @types/pixi.js pixi.js@5.0.0

HelloWorld.vue に描画コードを追加する

pixi.js を利用するコードを追加していく。

<div id='pixi_container'>
 <!-- ここに 描画される -->
</div>
...
import * as PIXI from 'pixi.js';
...
private size = {width: 340, height: 240};
private pixiApp: PIXI.Application = new PIXI.Application(this.size);
private textobj!: PIXI.Text;

private mounted() {
  console.log('mounted');
  const container = document.getElementById('pixi_container')!;
  container.appendChild(this.pixiApp.view);

  // テキストオブジェクトを作る
  this.textobj = new PIXI.Text("Hello World!", {font:'bold 60pt Arial', fill:'white'});
  this.textobj.position.x = this.size.width / 2;
  this.textobj.position.y = this.size.height / 2;

  // テキストオブジェクトをステージに乗せる
  this.pixiApp.stage.addChild(this.textobj);

  // アニメーション開始
  this.pixiApp.ticker.add((delta) => {
    this.textobj.rotation += 0.01;
  })
}

実行してみる

動作確認用のサーバを起動して動作確認をする。

npm run serve

簡単にテキストを表示して 回転させる事ができました。

ソースコード等

githubへアップしてあります。
pixijs-sample

参考

簡単アニメーション！Pixi.jsを触ってみる！（1）テキストを動かしてみる

• 3年前の記事の為 バージョンの合わず 概要とタイトルだけ参考にしました。

pixi.jsとLive2Dで雪降るシーンを作る

• Live2D との組み合わせもできるようなので後日ためしてみようと思います。

作成中サービス

オオエン
経験や行動した事をリストにして公開しとくと、誰かが試したよとか行動したよ！が届くのでちょっと嬉しくなるサービス。試したり行動した人を気軽に楽しく応援できます。
興味ある方、 どんなリスト作りたいかなど事前登録で教えて貰えると嬉しいです！