A while back, I was working on my own small Javascript/WebGL2 "game engine" (technically, it's more of a rendering engine, with a few extra game-related features bolted on).
I managed to get everything working, but just recently I've been thinking about making it more "retro", by forcing indexed-color and allowing palette swapping and cycling effects, and replacing 8-bit alpha channels with dithering.
Here you can see a tilemap, some animated sprites and alpha-dithering in action:
Unfortunately, the alpha-dithering effect has quite a big effect on performance at the moment, but there's probably room for optimisation. The current version is using a 4x4 Bayer matrix ( https://en.wikipedia.org/wiki/Ordered_dithering ), and can manage about 12,000 sprites at 60fps on my laptop; the previous version used an 8x8 matrix, which did look a lot smoother, but limited the sprite count to an unacceptable 1500 sprites at 60fps.
The next step is to try and implement indexed color, which first means finding a way to load palette-based images. PNG would be ideal, and GIF would be alright too, but they're both far too hard to work with because of the way in which they compress the image data (the price you pay for a very small file size).
Happily, I've found another option - Truevision TGA or TARGA files ( https://en.wikipedia.org/wiki/Truevision_TGA ), and already written a tool to load them.
Next I just need to generate a texture where the index of each pixel is stored in its red channel, and then the fragment shader can use that to look up a color from another texture containing the palette(s). And hope it doesn't hurt performance too much...
Originally Posted by Entura If you want me to test this, feel free to ask away, as I'm currently duty-free
Thanks I don't think it's quite at that stage yet though - not least because it requires Javascript coding (it's not a visual game editor like CF2.5), and I haven't documented any of the objects and functions yet.
On the plus side, loading of .TGA files is now pretty much working!
The red component of each pixel is actually its palette index - so the next step will be to modify the sprite shaders to look up an actual RGB color from a palette image (and the same for tilemaps).
The only awkward issue is that .TGA files (or at least the ones saved by PaintShop Pro) save the pixel data in one continuous stream, but using the order left-to-right and bottom-to-top(!), so for now I've had to flip the spriteset image!
Advertisement
Post Reply
Edited by Sketchy