p5.playをやる記事#09_沢山のスプライト

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

前回の記事

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

沢山のスプライト

スプライトの扱い方には慣れてきましたか?
今回は、沢山のスプライトを扱う方法についてのお話です。
p5.playでは、Groupという機能を使う事で、スプライトをまとめて扱う事ができます。

グループの使い方

グループは、複数のスプライトを1つにまとめる機能です。(配列として扱う事も可能です)
使い方のおおまかな流れは下記の様になります。

  1. グループを格納する変数を用意する(グローバル変数ですね)
  2. グループを作る
  3. グループにスプライトを追加する(何個でも追加できます)
  4. グループにあるスプライトに色々やる

次の様にしてグループを作ります。

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はとてもシンプルで扱いやすいライブラリだと思います。
是非挑戦してみてくださいね。
ここまで読んでいただき有難うございました。

前回の記事

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