Adventures in AR: a e s t h e t i c

Now things are getting exciting on this blog. Or at least as exciting as blog posts can get. For the first time, we get to talk about some active development. I've made some headway in ARventure to share today.

When I started working on ARventure, I had a vague idea how I wanted it to look. I was aiming for a cartoony style, similar to the style of Eden. Flat colors, minimal (if any) shading, prominent line art, etc. I'd mostly rely on little decorations like trees and shrubbery dotted around the map to fill in the dead space. This was mostly due to the fact that it's about all I could manage for art, but I also assumed I wouldn't have any other option for the map features.

The limiting factor of the art style was ultimately drawing the map. Roads and water features are drawn on to the map through Phaser's Graphics system, which is basically the Canvas API with some extra bells and whistles. Features are drawn in a similar way a polygon would be generated in 3D, except rather than creating triangles and texturing, they are simply filled with a color. I couldn't find much information in the way of filling with a texture, so I assumed that was my lot. I'd try to pick the right colors and hope it looked good. The only major issue I had with this is that the roads had a very hard edge. A dirt road should be worn out in the center, and fade out at the edges. I didn't think there was much I could do about this until recently, when I realized I was thinking about it all backwards.

Pardon the Placeholder

It wasn't even a difficult change to implement. The features already generated Graphics, but instead of drawing the Graphics to the screen, I now use them to mask a texture. The filled area of the Graphic is what is shown, anything else is hidden. Thus, all I had to do was add a grass, water, and road texture to each tile and the mask takes care of the rest. Pictured above is my first test of this change. Obviously I wouldn't go with the sort of realistic textures above, I just grabbed the first seamless textures I could find off Google. But this does present some new opportunities for the visual style of the game. I still plan to go with a cartoony look, but now I can introduce some texture to make the roads and water look less like blobs of solid color. This even opens up the opportunity for effects like animated water. Definitely some new options to play around with, which is exciting. As always, feel free to peek at the source code if you're interested. The bulk of the changes are in Tile.hx.

While this is certainly a great step, I'm still not totally satisfied with the roads at this point. Trying to achieve a medieval, gamey look from real life map data is tricky. I think my next step will be to try and break up the straight edge of roads using midpoint displacement or a similar algorithm. And of course with any substantial change, there are some teething issues to work out. For instance, the original road Graphics actually extend outside the bounds of the tile to fill gaps between tiles. However, with this new method, the grass texture covers that bit that extends outside the tile (visible in the lower right corner of the picture above). Simple enough to fix, but don't let me forget about it if the next post doesn't mention a fix.