Retopolized Terrain and Mobile Ready Cartoon Trees

It’s been nearly two months since the last post, and in that time I’ve been doing a lot of important work on Townsend. In a nutshell, I’ve fleshed out the rest of the terrain’s ground, come up with a workflow for retopolizing it, and figured out how to make the cartoon assets mobile-ready. Ready for a ton of pictures? Let’s dive in!

Play this post’s Demo Build!


The first thing on the list for finishing the terrain was to complete the landscape. It’s a pretty fun exercise; the terrain tools in Unity allow you to basically mold the terrain like clay, and it’s exciting to be working on the base of everything. It’s also a challenge to figure out how to hide the edge of the terrain from view and make it seem like like a natural cut-off. Here’s what I’ve come up with:

Terrain in the Game

I think I might revisit this one more time to incorporate some techniques I’ve noticed while playing other games. For instance, most of the time when you’re making terrain like this you get caught up in making hills here and valleys there along this flat plane. This ends you up with basically a hilly flat-land with no real elevation difference. Not the best. What good 3d mapmakers will do is mold the terrain via a few passes. The first pass is a very broad altering of the landscape–lifting and setting entire regions to make highlands and lowlands. The second pass is then simply to add the hilly details that I’ve done. I’m hoping that I can manage to do the steps out of order without any side effects. You see, I come from a 2d mapmaking world, so this is one of those tricks of the trade that I hope will make a big difference. I might end up doing this in some sort of V2, because the terrain is completely playable as it is–and I want get *something* finished ;-) . We’ll see!

The second thing on the list is retopolizing the terrain. In an earlier post I explained retopolization for character models, and it’s a similar concept here: use more vertices for the complex parts, and less vertices for the flat and simple parts. Because this terrain doesn’t have any super sharp edges, and we don’t really care about the flow of the vertices on the terrain, we can use any common vertex decimator tool. For instance, blender has a decimator tool and a polygon reduction script that, when used together, give satisfactory results. Here’s the before (263,169 vertices) and after (6,579 vertices) of my terrain after decimation:

Decimated Terrain Comparison

The last thing on the list is to get the cartoon assets mobile-ready. The cartoon assets were made by a talented vector artist who cunningly used Unity’s tree creator to automate things. For normal PC and Mac games where power isn’t much of an issue this is a benefit, as the terrain system will use the tree creator to toggle certain aspects of the stock version of the tree in order to make each tree on the terrain unique. For mobile, the fact that they were made with the tree creator is actually is a big issue due to the incompatibility of the materials that the tree creator uses. So, for me, this feature means a little more work.

The biggest problem is that the mobile shaders deal with the alpha channel of the generated textures in a different way. For those that don’t know, the alpha channel is simply the transparent ‘color’ value of the image. Unfortunately, the generated textures base the alpha layer off of white. This results in the edges of the leaves (where there is a range of semi-transparency) having a white outline.

So, what’s the fix? Well, it turns out this is a pretty common problem in general (mipmapping produces this problem, for instance). The most simple way to fix it is to set the alpha value to a color that more or less fits the texture. There’s a procedure in Photoshop that’s pretty simple:

  1. Make a new layer (Layers->New->Layer)
  2. Select a color that will blend with the edges of the image
  3. Use the Paint Bucket to fill the layer with the color
  4. Layer->New->Background from layer
  5. Save/Export the file. Done!

The ultimate fix is to set the alpha value to a layer that has literally repeated the pixels along the edge of the texture tangentially outwards. You can of course do this manually, or download the Photoshop script from the unity docs.

The Ultimate Fix from the Unity Docs

I’ve been using the simple fix and it has worked perfectly for my textures. As I continue converting the rest of the cartoon assets, I might come across some textures with multi-colored edges and end up having to use the more complex fix, so I’m glad I found it. The last treatment to the assets is to adjust the hue and saturation to fit the new shaders, and finally to manually apply shading to the textures. I don’t normally use Photoshop, so I had to dig out some masking techniques and eventually I came up with a conversion I was satisfied with.

Mobile-Ready Cartoon Trees

So, that’s as far as I’ve gotten this month. Honestly I’ve been slacking a bit via Halo 4 and Assassin’s Creed 3 (and Hawken as of late!), but I hope to put in some good time in the near future now that I’m getting to the good part!

This entry was posted in Townsend. Post a comment or leave a trackback: Trackback URL.

5 Comments

  1. Aunt Shirley
    Posted January 13, 2013 at 11:55 pm | Permalink

    I think you are absolutely amazing, Brent. Unfortunately, I don’t understand a lot of what you are doing, but it is really impressive.

  2. Stephen Wicklund
    Posted April 5, 2013 at 12:26 am | Permalink

    How’s the game been coming along in the last few weeks?

    Excited to watch it progress, it looks very interesting. :)

    • Brent Grossman
      Posted April 9, 2013 at 8:52 am | Permalink

      Honestly I’ve been distracted playing some awesome indie games :-p

      I’ve also just come back from a vacation in Hawaii, which was great! Being gone for so long has really given me enough of a break that I really want to get back and develop. Recently I’ve been doing a lot of work/posts with assets, and it’s become tough to get any momentum with it. I think it’s about time to pivot and do some coding!

      More posts soon :-)

  3. Rasmus
    Posted November 18, 2013 at 7:49 pm | Permalink

    Use pre-multiplied alpha blending. Then there is no need for a “fix”. Blending and mipmapping just works as expected.

    • Brent Grossman
      Posted November 19, 2013 at 1:29 am | Permalink

      Thanks for the tip! To be honest, I’m not a shader guy myself, so I was just trying to use the tools I knew when I wrote this. Also keep in mind that this is a mobile game, and shaders were my bottleneck on the hardware I was testing on, so any shader optimization I could do would be effective :-)

Post a Comment

Your email is never published, nor shared. Entering your website is optional, but good for networking!

*
*

Available HTML
<a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>