Sprite Streaming

CS Discoveries
1

I have had this happen with a few of my students and I am guessing it is velocity related…but can’t seem to get it straightened out on this one. The game was working OK, but when she added the background moving the other sprites starting streaming. Thanks for the help!

2

@kabraham ,

Can you explain in more detail what you mean by streaming? if you are referring to the characters being redrawn over and over again, it’s because for an animation to work, the original instance of the sprite needs to be covered up each time it is drawn in a new position. I don’t see that you have a background block to cover up previous instances of the drawn sprites…

If this doesn’t make sense, let us know…

Mike

3

Hello @kabraham,
I’ve reviewed your sample and concluded there was many issues so I’ll provide my revised code below with some possibly helpful comments

// Create your variables here
var movingFarm = createGroup();
var score = 0;


// Create your sprites here

// establish a texture buffer so that there will always be a background covering sprites
movingFarm.add(createSprite(200, 200))
movingFarm.add(createSprite(-200, 200))
// var farm = createSprite(200, 200);
// farm.setAnimation("farm_land_1");
// farm.velocityX = 3;
movingFarm.setAnimationEach("farm_land_1"); // setting all textures to the same animation
movingFarm.setVelocityXEach(3); // this makes it much harder instead of using an even number
movingFarm[0].mirrorX(-1); // makes it so the second part of the image is less noticable

var danger = createSprite(52, 329);
danger.setAnimation("ac_spidder-removebg-preview-removebg-preview.png_1");

var player = createSprite(200, 200);
player.setAnimation("buterfly-removebg-preview.png_1");
player.scale = 0.5;

var flower = createSprite(347, 86);
flower.setAnimation("flowerrr-removebg-preview.png_1");
flower.scale = 0.4;

// Create your functions here
function draw() {
  if (keyWentDown("right")) {
    player.velocityX = 3;
  }
  if (keyWentDown("down")) {
    player.velocityY = 3;
  }
  if (keyWentDown("left")) {
    player.velocityX = -3;
  }
  if (keyWentDown("up")) {
    player.velocityY = -3;
  }
  if (player.isTouching(flower)) {
    scoreup();
  }
  if (keyDown("space")) {
    danger.velocityX = 3;
  }
  // draw background (wasn't implemented in the draw loop so it wasn't even executing before all this)
  loop();
  // update sprites
  drawSprites();
  // ensure the score call stays on top of the draw stack call which was also incorrectly placed
  showscore();
}

function loop() {
  // loop through the texture property buffers we established
  for (var i = 0; i < movingFarm.length; i++) {
    var farm = movingFarm[i]; // easier object reference
    var leftOrigin = farm.x - (farm.animation.getWidth() / 2); // easier to reference from the point of origin
    if (leftOrigin + farm.velocityX >= 400) { // takes into account the given speed of the instance to see if it needs to be reset
      farm.x = -200 - (400-leftOrigin); // sets it along with the leftover position of 400 so no overlapping occurs
    }
  }
  // farm.setAnimation("farm_land_" + randomNumber(1, 4)); (this doesn't work at all... even after setting it to work)
}

function showscore() {
  textSize(20);
  text("score:" + score, 10, 10, 100, 100);
  fill("black");
}
// idek what your doing here... so I'll just implement the incrementor in here
function scoreup() {
  flower.x = randomNumber(9, 393);
  score = score + 1;
  // if (player.isTouching(flower)) {
  //   score = score + 1;
  //   flower.y = randomNumber(-10, -50);
  //   flower.x = randomNumber(50, 350);
  // }
  // if (player.isTouching(flower)) {
  //   score = score + 1;
  //   player.y = randomNumber(-10, -50);
  //   player.x = randomNumber(50, 350);
  // }
  // drawSprites();
}

hopefully this gives a better understanding as to why the original code wasn’t executing as intended if not someone may be able to explain it better than i can

Varrience