【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]という感じで使ってください。

あとがき

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

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

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

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

爆弾野郎

同カテゴリー記事

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

最初にカードの配置を覚えてする神経衰弱。瞬間の記憶力が試されるゲームです。
同色のブロックを4つ以上つなげると消える落ちもの系パズルゲームです。連鎖で高得点を狙おう!
障害物を避けながらただただ上を目指すゲームです。オンラインランキング機能付き
変な顔を一か所入れ替えて連鎖で全消しを狙うゲーム。全部消えたときはスッキリ快感です。

記事の感想・コメント

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

コメントを残す

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

ゲームジャンルタグ

新着技術ブログ記事

新着開発日記