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!