donderdag 22 oktober 2015

8-bit graphics on a canvas

This is just to show you how old I am.
When I started programming on a C-64, you could make your own fonts if you did the math.

You just drew a grid like this:
 128   64   32    16     8     4       2     1
[     ][     ][  x ][  x ][  x ][     ][     ][     ] =  32=16+8= 56
[     ][  x ][  x ][     ][  x ][  x ][     ][     ] = 64+ 32+ 8+4=108
[  x ][  x ][     ][     ][     ][  x ][  x ][     ] =128+64+4+2=198
[  x ][  x ][     ][     ][     ][  x ][  x ][     ] =128+64+4+2=198
[  x ][  x ][  x ][  x ][  x ][  x ][  x ][     ] =128+64+32+16+8+4+2+1=255
[  x ][  x ][     ][     ][     ][  x ][  x ][     ] =128+64+4+2=198
[  x ][  x ][     ][     ][     ][  x ][  x ][     ] =128+64+4+2=198


[     ][     ][     ][     ][     ][     ][     ][     ] =0
And you would get the letter A from just 56,108,198,198,255,198,198,0. Just 8 numbers;
We called this a BITMAP and it was actually the only way, to create monochrome graphics on the screen of my C-64. Even if you used the whole screen, it would just mean more adding up.

Now as you may know, those days are LONG gone.
These days we still use basically the same techniques, only no more counting the pixels and adding up powers of 2. Bitmaps are now also RGB bitmaps with millions of colours and billions of pixels.
But it was a great way, to get a lot of graphic in a very small amount of number.

Great for games. It was why these 8-bit games looked like that.
Now if you use 8-bit graphics on a HTML5-canvas, it will automatically blur your image.
That actualy looks very bad with small graphics blown up big.

This fact has been making it very hard to do 8-bit HTML5-games, but never fear.
(Mis)using SVG, which is now supported in all major browsers to create little blocks on the places where we put the numbers in the grid (and doing some number crunching in javascript)
we can now reuse all byte-coded fonts we had on the C-64.

With one added bonus, we can actually rotate the images and they will remain crystal clear.
Ain't that a nice bonus for a otherwise completely useless excercise.

Well.. I say useless, but animations are still quite big and this might be a very nice way to let kids create small animations to use in their own games on MakingGames.org.
I will give them a paint-like program to do the actual animation, I'm not a monster..

Geen opmerkingen:

Een reactie posten