如果我更改标签页然后返回，我的 GIF 会冻结一段时间 (p5.js)

Question

每当我尝试运行它时，它工作正常，但是当我切换到另一个选项卡并返回时，gif 冻结的时间与我在另一个选项卡中的时间相同。我正在尝试能够运行背景和 gif。那么，你们都知道可以修复 gif 的任何方法吗？

(代码如下)

let img;
let img2;
var bgImg;
var x1 = 0;
var x2;

var scrollSpeed = 4;

var screen = 0;
var y = -20;
var x = 200;
var speed = 2;
var score = 0;

let bing


function preload() {
  bgImg = loadImage("backgwound.png");

  bing=loadSound('catbus theme song.mp3')

}

function setup() {
  createCanvas(1000, 1000);

  img = loadImage("backgwound.png");

  img2 = loadImage("catgif.gif");

  x2 = width;

bing.loop()
  
}

function draw() {
  if (screen == 0) {
    startScreen();
  } else if (screen == 1) {
    gameOn();
  } else if (screen == 2) {
    endScreen();
  }

  let time = frameCount;

  image(img, 0 - time, 0);

  image(bgImg, x1, 2, width, height);
  image(bgImg, x2, 2, width, height);

  x1 -= scrollSpeed;
  x2 -= scrollSpeed;

  if (x1 <= -width) {
    x1 = width;
  }
  if (x2 <= -width) {
    x2 = width;
  }

  scale(0.4, 0.4);
  translate(300, 1855);

  image(img2, 0, 0);
}

function startScreen() {
  background(96, 157, 255);
  fill(255);
  textAlign(CENTER);
  text("CAT BUS BIZARRE ADVENTURE", width / 2, height / 2);
  text("click any key to START", width / 2, height / 2 + 20);
  reset();
}

function gameOn() {
  background(0);
  text("SCORE = " + score, 30, 20);
  ellipse(x, y, 20, 20);
  rectMode(CENTER);
  rect(mouseX, height - 10, 50, 30);
  y += speed;
  if (y > height) {
    screen = 2;
  }
  if (y > height - 10 && x > mouseX - 20 && x < mouseX + 20) {
    y = -20;
    speed += 0.5;
    score += 1;
  }
  if (y == -20) {
    pickRandom();
  }
}

function pickRandom() {
  x = random(20, width - 20);
}

function endScreen() {
  background(150);
  textAlign(CENTER);
  text("GAME OVER", width / 2, height / 2);
  text("SCORE = " + score, width / 2, height / 2 + 20);
  text("click space to play again", width / 2, height / 2 + 40);
}

function mousePressed() {
  if (screen == 0) {
    screen = 1;
  } else if (screen == 2) {
    screen = 0;
  }
}

function reset() {
  score = 0;
  speed = 2;
  y = -20;
}

Answer 1

我无法找到问题的原因，但我找到了一个潜在的解决方法，它甚至可能对您以后添加猫跳跃能力时有所帮助。

我没有使用 loadImage，而是使用 createImg - 这是 link to the docs。

  let cat = {
    x: 50,
    y: 730
  }


  ...
  // in setup()

  catGif = createImg("catgif.gif");
  catGif.position(cat.x, cat.y);
  catGif.size(200, 100);

如果您遇到困难，我已经实施了此 p5.js sketch 中的更改来为您指明正确的方向。

然后，在您的 draw() 方法中，您可以根据一些速度动态设置猫的位置，我建议您看一下 this post，因为它应该有助于您理解力以及如何将它们应用到您的游戏中。

Answer 2

这里的问题实际上是p5.js中的一个bug。 _animateGif 中获取当前时间的代码有奇怪的错误（有时它会获取过去的时间）。我不明白为什么该代码的作者决定使用 pInst._lastFrameTime + pInst.deltaTime 而不是仅使用 pInst.millis().

如果我更改标签页然后返回，我的 GIF 会冻结一段时间 (p5.js)

If I change tabs and come back, my GIF freezes for a while (p5.js)

javascript

gif

p5.js

animated-gif