Gameboy Tile rendering - 2 bytes per pixel - javascript

2bpp-with-canvas.js

// https://jsfiddle.net/aeyajxac/1/
var colour_map = {
	0:"rgb("+255+","+255+","+255+")", //white
	1:"rgb("+192+","+192+","+192+")", //light grey
	2:"rgb("+96+","+96+","+96+")", // dark grey
	3:"rgb("+0+","+0+","+0+")" // black
}

$(document).ready(function() {
//
// # Canvas code
//
var canvas = document.getElementById('gb');
var myContext = canvas.getContext('2d');
var id = myContext.createImageData(1,1); // only do this once per page
var d  = id.data;                        // only do this once per page
myContext.fillStyle = "rgb(200,0,0)";
myContext.fillRect (0, 0, 50, 50);
ctx=myContext;

//
// Each row (8pixels) in a gb tile is made up of 2 bytes
// The 2 bits that make up the pixels colour is actually split between the 2 pixels
//
var byte1=0x4E;
var byte2=0x8D;
console.log(byte1.toString(2),byte2.toString(2));
//
// # Loop over each bit in the 2 bytes
//
for(var x = 0; x < 8; x++)
	{
	    // Find bit index for this pixel
      // i.e get a mask which can be applied to a byte, that will return the value of this pixel
	    var pixelMask = 1 << (7-x);
      var colourOfPixel = 0;
      
      var bitValueOfByte1 = byte1 & pixelMask;
      var bitValueOfByte2 = byte2 & pixelMask;
      
      if (bitValueOfByte1) colourOfPixel+=1;
      if (bitValueOfByte2) colourOfPixel+=2;
      
      ctx.fillStyle = colour_map[colourOfPixel];
			ctx.fillRect( x*10, 10, 10, 10 );

	    console.log('Colour of pixel:',x,colourOfPixel,'::',bitValueOfByte1,bitValueOfByte2);
	}
  
  });

2bpp.js

var colour_map = {
	0:"rgb("+255+","+255+","+255+")", //white
	1:"rgb("+192+","+192+","+192+")", //light grey
	2:"rgb("+96+","+96+","+96+")", // dark grey
	3:"rgb("+0+","+0+","+0+")" // black
}

var pixel_scale=20;

$(document).ready(function() {
//
// # Canvas code
//
var canvas = document.getElementById('gb');
var myContext = canvas.getContext('2d');
var id = myContext.createImageData(1,1); // only do this once per page
var d  = id.data;                        // only do this once per page
myContext.fillStyle = "rgb(200,0,0)";
myContext.fillRect (0, 0, 50, 50);
ctx=myContext;

//
// Each row (8pixels) in a gb tile is made up of 2 bytes
// The 2 bits that make up the pixels colour is actually split between the 2 pixels
//
var byte1=0x4E;
var byte2=0x8D;
console.log(byte1.toString(2),byte2.toString(2));
//
// # Loop over each bit in the 2 bytes
//
for(var x = 0; x < 8; x++)
	{
	    // Find bit index for this pixel
      // i.e get a mask which can be applied to a byte, that will return the value of this pixel
	    var pixelMask = 1 << (7-x);
      var colourOfPixel = 0;
      
      var bitValueOfByte1 = byte1 & pixelMask;
      var bitValueOfByte2 = byte2 & pixelMask;
      
      if (bitValueOfByte1) colourOfPixel+=1;
      if (bitValueOfByte2) colourOfPixel+=2;
      
      ctx.fillStyle = colour_map[colourOfPixel];
			ctx.fillRect( x*pixel_scale, 10, pixel_scale, pixel_scale );

	    console.log('Colour of pixel:',x,colourOfPixel,'::',bitValueOfByte1,bitValueOfByte2);
	}
  
  });