With a canvas in place to receive the graphic output of the GameBoy, the next step is to emulate the production of graphics. Once a block of memory has been allocated for the screen data, an individual pixel's colour can be set by writing RGBA components to the four values at that pixel position in the block the pixel position can be determined by the formula y * 160 + x. GPU._canvas.putImageData(GPU._scrn, 0, 0) Initialise canvas to white for( var i= 0 i< 160* 144* 4 i++) GPU._scrn = GPU._canvas.createImageData( 160, 144)
Var c = document.getElementById( 'screen')
In order to directly address each pixel in the LCD, the contents of the canvas can be manipulated as a "framebuffer": a single block of memory containing the entirety of the canvas, as a series of 4-byte RGBA values. If each pixel in the LCD is treated as a pixel in a HTML5, a direct mapping can be made to a canvas of width 160 and height 144. Nintendo's internal name for the GameBoy is "Dot Matrix Game" its display is a pixel LCD of dimensions 160x144. One of the primary peripherals used by the GameBoy, and by any games console, is the graphics processor (GPU): it's the primary method of output for the console, and much of the processor's work goes on generating graphics for the GPU.
With the emulated processor attached to a memory mapping structure, it's now possible to attach peripherals to the system. In the previous parts of this series, a structure for a GameBoy emulator was laid out, and brought to the point where a game ROM could be loaded, and stepped through by the emulated CPU. The emulator described in this series is available in source form: This is part 3 of an article series on emulation development in JavaScript ten parts are currently available, and others are expected to follow.