將原始像素數據轉換爲PNG或繪製原始像素數據

Question

this.terrain = new jaws.Sprite({ x: 0, y: 0, image: this.currentLevel.terrainImage, scale_image: 6 }); 
var rawTerrain = this.terrain.asCanvasContext(); 
this.rawPixelData = rawTerrain.getImageData(0, 0, this.terrain.width, this.terrain.height).data; 

這是我在我的HTML5遊戲上創建新地圖的代碼。我是一個使用.png地圖。我還提取其原始像素數據，以便我可以讀取地圖中的碰撞和其他東西。

我想實施手榴彈，而這些手榴彈實際上會改變地圖。我無法更改.png。你如何建議我去做這個，而不移動到另一種地圖加載（我想繼續使用.png地圖）？

我的想法是操縱原始像素數據（非常可行），然後繪製它，但我不知道如何做到這一點。我可以將原始像素數據轉換爲.png然後繪製它嗎？

我用Javascript搜索libpng，發現了pnglets，但我認爲重新制作png需要很長時間，並且它會凍結遊戲很多。

任何想法？先謝謝你。

Answer 1

您可以使用canvas的putImageData方法繪製的原始數據到畫布上：

this.terrain = new jaws.Sprite({ 
    x: 0, 
    y: 0, 
    image: this.currentLevel.terrainImage, 
    scale_image: 6 
}); 
var rawTerrain = this.terrain.asCanvasContext(); 
this.rawPixelData = rawTerrain.getImageData(
    0, 0, this.terrain.width, this.terrain.height 
).data; 

// modify the pixel data and return updated data.. 
var modifiedPixelData = modifyPixelData(rawTerrain.getImageData(
    0, 0, this.terrain.width, this.terrain.height 
)); 
// Put the data back into the canvas. 
rawTerrain.putImageData(modifiedPixelData, 0, 0)