Deleting black pixels on tiles

This commit is contained in:
Nikita Iryupin 2021-04-23 15:46:52 +02:00
parent 66b9bc713c
commit 500435798f
3 changed files with 19 additions and 6 deletions

View File

@ -31,7 +31,21 @@ export class Tileset {
var context = canvas.getContext('2d');
context.drawImage(this.image, x, y, width, height, 0, 0, width, height);
return canvas;
// Remove black bg
var imageData = context.getImageData(0, 0, width, height);
var data = imageData.data;
for (var i = 0; i < data.length; i += 4) {
if (data[i] + data[i + 1] + data[i + 2] < 10) {
data[i + 3] = 0;
}
}
context.putImageData(imageData, 0, 0);
// Export as image
let img = new Image;
img.src = canvas.toDataURL("image/png");
return img;
}
getImageOf(id) {

View File

@ -56,12 +56,11 @@ export class GameField {
for (let y = 0; y <= this.GAME_HEIGHT; y += 1) {
let id = map[x + y * this.GAME_WIDTH];
if (id != 0) {
this.ctx.drawImage(this.tileset.getImageOf(id), x * this.TILE_SIZE, y * this.TILE_SIZE, this.TILE_SIZE, this.TILE_SIZE);
} else {
this.ctx.fillStyle = "black";
this.ctx.fillRect(x * this.TILE_SIZE, y * this.TILE_SIZE, this.TILE_SIZE, this.TILE_SIZE);
if (id != 0) {
this.ctx.drawImage(this.tileset.getImageOf(id), x * this.TILE_SIZE, y * this.TILE_SIZE, this.TILE_SIZE, this.TILE_SIZE);
}
}
}