ゲームプログラミングレシピ集

ゲーム作りに必要な当たり判定のことを少し学んでみよう

javascript

衝突判定

こんにちは。継続の錬金術士なおキーヌです。

ブログ毎日更新は100日目になります。

ついに連続更新100日目達成ですね。
10日目ぐらいになってから先は長いなーと思っていたら気付けばもう100日目です。

意外に楽に達成出来ましたね。次は連続更新200日目指しましょう。

さて、前回の記事でpixi.jsの入門は完了しましたね。

次はキー入力の次にゲームとして大事な当たり判定を学んでいきましょう。

ゲーム作り入門者向けのpixi.js講座【衝突判定編】は全5回になります。

ゲーム制作界隈ではコリジョン(衝突)と言いますが当たり判定といった方が通じやすいでしょう。

この記事の内容
当たり判定とは何かを学ぶ
pixi.jsでの当たり判定はどうやって作るのか
雑に作ると処理負荷が高くなってしまう話
モートン序列について

ゲーム作りにおいて当たり判定とは一体なんなのか

ゲーム 当たり判定とは

当たり判定とは物体と物体が衝突するための判定をするためのものです。

スーパーマリオで例えると、マリオがクリボーにぶつかったときにミスになりますよね。

この時に行われている処理はマリオがクリボーに当たったか、クリボーがマリオに当たったかは
どちらも正しいのですが、プログラミング的に言えば少し違います。

正確にはマリオが持つ当たり判定のと、クリボーが持つ当たり判定が重なり合った瞬間に
条件が合致したと認識され、ミスというゲーム処理に切り替えます。

なのでクリボーに当たり判定がない状態だとマリオがクリボーにぶつかってもぶつかったと認識されません。

当たり判定はどうやって作られているか

基本的に当たり判定はキャラクターの形そのものではなく、四角か円形で行われる場合が多いです。

なぜかと言うと、プログラムは複雑な形をするほど処理数が増えるので
シンプルな四角や丸が一番処理が軽く最も利用されています。

基本的なキャラクターの当たり判定には矩形(四角)を用いることが多いです。

というのもプログラミングにおいて、一番処理負荷がかからない形は矩形(四角)ですね。

丸型も矩形に比べると複雑な部類になるのですが、そこまで重たくないので球体のキャラクターに使われます。

逆に球体のキャラクターに四角の判定があった場合、当たってもないのに当たったと判定されてしまい
不自然なゲームになってしまうので基本的に丸いキャラの当たり判定に使うのは円形になります。

pixi.jsで当たり判定はどうやって作るか

pixi.js 当たり判定

v5ではちょっと調べてないのでわかりませんが、v4の時点では当たり判定の仕組みは自分で用意しなければいけません。

DisplayObjectクラスにhitAreaという関数があるのですが、基本的にはマウスカーソルの判定に使っているようです。
上手く使えばhitArea同士で判定もできそうですが、あんまり意味がない気もしてきました。

hitArea自体もpixi.jsで生成した矩形を格納しているだけなので、結局はどこを参照するかの違いになるだけなので

無駄に矩形を生成するなら、既に生成しているSpriteのサイズと座標を取得して計算式を作れば
余計なインスタンスを増やすことなく判定できるのでそっちの方が処理負荷的に優しいかと思います。

どう実装するかはクリエイターの自由なので、自分の一番やりやすい方法で実装してしまうのが一番ですね。

雑に作ると処理負荷が高くなってしまう話

当たり判定 処理負荷

pixi.jsで当たり判定を作る項目でも言ったように、下手に当たり判定だけのインスタンスを増やしてしまうと
処理負荷が増えてしまうので、シューティングとかのような弾幕ゲーの場合、弾の分インスタンスが増えていきすさまじい処理数が膨れ上がります。

このように処理負荷が気になるタイプのゲームを作るときは雑に判定を作ってはいけないということですね。

pixi.jsはサンプルを見る限りかなりの数のオブジェクトを出して処理負荷を上げても、
むちゃくちゃ軽いようですがそれに甘えていてはゲームプログラマーとしては恥ずかしいですよね。

微々たる処理負荷軽減でも、プログラミングの場合はそれが積み重なりやすいので
出来る限り重たい処理になる書き方は避けるように技術力を上げましょう。

ですが、最初のうちはそこに力を入れるべきではなく作品を作り上げることに集中しましょう。

最近のPCスペックはかなり上がっているので2Dゲームであればそこまで気にする必要はありません。

当たり判定の処理は関数化して別ファイルに分けてそこだけ弄っても他に影響が出ないようにしておけば、
ゲーム完成後からでも基本的な判定処理を弄っても、メインプロセスに影響は殆どないと思います。

問題は問題にぶつかってから解決するのが基本です。

問題を起こさないに越したことはないんですがね(笑)

モートン序列(Z階数曲線)について

モートン序列 Z階数曲線

当たり判定のことについて記事を書こうと思って色々調べていると、モートン序列という言葉にたどり着きました。
まだ学んでいる途中なので詳しくは書けないのですが、四分木という空間分割法を使って
無駄な処理を削って高速に処理する方法だそうです。

ゲームプログラマーの中では知っていないと恥ずかしいレベルのアルゴリズムなので
私もしっかりと覚えてみたいと思います。

2進数について理解していると思ったより簡単に理解できるみたいです。

モートン序列については理解したら記事にしてみたいと思います。

というよりもスライドショーか動画にした方が良いかもしれませんね。

もしくはpixi.jsでインタラクティブな解説でも面白そうです。

次回は、【pixi.js】一番簡単な当たり判定を作ってみるになります。

それでは。

関連記事