p5play开发Flappy Bird：背景遮挡文本不显示问题求助

问题根源 #

你用camera跟随小鸟时，游戏里的背景、小鸟都是在相机变换后的坐标系下绘制的。如果文本也在这个坐标系里，要么会被每次重绘的背景盖掉，要么会跟着相机移出屏幕。

两种可行解决办法 #

办法1：固定在屏幕上显示文本（推荐用于分数） #

用p5的push()和pop()隔离相机的变换效果，先绘制游戏内容，再回到原始坐标系绘制固定位置的文本，这样文本不会随相机移动，也不会被背景覆盖。

修改后的draw()代码示例：

function draw() {
  // 保存当前绘图状态，开启相机模式
  push();
  camera.zoom = 2;
  camera.follow(bird);
  
  // 先绘制所有游戏元素：背景、小鸟、管道等
  background(skyImg);
  bird.draw();
  // 此处添加管道、碰撞检测等其他游戏代码
  
  // 退出相机模式，恢复原始绘图状态
  pop();
  
  // 在屏幕固定位置绘制分数（比如左上角）
  fill(0); // 设置文本颜色，避免与背景色重合
  textSize(20);
  text("分数：" + score, 20, 30);
}

办法2：让文本跟着小鸟移动 #

如果想让文本在小鸟旁边显示，只要把文本绘制放在所有游戏元素的最后，确保它在背景、管道之后绘制，就能显示在最上层。

修改后的draw()代码示例：

function draw() {
  // 开启相机跟随
  camera.zoom = 2;
  camera.follow(bird);
  
  // 先绘制背景
  background(skyImg);
  
  // 绘制小鸟、管道等元素
  bird.draw();
  // 其他游戏逻辑代码
  
  // 最后绘制文本，确保在最上层
  fill(0);
  textSize(16);
  text("分数：" + score, bird.x + 10, bird.y - 20); // 相对于小鸟的偏移位置
}

额外提醒 #

• 必须给文本设置fill()颜色，默认颜色可能和背景色一致，就算没被覆盖也看不见；
• 固定位置的文本用屏幕坐标（比如20,30），跟随小鸟的文本用小鸟坐标加偏移值；
• 绘制顺序是核心：先画背景，再画游戏元素，最后画文本，这样文本才不会被前面的内容覆盖。

内容的提问来源于stack exchange，提问作者Mia W