如果我更改标签并返回，我的 GIF 会冻结一段时间（p5.js）

Posted 2023-03-25

【中文标题】如果我更改标签并返回，我的 GIF 会冻结一段时间（p5.js）

【英文标题】：If I change tabs and come back, my GIF freezes for a while (p5.js)

【发布时间】：2021-11-22 13:00:38

【问题描述】：

Code for Catbus game

每当我尝试运行它时，它都可以正常工作，但是当我切换到另一个选项卡并返回时，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;

【问题讨论】：

A GIF 是一种非常具体的文件格式，而不是动画的通用术语。您可能想要修复您的标题/标签。

@ChrisG 问题在于 6 帧猫 GIF（实际上是一个 GIF 文件）

@Samathingamajig 我看了GIF文件，没问题。它被设置为永远循环。

一次只能问一个问题。

【参考方案1】：

我无法找到导致问题的路径原因，但我找到了一种潜在的解决方法，它甚至可能在以后添加猫跳跃的能力时使您受益。

我使用的是createImg，而不是loadImage - 这里是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，因为它应该可以帮助您了解力以及它们是如何产生的应用于您的游戏。

【讨论】：

这会创建一个完全独立的<img> DOM 元素。这将防止画布上的任何内容出现在 GIF 之上。它还会阻止 GIF 包含在saveCanvas() 生成的任何图像中。它也不适用于任何适用于 image() 的 p5.js 方法，例如 tint()、blend() 或 imageMode()。

@PaulWheeler 对你所说的一切都是肯定的。但是，让 gif 跳转不需要其中任何一种方法。

【参考方案2】：

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

【讨论】：

GitHub 问题：github.com/processing/p5.js/issues/5434