运行 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() 函数 "less efficient" 真的没有意义。

退一步说，在您 A: 理解问题并且 B:[=66 之前，您真的应该避免考虑这些微优化=] 其实有问题。在实际测量代码的性能之前，不要对 "efficiency" 做出假设。

无论如何，回到你的问题。您还说过要加载图像两次，这是您不应该做的。您可以只加载一次图像（确保您在 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 like I've done here. For example, notice that I created a simple sketch that deals with images, and another simple sketch that deals with moving rectangles. Then if you get stuck, please post a MCVE 提出一个新问题 post，我们将从那里开始。祝你好运。

Answer 2

也许这是一个迟到的答案..但你可以将环境设为 3D，然后移动相机。

文档：https://p5js.org/reference/#/p5/camera

示例：

function setup() {
   createCanvas(windowWidth - 200, windowHeight - 200, WEBGL);
   background(175);
   frameRate(30);
}

function draw() {
   background(175);

   //move the camera Xaxis when mouse is moved
   let camX = map(mouseX, 0, width, 0,width);
   camera(camX, 0, (height/2.0) / tan(PI*30.0 / 180.0), camX, 0, 0, 0, 1, 0);

   normalMaterial();
   noStroke();
   ambientLight(251,45,43);
   box(100, 100, 50);
   ang += 0.3;
   rotateY(ang * 0.03);
}

保持冷静，祝编码愉快！

运行 P5背景

Running background in P5

p5.js