2 
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 の再作成には時間がかかり、ゲームがかなりフリーズするだけだと思います。

何か案は？前もって感謝します。

4

1 に答える 1

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)
于 2012-10-16T19:28:25.557 に答える