【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/

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

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

タイルマップについて

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

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

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

mapAnimationFrameListはアニメーションさせたいスプライトのフレーム番号とアニメーションパターン、そして画像を切り替える期間を設定します。マップ生成時にこのリストに登録されているスプライトだけアニメーションが設定されます。
マップの画像とjsonファイルはwww/assetsにファイルを置いてResourceオブジェクトのImageとMapに記述しておきます。
そして下記のようにTileMapクラスを作って画像を設定しています。
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);

上記ではマップデータからまずマップのタイルのサイズとマップの幅などを設定しています。

次にレイヤーのデータを読み込んでマップを作ります。複数レイヤーを使う場合はレイヤーの番号を変えて必要な分だけ書いてください。

最後にアニメーションの設定をします。アニメーションさせないなら書かなくてOKです。アニメーションする際はregisterUpdatingObject()するのを忘れないでください。

 

このタイルマップクラスには当たり判定の機能はありません。ゲームによって判定の仕方が違ってくると思うのでつけていません。当たり判定をつける場合はこれを拡張して作るといいと思います。一応collisionDataという当たり判定用のデータを入れるプロパティは作っています。

※マップの当たり判定は作ったら公開していこうかなとは思ってます(‘ω’)ノ

同カテゴリー記事

当サイトのオリジナルゲーム(ランダム表示)

宇宙船を操作して遭難しているエイリアン達を助けに行きます。全部で15ステージ。
簡単な計算問題を制限時間内に何問解けるかな?頭の体操にどうぞ。
enchant.jsでこんなのもできるのか?と試したテストゲーム。
同じ色の宝石の数字を足してゾロ目や順目を3つ以上作って消すゲームです。

記事の感想・コメント

※コメントはまだありません※

コメントを残す

メールアドレスが公開されることはありません。

ゲームジャンルタグ

新着技術ブログ記事

新着開発日記