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

11107 ワード
p5.js JavaScript p5.play 初学者向け JavaScript テキストリンク

前回の記事 | 次回の記事

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表示(緑の枠がそうです)があるのでわかりやすいですね。

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

前回の記事 | 次回の記事

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