VGA text renderer about code-cookbook

[dstrekelj]

@markknol Would you mind if I created a cookbook entry out of this? Of course, you would be credited with porting the original code.

[markknol]

Yes do it!! That would be a nice addition!

[fullofcaffeine]

@dstrekelj Once again, thank you very much for the comprehensive explanation!

[markknol]

port: http://try.haxe.org/#1EDC7
animated: http://try.haxe.org/#5248A
haxe http://try.haxe.org/#ff1A4
compilation server http://try.haxe.org/#0Ff1A
haxe ascii art logo http://try.haxe.org/#B5925
flixel ascii art logo http://try.haxe.org/#7A999

That was fun haha

[fullofcaffeine]

Is that array of bytes a bitmap image with a grid of chars?

It'd be nice if someone could explain the rendering algorithm, specially the use of the bitwise operators!

[dstrekelj]

A character is 8x8 pixels in size. It can therefore be represented by eight octets, where each octet is a row (or column, depending on design) of the monochrome 8x8 character bitmap. The replicated font in this example is the IBM BIOS VGA font (or a variant of it). You can read more about it here.

The character bitmaps are stored in the Font array ordered by their character codes. It can be said that the character code encodes in itself the base row and base column of the character bitmap. Because the bitmaps are stored in groups of eight due to the character size, we can observe that every eighth entry - if counting from 0 - represents the bitmap of a different character.

Thus, when a text string is rendered, it is probed for its character code. The character code is decoded into a Font array index through a left bit shift by three bits, due to the characters being packaged by eight octets. From then on, every row and column of the character bitmap grid is traversed, and the colour value sampled, before the image's pixel colour at the given position is set. For a more detailed explanation on how to display a character, see here.

The position at which the character is drawn is determined from the character's position in the text string, and the size of the character bitmap. This can also be achieved through bit shifting or a modulus operation.

All in all, it's quite a cool little example.

[fullofcaffeine]

@dstrekelj Wow, thanks for the explanation! That's quite a bit of "black magic", but I'm starting to understand :)

Thus, when a text string is rendered, it is probed for its character code. The character code is decoded into a Font array index through a left bit shift by three bits due to the characters being packaged by eight octets

Why so? Why three bits in this case?

[dstrekelj]

@fullofcaffeine You're welcome!

It all boils down to how base-10 (decimal) numbers are represented in base-2 (binary). I trust you know the basics so I'll skip the fundamentals. If I went down the numeral system rabbit hole, I don't think I'd be able to find my way out :)

Much like decimal numbers have their own set of operators and operations - such as addition, multiplication, division, and subtraction - binary numbers define their own bitwise operations. One category of such operations are shifting operations.

Shifting operations "shift" a binary number to either the left or right by a specified number of bits (positions, or numerals in the binary number). Due to the nature of signed binary numbers, shifting can also be signed or unsigned - but that is beside the point.

Because every bit of a binary number can be observed as a power-of-two value (2^n, where n is the bit's position in the number, in range [0, number of bits - 1]), a shift to the left or right has the same effect as a multiplication or division (respectively) by 2^n, where n is the number of places shifted. The result of shifting depends on convention - whether the most / least significant bit (highest power-of-two value in relation to position in number) is placed first / last in the binary number.

If, for example, we consider the leftmost bit to be the most significant, then shifting to the left by 3 positions is equal to multiplying the decimal representation of the number by 2^3 (or 8). Shifting to the right by 3 positions, however, results in a division by 2^3.

In short, shifting operations are a way of performing integer multiplication or division by power-of-two values.

These days any decent compiler should optimise multiplications and divisions by power-of-two values into a bit shift operation. That is because shifting, being a logical operation, is several cycles faster than an arithmetic operation. But that is a different rabbit hole, for another time :)

[dstrekelj]

I guess this issue can be closed now :)

[fullofcaffeine]

@dstrekelj, @markknol, @Simn

I'd be pretty cool if we had more of that retro/oldschool/lowlevel kind of examples, other stuff that would be very educational (gamedev-wise):

• A basic emulator;
• synthetizing 8/16 bit sounds/music;
• Simulating how 8/16 bit consoles rendered sprites (related to emulator above, maybe);

Thanks for this contribution! The page on the cookbook has been expanded and is really informative!