背景图像覆盖文本

Question

我是 p5play 的新手，正在尝试制作一款 flappy 小鸟游戏。一切正常，但我的文本都没有显示。当我尝试注释掉处理背景图像的代码时，文本出现了，所以我猜背景图像只是位于文本之上并覆盖了所有文本。

我尝试在放置背景后添加文本，但由于我使用相机来跟踪我的飞翔的小鸟并使背景移动，我对应该在哪里添加文本有点困惑，所以他们出现了。

这是我的 setup() 和 draw() 函数，具有最少的额外代码（我对代码的作用有评论，但删除了不相关的实际代码以使其更简单）：

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();
    }
    text("score : " + score, bird.x, bird.y);

}

我要添加的文本是：

text("score : " + score, bird.x, bird.y);

在

function draw()

的最后一行

Answer 1

我无法运行您发布的代码。您考虑过使用

createDiv()

吗？

let txt;

function setup() {
 createCanvas(400, 400);
 txt = createDiv('');
 txt.style('font-size', '16px');
 txt.position(30, 60);
}

function draw() {
  if (frameCount % 100 == 0){
    txt.html('score: '+str(int(random(255))));
    background(random(255,100));  
  }  
}

Answer 2

其他答案不应该被接受，抱歉。

如果您希望文本位于小鸟精灵的正上方，只需将

bird.text

设置为所需的文本即可。

但如果没有，你的精灵就会覆盖文本。 p5play 在绘制循环结束时自动绘制精灵。在使用

text

手动绘制精灵或使用

sprite.draw()

绘制每个精灵之前，请使用 p5.js

allSprites.draw()

函数。