Sunday, May 11, 2014

Quick & Dirty Grass

I'm a grandma with a foggy memory, so I took some step by step screenshots of how I did the grass for Bala.  I learned a lot doing this and hope to make better grass in the future.  For now, this is the final product:


The way Bala's collision is set up, our ground has to be completely flat.  To offset this, we will be placing baby grasses in some places, as shown below (as an example; placement not final):

But this post isn't about baby grasses. 

The first thing I did was to create a patch of grass:


I tried to capture the general shapes, and also made sure not to leave it a solid color.  The tiny amount of detail really does make a difference!

Next, I took this patch of grass and made it a solid color in order to make a brush:


To do this in Photoshop, go to Edit > Define Brush Preset..., name your brush, and click OK.
Ta-da!  Patch of grass brush at your service.

It's important to note that if you want a completely opaque brush, the image you use needs to be black.  If you use different colors or grays, Photoshop is going to translate those things into something that is semi-transparent.  Unless that's what you want, it's something to keep in mind as you work on your brush. 

With my new brush selected, I went to Window > Brush, and played around with some brush settings:



I adjusted Shape Dynamics and Scattering in order to get the desired effect of many patches of grass.  With this, I can create a lot of grass in one brush stroke.  The set up is finally done!  On to the actual texturing.

I started out with a base color, and brushed on some messy grasses:


Whoa, gross!

To blend, I used some watercolor brushes to calm the strength of the grass down:


With the grass calm, I turned it back up by brushing on even more grasses of different shades of green:


Calm it down again with some watercolor brushes:


As you can see there's a bit of back and forth.  Paint on grass, and dull it out with a good blending brush.  Repeat this process until you are satisfied with the result.
Next, I started placing the original detailed patches of grass:


I continued to do this, but after a while started placing patches of grass at 37% opacity to calm them down:


In the game, the above texture looks like such:


A lot better than before!  Because this was for testing, I didn't worry about seams or if it covered the whole ground.  With this test, I decided I needed more patches of grass (A LOT more).  The ground still looked way too flat in terms of color variation.

Many grasses later and making the grass tilable, I arrived at the following result: 


And there you have it, quick and dirty grass.

No comments:

Post a Comment