在P5中运行后台
我试图做一个侧滚轮游戏，我被困在跑步的背景部分。我已经找到了一些解决方案，但他们使用的是javascript，而不是p5库。
我从编码列车上找到的教程开始，查阅了他们网站上的所有示例和参考资料。
虽然我可以通过使用其他的东西来避免这种情况，只是为了防止有人在同一个问题上被困在这里，有人能为这个in p5提供一个解决方案吗？免责声明:我完全是个菜鸟p5.js。
稍后编辑:运行背景指的是从左到右循环中移动背景图像。
回答 2
Stack Overflow用户
发布于 2017-09-25 19:34:03
老实说，从我们在评论中的讨论来看，这听起来像是你想得太多了。
动画的一般方法 (该教程用于处理，但原则也适用于P5.js )如下：
- 步骤1:创建一组变量，表示场景的状态。
- 步骤2:使用这些变量来绘制每个帧的场景。
- 步骤3:随着时间的推移，会改变这些变量以使场景移动。
您已经知道该做什么:加载包含背景的图像，然后绘制该图像，并将其移动到每一帧。
您已经说过要调用background()函数而不是image()函数，这是没有意义的。background()函数并不比image()函数更有效。实际上，background()函数只是为您调用image()函数！
来自P5.js源
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;
};is只需检查参数是否是图像，如果是，则为您调用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>
还有其他方法可以这样做，比如创建一个包含包装本身的图像。但是一般的方法都是一样的。
如果你还被困住了，请试着像我在这里做的那样把你的问题分解成更小的部分。例如，请注意，我创建了一个处理图像的简单草图，以及另一个处理移动矩形的简单草图。如果你被卡住了，请在一个新的问题贴上贴一个MCVE，我们就从那里开始。祝好运。
Stack Overflow用户
发布于 2019-10-24 16:53:23
也许这是个迟来的答复..。但是你可以让环境变得三维，然后移动相机。
博士：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);
}保持冷静和快乐的编码！
https://stackoverflow.com/questions/46411729
复制相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号