[phina.js]Colliderクラスを作ってみた

きっかけ

phina.jsでは、当たり判定メソッドがあらかじめ用意されていて便利ですが、少し凝った当たり判定をしたい時は当たり判定用のダミーオブジェクトを使うなど、自分で工夫する必要があります。
例えばUnityでは、オブジェクトにColliderというコンポーネントを追加すると、視覚的に衝突の判定が確認できます。このColliderのようなものがphina.jsで実装できないかと思ったのがきっかけです。

ColliderをAccessoryとして設計

phina.jsにはUnityのコンポーネント方式のようなAccessoryというクラスがあります。その名前のとおり、アクセサリーのように様々な機能などの着脱ができるようにしたものです。phina.jsのサンプルに良く見られるTweenerやPhysicalもAccessoryを継承しています。
作り方などは、phina.jsでアクセサリを使ってみよう＆作ってみよう！が参考になると思います。

サンプル

[runstantで確認]

• サンプルでは、2つのキャラクターが壁に向かって移動し、壁にぶつかると反転移動します。
• キャラの周りに表示されているのが今回作ったColliderです。
• Colliderを単純にアタッチすると、下のキャラのようにスプライトのサイズに合わせた大きさになります。
• 上のキャラは、Colliderを実際の画像ギリギリの幅にサイズ調整しているので、衝突の仕方に違いが出ているのが分かるかと思います。

使い方

自作の拡張クラスの一部として個人のリポジトリにアップしていますので、htmlで以下のように読み込めば使用できます。

<script src="https://cdn.jsdelivr.net/gh/phi-jp/phina.js@v0.2.3/build/phina.js"></script>
<script src="https://cdn.jsdelivr.net/gh/alkn203/phina-extensions@master/build/phina-extensions.min.js"></script>

対象オブジェクトにアタッチする

obj.collider.show();

• 一番簡単な方法は、上のようにオブジェクトのプロパティとしてアクセスしながらアタッチする方法です。
• デフォルトでは非表示になっているので、showで表示させます。

サイズを変える

obj.collider.setSize(width, height);

• デフォルトでは対象オブジェクトのサイズになりますが、サイズを指定して変更することができます。
• 意図的に当たり判定を小さくしたい時などに使えます。

位置を変える

obj.collider.offset(x, y);

• デフォルトでは対象オブジェクトの中心に表示されますが、オフセット値（相対座標）を指定して位置を変更することができます。
• 対象オブジェクトより少し前にずらして、先読み判定でめり込みを防止する時などに使えます。

当たり判定を行う

obj.collider.hitTest(target.collider);

• このメソッドの引数は、同じColliderです。つまり、対象オブジェクトにもColliderがアタッチされている必要があります。
• ヒットすればtrue、そうでない場合はfalseを返します。

課題

• パフォーマンスは二の次に考えて設計しましたので、大量のオブジェクトの場合どうなるかは未検証です。
• 今の仕様では1つのColliderで矩形のみですので、Unityのように複数のColliderかつ、矩形だけでなく円もということになると、typeやidで区別するなど抜本的な仕様変更が必要かと思います。

まとめ

今回はColliderをサンプルにしましたが、phina.jsのAccessoryの拡張性を少しは感じて頂けたかと思います。