【pixi.jsテンプレート解説】Spriteでキャラクターをアニメーションさせる

公開しているpixi.jsゲーム開発用テンプレートのSpriteの使い方を説明します。

テンプレート　▷▷▷　https://github.com/inwan78/pixijs-game-template

私のテンプレートではPixi.jsのSpriteクラスを拡張した2つのスプライトクラスとタイルマップ用のクラスがあります。

Pixi.jsのSpriteクラスの基本的な使い方

まずはpixi.jsのSpriteについて。

pixi.jsで画像を表示させるにはSpriteクラスを使います。

const player = new PIXI.Sprite();
player.texture = GameManager.instance.game.loader.resources[Resource.Image.Player].texture;
this.addChild(player);

テンプレートでは画像データはwww/assetsにデータを置いてResource.tsのResourceオブジェクトのImageに記述するとGameManager.instance.game.loader.resourcesに読み込まれます。

その中の読み込みたい画像のtextureをplayer.textureに設定してやると画像が設定されます。

それをシーンなど(上の例ではthisになってる部分)にaddChild()すると画面に表示されるようになります。

Spriteの主なプロパティについて

基本的にゲームで使う部分としては

• x、y・・・addChildしたContainerなどの上の表示位置
• scale・・・拡大縮小率。1が基準。xが幅、yが高さを変える
• anchor・・・表示の際のスプライトの基準位置。(0, 0)だと画像の左上、(1, 1)で右下
• rotation・・・回転。単位はラジアン
• width、height・・・スプライトの幅、高さ
• visible・・・trueで表示、falseで非表示
• alpha・・・透明度。1で見える、0で見えなくなる

これだけ覚えていればとりあえずは困らないと思います。またこれらのプロパティはほかのクラスともだいたい共通しています。

ただ、このやり方では読み込んだ画像がそのまま表示されるだけでゲームとしては使い勝手が悪いです。ということでenchant.jsなどで使われているスプライトを分割して表示するやり方をSpriteに追加しました。

オーソドックスなSpriteアニメーションを追加

PixiExtends.tsのSpriteが機能拡張したスプライトです。

これは宣言時に引数で指定した幅、高さで一枚の画像から切り取って表示されるようになります。

スプライトアニメーションについて全く知識の無い方はこちらの記事を読んでください。enchant.jsの記事ですが私のプログラムもほとんど同じです。

▷▷▷　https://www.atmarkit.co.jp/ait/articles/1304/01/news034_2.html

私のテンプレートでは画面左を上下に動いている薄いピンク色のスライムがこのスプライトを使っています。

このスプライトクラスでは最初の宣言時に

this.enemy = new PixiExt.Sprite(32, 32);

といった感じで引数に幅と高さを指定する必要があります。この幅と高さで画像を切り取って表示します。

後は

this.enemy.frameNumber++;

といった感じでframeNumberプロパティの数字を変えると表示される画像が切り替わるようになります。わからない方は上の参照記事を読んでください(記事内のframeをframeNumberに置き換えてください)。

この方法は簡単ですごく便利なんですが拡大表示させると画像の端に隣の画像の一部がちょっと入ってしまったりするノイズがでます。拡大などの操作をしないのであればこの方法で十分なんですがゲームによっては拡大縮小ばんばん使いたい！なんてこともあると思うのでそれに対処したやり方が次の方法です。

SpriteSheetでのスプライトアニメーションのやり方

こっちはPixiExtends.tsのAnimationSpriteクラスです。これはSmith氏のプログラムを改造して作ってます。

これも一枚の画像から切り抜いて使う方法ではあるのですが、これはま各パターンの画像をそれぞれ個別に用意してそれを一枚にくっつけて専用の画像とjsonファイルを作って使うという方法です。正直少し面倒くさいです(^^;)

とりあえず今はこちらのリンクの「スプライトシートの生成」の所を読んでください。

▷▷▷　https://ryo620.org/2016/12/pixijs-game-01/

正直言って私もまだほとんど使っていないので詳しく書けないのでしばらくお待ちください(;^ω^)

テンプレートではプレイヤーキャラがこのスプライトでアニメーションしています。

タイルマップについて

２Dゲームを作るならやはり欲しいのがタイルマップ。ということでこれも作ってみました。

PixiExtendsのTileMapクラスがタイルマップ用のクラスです。このクラスはフリーソフト「TileMapEditor」のjsonファイル向けに作っています。ですが扱うデータの構造が同じならだいたい何でもいけると思います(TileMapEditorのデータが1から始まる仕様になっていてそれに合わせているのでそこだけ注意してください)。

まずTileMapに使われる専用スプライトTileSpriteをSpriteから拡張して作っています。これはアニメーションが設定されていた場合に自動でアニメーションするようになっています。テンプレートの焚火はこれでアニメーションしています。

this.map = new PixiExt.TileMap();
this.map.image = resources[Resource.Image.Map].texture;

const mapData = resources[Resource.MapData.Stage1].data;
const data = {
  tileWidth: mapData.tilewidth as number,
  tileHeight: mapData.tileheight as number,
  tileColumns: mapData.width as number
}
this.map.setSizes(data);
this.map.createMapLayer(0, mapData.layers[0].data);
this.map.setAnimation(0, mapAnimationFrameList);