p5.js - P5运行后台

Question

我正在尝试制作横向卷轴游戏，但我卡在了正在运行的背景部分。我一直在寻找解决方案并发现了一些解决方案，但他们使用的是 javascript 而不是 p5 库。
我从 The Coding Train 上的教程开始，并查看了他们网站上的所有示例和引用资料。

虽然我可以通过使用其他东西来避免这种情况，只是为了防止有人遇到同样的问题，有人可以在p5中提供解决方案吗？免责声明:我是 p5.js 的菜鸟。

稍后编辑:通过运行背景，我的意思是从左到右循环移动背景图像

Answer 1

老实说，从我们在评论中的讨论来看，您似乎想多了。

general approach to animation (该教程针对的是 Processing，但原则也适用于 P5.js)如下:

• 第 1 步:创建一组表示场景状态的变量。
• 第 2 步:使用这些变量每一帧绘制场景。
• 第 3 步:随着时间的推移更改这些变量以使场景移动。

您已经知道该怎么做:加载包含您的背景的图像，然后绘制该图像，并在每一帧中稍微移动它。

您说过要调用 background() 函数而不是 image() 函数，这没有多大意义。 background() 函数并不比 image() 函数更有效。事实上，background() 函数只是为您调用了 image() 函数!

来自 the P5.js source :

p5.prototype.background = function() {
  if (arguments[0] instanceof p5.Image) {
    this.image(arguments[0], 0, 0, this.width, this.height);
  } else {
    this._renderer.background.apply(this._renderer, arguments);
  }
  return this;
};

P5.js 只是检查参数是否为图像，如果是，则为您调用 image() 函数。因此，说使用 image() 函数比使用 background() 函数“效率低下”是没有意义的。

退一步说，在您A:理解问题并且B:确实遇到问题之前，您真的应该避免考虑这些微优化。在实际测量代码的性能之前，不要对“效率”做出假设。

不管怎样，回到你的问题。您还说过要加载图像两次，这是您不应该做的。您可以只加载一次图像(确保您在 setup() 函数而不是 draw() 函数中执行此操作，然后绘制该图像两次:

var img;
function preload() {
  img = loadImage("image.jpg");
}
function setup() {
  image(img, 0, 0);
  image(img, 100, 100);
}

因为您可以绘制两个图像，所以您只需将它们并排绘制即可。下面是一个使用彩色矩形更清楚地显示该方法的示例:

var offsetX = 0;

function setup() { 
  createCanvas(200, 200);
} 

function draw() { 
  background(0);
	
  fill(0, 255, 0);
  rect(offsetX, 0, width, height);
	
  fill(0, 0, 255);
  rect(offsetX + width, 0, width, height);
	
  offsetX--;
  if(offsetX <= -width){
 	offsetX = 0;	
  }
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.5.14/p5.js"></script>

还有其他方法可以做到这一点，比如创建一个包含包装本身的图像。但一般方法几乎相同。

如果您仍然卡住，请尝试 break your problem down into smaller pieces就像我在这里所做的那样。例如，请注意我创建了一个处理图像的简单草图，以及另一个处理移动矩形的简单草图。然后如果你卡住了，请发一个MCVE在一个新的问题帖子中，我们将从那里开始。祝你好运。