以下の記事にも書いた、p5.js のライブラリ「p5play」の話です。
●p5.js のライブラリ「p5play」について基本的な情報をピックアップして記載してみる - Qiita
https://qiita.com/youtoy/items/5233d40dc24f214c6cf3
今回は、以下の試作に使った内容について書いていきます。
上記の内容は、「2つのグループ化された矩形」があり、「矩形のグループはマウスカーソルの動きに合わせて移動する」というもので、なおかつ、「矩形と円のスプライトが重なった場合、矩形の色が重なった円と同じ色に変化する」というものです。
今回の内容
今回の内容は、スプライト同士の衝突判定などを扱う「Collisions and Overlaps」の話で、それをグループ間で扱う話です。
その元になったサンプルは、公式ページに掲載されています。公式サンプルでは、スプライト 1つとグループとの間で overlaps を用いた処理が行われています。
●p5play : Group ＞ Collisions and Overlaps
https://p5play.org/learn/group.html?page=2
公式サンプルは 1つのスプライトとスプライトのグループとの間での話ですが、自分が試したものは、両方ともスプライトのグループになります。
そのようなことができることは、公式ページの説明では書いてあります。
以下が英語の説明文ですが、内容としては「Collisions and Overlaps」は 2つのスプライト間で使うだけでなく、スプライトとグループ・グループとグループでも使えるという記載です。
Collision and overlap functions aren't just for detecting events between two sprites. You can also check for collisions and overlaps between sprites and groups or between groups.
それを、公式プログラムに手を加える形で試してみます。
プログラムの内容
冒頭に動画で掲載していた、今回のお試しに使ったプログラムは、以下のとおりです。
let players, gems;
function setup() {
new Canvas(560, 456);
noStroke();
gems = new Group();
gems.diameter = 10;
gems.x = () => random(0, canvas.w);
gems.y = () => random(0, canvas.h);
gems.amount = 80;
players = new Group();
players.y = () => canvas.h / 2;
players.amount = 2;
players[0].x = 0 + 40;
players[1].x = 0 + 120;
players.overlaps(gems, test);
}
function test(player, gem) {
player.color = gem.color;
gem.remove();
}
function draw() {
background(240, 255 * 0.7);
players.moveTowards(mouse);
}
gems のほうは、公式サンプルと同じです。
player のほうを、players として 2つのスプライトのグループにしています。
そのグループを使った処理は以下となっています。
- マウス操作で動く players は、グループ全体が同じ動きをする（2つのスプライトで個別に動くことはない）
- overlaps はグループ間で適用
- overlaps に紐付いた test の処理では、gems と player の中の、重なりが生じたスプライト同士で処理が行われる（2つあるうち gem と重なったほうの player の色が、重なった gem の色に変化する）
公式のサンプルでは、「スプライト同士が重なった場合、gem が消える」という動作でしたが、その部分はさらに「player の色が変わる」という要素を加えてみました。
そして、グループ間で overlaps を使う部分の話を説明します。
基本的に、overlaps に紐付けた test の中の処理は、グループ間での処理とする場合も、公式サンプル通りで（1つのスプライトとグループの間での処理を行うのと同じような形で）、両グループのスプライト 1つずつを示す変数（上記では player と gem）を用意して、それを扱えばうまくいきました。
overlaps で扱う元が、単体のスプライトなのかスプライトのグループなのかに関係なく、同じように扱えるのは、今回の事例ではとても楽でした。
さらに、3つ以上のグループで「Collisions and Overlaps」を使ってみるのも面白そうかと思いました。