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;

That is my code to create a new map on my HTML5 game. I’m a using a .png map. I also extract its raw pixel data so that I can read the map for collisions and other stuff.

I wanted to implement grenades and these grenades would actually change the map. I can’t change the .png. How do you suggest I go about doing this without moving to another kind of map loading (I want to keep using .png maps)?

My idea was to manipulate the raw pixel data (very doable) and then draw it, but I have no idea of how I can do it. Could I convert the raw pixel data to a .png and then draw it?

I looked for libpng with Javascript and I found pnglets, but I think that remaking the png will take a long time and it would just freeze the game a lot.

Any ideas? Thank you in advance.

Answer 1

You can use canvas‘s putImageData method to draw the raw data onto a canvas:

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)