Question

我试图制作一个侧滚动游戏，我被困在正在运行的背景部分。我找了解决方案而且我发现了一些，但是他们使用的是javascript而不是p5库我从The Coding Train上的教程开始，查看了他们网站上的所有示例和参考资料。

虽然我可以通过使用别的东西来避免这种情况，只是为了防止它出现在同一个问题上，有人可以提供解决方案吗

中的？免责声明：我是一个总的noob 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()函数效率较低＆＃34;并不是真的有意义。而不是使用background()函数。

退一步，在 A：了解问题并且 B：确实存在问题之前，您应该真的避免考虑这些微优化。不要做出关于＆＃34;效率＆＃34;的假设。直到您实际测量了代码的性能。

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

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

由于您可以绘制两幅图像，因此您只需将它们绘制在一起即可。以下是使用彩色矩形更清晰地显示方法的示例：

＆＃13;

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;	
  }
}

＆＃13;

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

＆＃13;

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

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

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中运行背景

2 个答案: