【pixi.jsゲームテンプレート】更新処理とタイルマップを改善

私の自作ゲームエンジンの問題が見つかった部分を改善しました。

ついでにバージョン番号も付けることにしたのでとりあえず現在の出来は7割くらいかなってことでver0.7としました。

更新処理の改善

今までのテンプレートではupdateメソッドで更新処理を行うにはSceneクラスがもっているregisterUpdatingObjectメソッドで登録する必要がありました。これはいいんですがこの登録できるクラスがSceneしかないためゲームを作るにはちょっと無理があることが分かりました。

addChildする際にその対象となるクラスすべてがregisterUpdatingObjectメソッドを持っていて更新処理を行うようにしておけばこの問題は解決されるはず！！

ということでContainer、SpriteにregisterUpdatingObjectメソッドを持たせ更新処理できるようにしました。

その際にいちいちregisterUpdatingObjectメソッドで登録するのも面倒なのでaddUpdateChildというメソッドを作りaddChildとregisterUpdatingObject両方を行ってくれるようにしました。なので更新処理を行いたいクラスは

this.addUpdateChild(player);

と書くだけでOKです。

本当はaddChildを拡張して作りたかったんですができませんでした(^^;)まぁしゃーないね。

タイルマップレイヤー

TileMapクラスに問題が見つかったので改善しました。

レイヤーになってるつもりだったんですが実際ちゃんとなってませんでした(;^ω^)

でこんな感じに使うようにしました。

map = new TileMap();
const mapData = resources[Resource.MapData.Stage1].data;
const data = {
  tileWidth: mapData.tilewidth as number,
  tileHeight: mapData.tileheight as number,
  tileColumns: mapData.width as number,
  tileRows: mapData.height as number //追加
}
map.setSizes(data);
map.prepareLayers(2);//追加。作るレイヤーの数
map.createMapLayer(0, mapData.layers[0].data);
map.setAnimation(0, mapAnimationFrameList);
map.setCollisionData(mapData.collision);
this.addUpdateChild(map);

prepareLayersでレイヤーを作ります。引数は作るレイヤーの数です。

レイヤー自体はContainerクラスなのでタイルマップ以外でもなんでもaddChildまたはaddUpdateChildできます。

なのでこのTileMapクラスをそのままステージとして使えます。欲しいだけレイヤーを作って0番が地面のタイルマップ、1番が敵キャラ、2番がプレイヤー、3番が上にくるタイルマップなんて使い方もできます。

レイヤーはlayersという名前の配列になっているので直接触る場合はmap.layers[0]という感じで使ってください。

あとがき

今回の問題点はテストとして作ったボンバーマンもどきを開発していた時に見つかりました。

やはり実際にゲームを作ってみないと問題があっても気づかないですね(^^;)

テストとして作ったボンバーマンもどきのリンクを張っておくので遊んでみてください。

私のテンプレートでここまでのものが作れます(まだバーチャルキーパッドは公開してないですが)