p5.playをやる記事#08_当たったら跳ね返る

前回の記事 | 次回の記事

p5.playの使い方を解説しております。
第1回の記事はこちらにありますのでご参照ください。

当たったら跳ね返る

今回は衝突判定のお話です。
スプライト同士の衝突を判定し、跳ね返りをさせてみましょう。

今回は2枚の画像を用意しました。(お使いください)

先ずは2つのスプライトを用意します。(1つじゃ意味ないですからね)
両方のスプライトは、debugモードをtrueにしてありますが、
これは当たり判定をするエリアを表示するものです。(それっぽく見えます)

スプライト.debug = true;

全体のコードは下記の通りです。

let imgA, imgB;// 1-1, スプライトで使う画像データを格納する変数(2つ)
let sprA, sprB;// 1-2, スプライトを格納する変数(2つ)

function preload() {
	imgA = loadImage("t_tanu.png");// 2-1, タヌキ
	imgB = loadImage("t_ninja.png");// 2-2, ニンジャ
}

function setup() {
	createCanvas(windowWidth, windowHeight);
	frameRate(32);
	noSmooth();
	angleMode(DEGREES);
	// 3-1, スプライトA(タヌキ)
	sprA = createSprite(width/2-200, height/2);
	sprA.addImage(imgA);
	sprA.debug = true;// デバッグ用表示
	// 3-2, スプライトB(ニンジャ)
	sprB = createSprite(width/2+200, height/2);
	sprB.addImage(imgB);
	sprB.debug = true;// デバッグ用表示
}

function draw() {
	background(33);
	drawSprites();
}

ちょうど良い距離に2つのスプライトが並んでいますね。

衝突をさせてみる

2つのスプライトを衝突させ、跳ね返す処理の流れは下記の通りです。

1. sprAを右に動かします
2. sprBを固定します(衝突されても動きません)
3. bouce関数を使って衝突判定をします

sprA(タヌキ)をsprB(ニンジャ)の方向へ動かします。

スプライト.setSpeed(速度, 角度);

sprBは、immovableをtrueにしておく事で固定させる事ができます。

スプライト.immovable = true;

draw関数の中でbounce関数を使い、両者の当たり判定をします。

スプライトA.bounce(スプライトB);

全体のコードは下記の通りです。

let imgA, imgB;
let sprA, sprB;

function preload() {
	imgA = loadImage("t_tanu.png");
	imgB = loadImage("t_ninja.png");
}

function setup() {
	createCanvas(windowWidth, windowHeight);
	frameRate(32);
	noSmooth();
	angleMode(DEGREES);
	// スプライトA(タヌキ)
	sprA = createSprite(width/2-200, height/2);
	sprA.addImage(imgA);
	sprA.debug = true;
	sprA.setSpeed(4, 0);// 1, sprAを右に動かします
	// 3-2, スプライトB(ニンジャ)
	sprB = createSprite(width/2+200, height/2);
	sprB.addImage(imgB);
	sprB.debug = true;
	sprB.immovable = true;// 2, sprBを固定します
}

function draw() {
	background(33);
	drawSprites();
	sprA.bounce(sprB);// 3, bouce関数を使って衝突判定をします
}

見事に跳ね返りました。
debug表示(緑の枠がそうです)があるのでわかりやすいですね。

次回は沢山のスプライト同士における衝突判定のお話になります。

前回の記事 | 次回の記事

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