leif/lexys-labyrinth
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Correctly erase the background when loading a custom CC2 tileset

Browse Source
This commit is contained in:
Eevee (Evelyn Woods) 2021-03-02 21:21:25 -07:00
parent 751b6b92c3
commit e3443b73d8
2 changed files with 33 additions and 16 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

47
js/main.js
View File

@ -2828,24 +2828,11 @@ class OptionsOverlay extends DialogOverlay {
return; return;
} }
// Load into a canvas and erase the transparent color // Load into a canvas and erase the background, if any
let canvas = mk('canvas', {width: img.naturalWidth, height: img.naturalHeight}); let canvas = mk('canvas', {width: img.naturalWidth, height: img.naturalHeight});
let ctx = canvas.getContext('2d'); let ctx = canvas.getContext('2d');
ctx.drawImage(img, 0, 0); ctx.drawImage(img, 0, 0);
let trans = layout['#transparent-color']; this._erase_background(canvas, ctx, layout);
let image_data = ctx.getImageData(0, 0, canvas.width, canvas.height);
let px = image_data.data;
for (let i = 0; i < canvas.width * canvas.height * 4; i += 4) {
if (px[i] === trans[0] && px[i + 1] === trans[1] &&
px[i + 2] === trans[2] && px[i + 3] === trans[3])
{
px[i] = 0;
px[i + 1] = 0;
px[i + 2] = 0;
px[i + 3] = 0;
}
}
ctx.putImageData(image_data, 0, 0);
let [w, h] = layout['#dimensions']; let [w, h] = layout['#dimensions'];
let tw = Math.floor(img.naturalWidth / w); let tw = Math.floor(img.naturalWidth / w);
@ -2891,6 +2878,36 @@ class OptionsOverlay extends DialogOverlay {
}; };
} }
_erase_background(canvas, ctx, layout) {
let trans = layout['#transparent-color'];
if (! trans)
return;
let image_data = ctx.getImageData(0, 0, canvas.width, canvas.height);
let px = image_data.data;
if (trans.length === 2) {
// Read the background color from a pixel
let i = trans[0] + trans[1] * canvas.width;
if (px[i + 3] === 0) {
// Background is already transparent!
return;
}
trans = [px[i], px[i + 1], px[i + 2], px[i + 3]];
}
for (let i = 0; i < canvas.width * canvas.height * 4; i += 4) {
if (px[i] === trans[0] && px[i + 1] === trans[1] &&
px[i + 2] === trans[2] && px[i + 3] === trans[3])
{
px[i] = 0;
px[i + 1] = 0;
px[i + 2] = 0;
px[i + 3] = 0;
}
}
ctx.putImageData(image_data, 0, 0);
}
update_selected_tileset(slot_ident) { update_selected_tileset(slot_ident) {
let dd = this.tileset_els[slot_ident]; let dd = this.tileset_els[slot_ident];
let select = dd.querySelector('select'); let select = dd.querySelector('select');

2
js/tileset.js
View File

@ -19,7 +19,7 @@ export const CC2_TILESET_LAYOUT = {
'#ident': 'cc2', '#ident': 'cc2',
'#name': "Chip's Challenge 2", '#name': "Chip's Challenge 2",
'#dimensions': [16, 32], '#dimensions': [16, 32],
'#transparent-color': [0x52, 0xce, 0x6b, 0xff], '#transparent-color': [0, 0],
'#supported-versions': new Set(['cc1', 'cc2']), '#supported-versions': new Set(['cc1', 'cc2']),
'#wire-width': 1/16, '#wire-width': 1/16,