Background image covers text

Programming
1

I am new to p5play and am attempting to create a Flappy Bird game. The game runs correctly, but the text I am trying to display does not show up. After commenting out code related to the background image, the text appears, so I assume the background image is covering the text.

I have attempted to add the text after the code related to the background image, but since I am also using a camera to track the movement of the Flappy Bird and make the background move along, I am unsure of where to place the text.

The code I am using in setup() and draw() is as follows:

function setup() {
  
    // allSprites.debug=kb.presses('w')
    createCanvas(400, 600);
    
    //Create sky & ground sprite
    sky=new Sprite(skybg);
    sky.collider='n';
    ground = new Sprite(groundImg,200, 350, 750, 40, "n");
    groundImg.resize(1500,0);

    //Set the camera location
    camera.x = 150;
    gameOver = true;
    canStartNewGame = true;
}

function draw() {


    allSprites.debug=kb.pressing('w')
    //Starts the game with a mouse pressed or space bar
    if (mouse.presses() || kb.presses("space")) {
        bird.vel.y = -9;
    
        if (canStartNewGame) {
          newGame();
        }
    }

    //If the game isn't over run the code
    if (!gameOver) {

    //Create new pipes every 60 frames (1 second)

    //Get rid of pipes when they reach the left side of screen

    //remove points when bird eats it
    
    
        //Wrap ground 
        if (camera.x > ground.x + width / 2) {
            ground.x += width;
            sky.x +=width
        }
        
    }

  //The camera follows the bird's x axis movement
    camera.x = bird.x + 150;
    
    // Adjust the position of the sky based on the camera's position
    let skyX = skybg.width / 2 - camera.x * 0.2;
    image(skybg, skyX, 0);

    camera.on();

    if (!gameOver) {
          camera.x = bird.x + 150;
          world.step();
    }
    // Add text to show score
    text("score : " + score, bird.x, bird.y);

}

I am trying to add the following text to show the score: text("score : " + score, bird.x, bird.y); on the last line of function draw().

2

To fix the issue and make the text appear above the background image, you can follow these steps:

  1. Move the line text("score : " + score, bird.x, bird.y); above the line image(skybg, skyX, 0);.

Here’s the updated code:

function draw() {
  allSprites.debug=kb.pressing('w')

  //Starts the game with a mouse pressed or space bar
  if (mouse.presses() || kb.presses("space")) {
    bird.vel.y = -9;

    if (canStartNewGame) {
      newGame();
    }
  }

  //If the game isn't over run the code
  if (!gameOver) {
    //Create new pipes every 60 frames (1 second)

    //Get rid of pipes when they reach the left side of screen

    //remove points when bird eats it

    //Wrap ground 
    if (camera.x > ground.x + width / 2) {
      ground.x += width;
      sky.x +=width;
    }
  }

  //The camera follows the bird's x axis movement
  camera.x = bird.x + 150;

  // Adjust the position of the sky based on the camera's position
  let skyX = skybg.width / 2 - camera.x * 0.2;

  // Add text to show score
  text("score : " + score, bird.x, bird.y);

  image(skybg, skyX, 0);

  camera.on();

  if (!gameOver) {
    camera.x = bird.x + 150;
    world.step();
  }
}

This change will ensure that the text is drawn on top of the background image, allowing it to be visible.