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つのスプライトを衝突させ、跳ね返す処理の流れは下記の通りです。
- sprAを右に動かします
- sprBを固定します(衝突されても動きません)
- 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表示(緑の枠がそうです)があるのでわかりやすいですね。
次回は沢山のスプライト同士における衝突判定のお話になります。