Thursday, September 15, 2011

Screens of the day 17 - Cats

Today we are going to combine the two new tehniques: creating dynamically sized shapes filled with a procedural pattern and converting a 2D texture to an isometric texture that can be applied on the before-mentioned shapes.

Let us take this random grass texture that I found by googling "grass texture":

This is not a good texture to use because it is big and detailed and my result will be small, thus dropping a lot of detail. Still, let us try an see what we get:

Not bad! It looks like it is gaining detail rather than scaling up, but I am still not 100% happy. Let's try another random grass texture:

Converted, it looks like this:

Something is not right there. Look carefully! I'll try a more distinct texture to better observe the behavior:

The conversion result is clearly wrong (except for the GIF pallet; GIFs use 256 colors and my images do not use pallet optimization and dithering to compensate for that). I'll illustrate this by using this cute cat:

Aha! We can only see the head. There is a bug in the scaling algorithm. Let me fix it:

Normally I'd go back and fix the previous sample images, but since this blog is a lot about documenting, it is OK to document the bugs too.

The process works of course for larger sizes too: 

This is why I wanted to try a 3D engine again. It comes with great flexibility and you get a lot of things for free. But I guess I will be sticking with the hard way.

The final step is to take these techniques and create the first prototype of the new and experimental Flexy engine!


  1. Is your scaling gamma correct?

  2. I have absolutely no idea. I am using homebrewed algorithms because I just can't seem to create a truly 3D engine where I could rely on tried and true algorithms and a lot of hardware support.