Bitsy RGBA Palettes walkthrough

HOW TO TURN BITSY PALETTES INTO RGBA,
ALLOWING FOR OPACITY CONTROL

Disclaimer: currently this is only usable an an already-exported file, and because I haven't touched the Hex-to-RGB colour converting code, I imagine it would break in the editor. Anyway, open up your exported game .html and edit the following:

Palette: 4 numbers per line, 4th being opacity from low to high 0 - 255, so:

PAL 0
0,0,0,0   //transparent background
46,46,45,255
111,168,255,255

now find & replace the following lines:

change:

if (colorIn.r == curPal[i][0] && colorIn.g == curPal[i][1] && colorIn.b == curPal[i][2]) {

to

if (colorIn.r == curPal[i][0] && colorIn.g == curPal[i][1] && colorIn.b == curPal[i][2] && colorIn.a == curPal[i][3]) {

-

change:

return { r: palette[index][0], g: palette[index][1], b: palette[index][2], a: 255 }

to

return { r: palette[index][0], g: palette[index][1], b: palette[index][2], a: palette[index][3] }

-

change:

var color = palette.colors[colorIndex];
return {    
r : color[0],
g : color[1],
b : color[2] };

to:

var color = palette.colors[colorIndex];
return { 
r : color[0],
g : color[1],
b : color[2],
a : color[3]

-

change:

if ( px === 1 ) {
img.data[pxl + 0] = foregroundColor.r;
img.data[pxl + 1] = foregroundColor.g;
img.data[pxl + 2] = foregroundColor.b;
img.data[pxl + 3] = 255;                 
}
else { //ch === 0
img.data[pxl + 0] = backgroundColor.r;
img.data[pxl + 1] = backgroundColor.g;            
img.data[pxl + 2] = backgroundColor.b;            
img.data[pxl + 3] = 255;
}

to

if ( px === 1 ) {
img.data[pxl + 0] = foregroundColor.r;
img.data[pxl + 1] = foregroundColor.g;
img.data[pxl + 2] = foregroundColor.b;
img.data[pxl + 3] = foregroundColor.a;
}
else { //ch === 0                     
img.data[pxl + 0] = backgroundColor.r;
img.data[pxl + 1] = backgroundColor.g;
img.data[pxl + 2] = backgroundColor.b;
img.data[pxl + 3] = backgroundColor.a;
}

-

change (in two locations):

colors : [[0,0,0],[255,255,255],[255,255,255]]

to

colors : [[0,0,0,255],[255,255,255,255],[255,255,255,255]]

-

change:

ctx.fillStyle = "rgb(" + getPal(curPal())[0][0] + "," + getPal(curPal())[0][1] + "," + getPal(curPal())[0][2] + ")";
ctx.fillRect(0,0,canvas.width,canvas.height);

to

ctx.fillStyle = "rgba(" + getPal(curPal())[0][0] + "," + getPal(curPal())[0][1] + "," + getPal(curPal())[0][2] + "," + getPal(curPal())[0][3] + ")";
ctx.clearRect(0,0,canvas.width,canvas.height);

-

change:

if (room === undefined) {
// protect against invalid rooms
context.fillStyle = "rgb(" + getPal(paletteId)[0][0] + "," + getPal(paletteId)[0][1] + "," + getPal(paletteId)[0][2] + ")";
context.fillRect(0,0,canvas.width,canvas.height);       
return;

to

if (room === undefined) {
// protect against invalid rooms
context.fillStyle = "rgb(" + getPal(paletteId)[0][0] + "," + getPal(paletteId)[0][1] + "," + getPal(paletteId)[0][2] + ")";
context.clearRect(0,0,canvas.width,canvas.height);
return;

-

change:

//clear screen   
if (room.pal != null && palette[paletteId] != undefined) {
paletteId = room.pal;
}
context.fillStyle = "rgb(" + getPal(paletteId)[0][0] + "," + getPal(paletteId)[0][1] + "," + getPal(paletteId)[0][2] + ")";
context.fillRect(0,0,canvas.width,canvas.height);

to

//clear screen   
if (room.pal != null && palette[paletteId] != undefined) {
paletteId = room.pal;
}
context.fillStyle = "rgba(" + getPal(paletteId)[0][0] + "," + getPal(paletteId)[0][1] + "," + getPal(paletteId)[0][2] + "," + getPal(curPal())[0][3] + ")";
context.clearRect(0,0,canvas.width,canvas.height);

-

Then set the #page background to whatever you want on the sides, and the #game background to what you want to see behind the tiles.  Example: set the #game background to background:linear-gradient(black, white); for a lovely black-grey-white gradient replacing the regular background colour.