将原始像素数据转换为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)