沢山のスプライト

スプライトの扱い方には慣れてきましたか?
今回は、沢山のスプライトを扱う方法についてのお話です。
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はとてもシンプルで扱いやすいライブラリだと思います。
是非挑戦してみてくださいね。
ここまで読んでいただき有難うございました。

前回の記事

おまけ動画(こちらもよろしくお願いします)