I've found a library with PNG files for dungeon games at http://pousse.rapiere.free.fr/tome/.
But, the background of the tiles is not "transparent", it's "#ff00ff", or white.
How can I replace the colors easily with rgba(0,0,0,0) ? I could load the images into a HTML5 canvas and replace the colors there, but maybe there is a much easier way?
Well, I've just found the replace-color function, and wrote a tool which updates all PNG file in a folder:
const fs = require('fs');
const path = require('path');
const replaceColor = require('replace-color');
function findPngFiles(dir) {
var files = fs.readdirSync(dir);
var pngFiles = [];
for (let file of files) {
file = path.join(dir, file);
if (path.extname(file).toLowerCase() === '.png') {
pngFiles.push(file);
}
if (fs.statSync(file).isDirectory()) {
pngFiles = pngFiles.concat(findPngFiles(file));
}
}
return pngFiles;
}
async function updateImage(file) {
replaceColor({
image: file,
colors: {
type: 'hex',
targetColor: '#FF00FF',
replaceColor: '#00000000'
}
})
.then((jimpObject) => {
jimpObject.write(file, (err) => {
if (err) return console.log(err);
});
})
.catch((err) => {
console.log(err);
});
}
const pngFiles = findPngFiles('./Items');
(async function updateFiles() {
for(let file of pngFiles) {
await updateImage(file);
console.log(file);
}
})()