Processing.js Groupに入れた画像を下降させる方法

テクノロジア魔法学校で学んだことを、アレンジしてVSCodeで作っております。
やりたいことは、ロードした画像「appleImage」をキャンバスの上に表示して、それをvelocityを使って下降させたいです。
1つだけであればできた
「function gamePlaying(){
apple.velocity.y += 0.005;
}」
のですが、new Groupでくくると動作がしなくなる／1つのみしか動かない等、になります。
今回のコードでは、for文で、10個のImageをすべて下降させたいです。

var apple;
var appleGroup;

//画像の変数
var appleImage;

function preload(){
    appleImage = loadImage('apple.png');
}

function setup(){
    createCanvas(1500,800);

    //リンゴを作る
    appleGroup = new Group;
    for(var i=0; i<10; i++){
        apple = createSprite(random(width),50);
        apple.addImage(appleImage);
        appleGroup.add(apple);
    }
}

function draw(){  
    background(200, 220, 230);

    gamePlaying();
    drawSprites();
}


function gamePlaying(){
   appleGroup.velocity.y += 0.005;
}

また、使用している教材ではグループを作る際に、
createGroupを使用しておりますが、VSCode上ではエラーになること、
また検索を駆使してもcreateGroupがヒットしないことが疑問です。
こちらもお分かりであれば、お伺いしたく思います。

よろしくお願いいたします。

行動規範の内容に同意します

回答1件

ベストアンサー

その教材については全く分かりませんが、SpriteやGroupはp5.playでしょうか？
p5.play - a game library for p5.js
以下そうだった場合の話になります。

サンプルを確認してます。
p5.play Example - Sprite Groups

４５行目以降にこうあります。

js
1  for(var i = 0; i<ghosts.length; i++) {
2    var g = ghosts[i];
3    //moving all the ghosts y following a sin function (sinusoid)
4    g.position.y += sin(frameCount/10);
5  }

Groupは配列のようになっているので、ループすればいいようです。

js
1var appleGroup;
2var appleImage;
3
4function preload(){
5    appleImage = loadImage('apple.png');
6}
7
8function setup(){
9    createCanvas(1500, 800);
10
11    appleGroup = new Group();
12    for(var i = 0; i < 10; i++){
13        var apple = createSprite(random(width), 50);
14        apple.addImage(appleImage);
15        appleGroup.add(apple);
16    }
17}
18
19function draw(){  
20    background(200, 220, 230);
21
22    gamePlaying();
23    drawSprites();
24}
25
26function gamePlaying(){
27  for(var i = 0; i < appleGroup.length; i++) {
28    var apple = appleGroup[i];
29    apple.velocity.y += 0.005;
30  }
31}

createGroupがヒットしないこと

過去にはあったが今はなくなった？その教材でカスタマイズされている？
詳しくないので私にはわかりません。

投稿2020/08/21 11:17

編集2023/07/23 04:42

TN8001

総合スコア9396

kuxxxxrx

2020/08/24 00:51

確認遅くなり、申し訳ありません、ありがとうございます！ preload内のループ処理で、やりたいことができました！！ p5.playではないかとのことですが、ここ辺りの知識がなく、そもそも教材上でははっきりとp5.jsとなかったため、手探りで探していたところ、コードがほぼ同様だったので、p5.jsと決めつけておりました。 p5.playという言語は初めて聞きましたので、勉強になりました、自分でも調べてみます！