在P5運行背景

Question

我試圖做一個側滾動遊戲，我被困在運行的背景部分。我尋找解決方案，我發現了一些，但他們使用JavaScript而不是p5庫。
我從The Coding Train上的教程開始，查看了他們網站上的所有示例和參考資料。

雖然我能避免這種情況，通過使用別的東西，只是因爲它是在這裏萬一有人被卡住就同一問題的緣故，任何人都可以提供在P5解決這一？免責聲明：我一直noob p5.js。

後來編輯：通過運行後臺我的意思是在一個循環中移動背景圖片從左至右

Answer 1

說實話，從我們在評論過的討論，這聽起來像你這得太多。

的general approach to animation（該教程爲處理中，但原理適用於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()函數「效率低」沒有意義。

退一步說，你應該避免在思考這些種微優化，直到你答：理解問題並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); 
 
\t 
 
    fill(0, 255, 0); 
 
    rect(offsetX, 0, width, height); 
 
\t 
 
    fill(0, 0, 255); 
 
    rect(offsetX + width, 0, width, height); 
 
\t 
 
    offsetX--; 
 
    if(offsetX <= -width){ 
 
    \t offsetX = 0; \t 
 
    } 
 
}

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

還有其他的方法來做到這一點，例如創建IMAG e包含包裝本身。但一般的方法幾乎是一樣的。

如果您仍然卡住，請嘗試break your problem down into smaller pieces，就像我在這裏所做的一樣。例如，請注意，我創建了一個處理圖像的簡單草圖，以及另一個處理移動矩形的簡單草圖。那麼如果你遇到困難，請在新的問題文章中發帖MCVE，我們將從那裏開始。祝你好運。