p5.playの使い方を解説しております。
第1回の記事はこちらにありますのでご参照ください。
沢山のスプライト
スプライトの扱い方には慣れてきましたか?
今回は、沢山のスプライトを扱う方法についてのお話です。
p5.playでは、Groupという機能を使う事で、スプライトをまとめて扱う事ができます。
グループの使い方
グループは、複数のスプライトを1つにまとめる機能です。(配列として扱う事も可能です)
使い方のおおまかな流れは下記の様になります。
- グループを格納する変数を用意する(グローバル変数ですね)
- グループを作る
- グループにスプライトを追加する(何個でも追加できます)
- グループにあるスプライトに色々やる
次の様にしてグループを作ります。
let tanukiGroup = new Group();// タヌキグループ
このグループに対して、add関数を使ってスプライトを追加していきます。
(好きなだけ追加する事ができます)
let tanu = createSprite(0, 0);// スプライトを作る
tanukiGroup.add(tanu);// スプライトを追加する <- ここですね!!
グループにも様々な関数が用意されており、その一例として衝突処理があります。
(スプライト同士の衝突処理でも使いましたね)
別のグループ(仮にninjaGroup)との衝突処理は、下記の様に記述できます。
これだけで、グループ同士の衝突処理ができてしまいます。
tanukiGroup.bounce(ninjaGroup);// タヌキグループとニンジャグループの衝突
これらを具体的にコードにすると下記の様になります。
let imgA, imgB;
let tanukiGroup, ninjaGroup;// 1, タヌキグループ、ニンジャグループ
function preload() {
imgA = loadImage("t_tanu.png");
imgB = loadImage("t_ninja.png");
}
function setup() {
createCanvas(windowWidth, windowHeight);
frameRate(32);
noSmooth();
angleMode(DEGREES);
tanukiGroup = new Group();// 2-1, タヌキグループを作る
ninjaGroup = new Group();// 2-2, ニンジャグループを作る
// 5個のスプライトをタヌキグループに追加
for(let i=0; i<5; i++){
let x = random(width);
let y = random(height);
let tanu = createSprite(x, y);
tanu.addImage(imgA);
tanu.debug = true;
tanu.setSpeed(4, random(360));// 適当にどこかに向かう
tanukiGroup.add(tanu);// 3-1, タヌキグループに追加
}
// 5個のスプライトをニンジャグループに追加
for(let i=0; i<5; i++){
let x = random(width);
let y = random(height);
let ninja = createSprite(x, y);
ninja.addImage(imgB);
ninja.debug = true;
ninja.setSpeed(4, random(360));// 適当にどこかに向かう
ninjaGroup.add(ninja);// 3-2, ニンジャグループに追加
}
}
function draw() {
background(33);
drawSprites();
tanukiGroup.bounce(ninjaGroup);// 4, タヌキグループ x ニンジャグループ
// 全部のスプライトを画面から出ない様にする処理
for(let spr of allSprites){
if(spr.position.x < 0) spr.position.x = width;
if(width < spr.position.x) spr.position.x = 0;
if(spr.position.y < 0) spr.position.y = height;
if(height < spr.position.y) spr.position.y = 0;
}
}
タヌキグループとニンジャグループの衝突処理がうまくいきました!!(やった!!)
お疲れ様でした。p5.playの解説は今回で最後です。
画像、アニメーション、マウスイベント、衝突処理までをやってみましたが、
いかがだったでしょうか?(何か作れそうな気がしてきますよね!?)
p5.playはとてもシンプルで扱いやすいライブラリだと思います。
是非挑戦してみてくださいね。
ここまで読んでいただき有難うございました。