Bitsy RGBA Palettes walkthrough
A downloadable mod
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.
Status | Released |
Category | Game mod |
Author | communistsister |
Tags | Bitsy, hacks |
Leave a comment
Log in with itch.io to leave a comment.