Javascript/Canvas - 從已有的圖像創建新圖像？

我想知道是否有一種方法來拍攝現有圖像，並將它們「堆疊」在Javascript中創建一個資產。Javascript/Canvas - 從已有的圖像創建新圖像？

以上形象畫冊表明我想做什麼。

基本上，對於我正在製作的遊戲，我想程序化地生成敵人NPC等，從不同身體部位的池中繪製。每個潛在的身體部位都會附帶統計數據和一個spritesheet，所以當這個角色是隨機生成的時候，我想將所有必要的圖像疊加到一起，然後我就可以使用。

有沒有辦法做到這一點？

2013-11-01 AngerAlone

畫布是一個非常基本的繪圖API，能夠繪製幾個基本的形狀，筆觸和填充。除了填充背景顏色和/或清除整個畫布之外，無法使用基本畫布API使「精靈」或任何完整對象位於彼此之上的場景動畫化。複製圖像是可能的，但是你需要清除它們的每一幀並替換它們，這是很多代碼開銷，如果你想讓它們動畫。

你應該看看http://createjs.com或類似的「屏幕圖」類型的框架，它位於畫布的頂部，可以讓你輕鬆加載精靈片並移動它們。它爲你繪製，清除，旋轉，動畫等畫布（基本上使它有點像Flash）。

在純粹堆疊或繪製畫布方面，是的，您可以抓取圖像並使用context2d.drawImage方法將其直接複製到畫布上，但這可能無法達到您想要的效果。

來源

2013-11-01 22:22:13 joshstrike

我使用的是impact.js，它可以很好地處理自己的精靈，並且我可以很容易地爲每個身體部分分別創建spritesheet，但它可能會損害性能，因此必須在屏幕上爲每個字符繪製6個獨立的圖像每幀。 – AngerAlone

如果認爲主要問題是組織基礎藝術品並使圖形與另一個完成匹配，則可以從現有零件中構建動畫。

比方說：你想空閒（1號線），步行（2號線），運行（3號線）你有幀的固定數量的每一行，說5

說也是你的部分是：腿，身體，手臂，頭部。

然後你必須自己建立的形象，通過堆疊這些圖片：

function buildAnimation(legs, body, arms, head) { 
    var resImg = document.createElement('canvas'); 
    resImg.width = legs.width; resImg.height = legs.height; 
    var resCtx = resImg.getContext('2d'); 
    resCtx.drawImage(legs,0,0); 
    resCtx.drawImage(body,0,0); 
    resCtx.drawImage(arms,0,0); 
    resCtx.drawImage(head,0,0); 
    return resImg; 
}

那麼你就可以養活你與此圖像遊戲框架，將用於爲動畫。

該方法的缺點是您必須在每次相同的位置繪製所有部件的所有動畫。問題： 1）對於頭部，例如，您可能不想爲其設置動畫效果。 2）你可能想爲不同的角色設置不同的高度。 3）這是很多工作！

因此，您可以決定使用約定來知道零件應該在哪裏繪製，並且在圖像中準備的部分較少，但使用更復雜的方法來構建它們。簡短示例：圖像部分的文件名以其高度結束，因此您可以輕鬆地檢索它們的文件名爲。（bodyMonster48.png，bodyHead12.png，...）

Writing everything would be too much work here, but just a short example :

說，我們有animWidth，animHeight每個動畫的大小，並在3個anims的每個五幀。現在我們只是有，我們要到處複製一個頭：

function buildAnimation(animWidth, animHeight, legs, body, arms, head) { 
    var resImg = document.createElement('canvas'); 
    resImg.width = legs.width; resImg.height = legs.height; 
    var resCtx = resImg.getContext('2d'); 
    resCtx.drawImage(legs,0,0); 
    resCtx.drawImage(body,0,0); 
    resCtx.drawImage(arms,0,0); 
    // copy the head in all frames of all anims 
    for (var animLine=0; animLine<3; animLine++) { // iterate in idle, walk, run 
     for (var animFrame= 0; animFrame<5; animFrame++) { // iterate in images of the animation 
      resCtx.drawImage(head, animFrame*animWidth, animLine*animHeight); 
     } 
    } 
    return resImg; 
}

爲了能夠建立與可變高度的組合，你會必須仔細參數化的一切，利用文件命名和定位的約定，和你一定需要一個完整的助手類，不要迷失在所有的組合中。

來源

2013-11-02 12:42:02 GameAlchemist

Javascript/Canvas - 從已有的圖像創建新圖像？

回答

相關問題