"A Graphician's Tip Book - Part 9"


    Shaithis / Psychic Monks, Immortal Coil
      Hello all,
      Been awhile, eh? Let me explain myself.  I went home for christmas break.
      Sadly, going home for christmas break means I have connection to the net for
      a month. Thus, I couldn't get my lovely articles to Snowman and all you
      people who await this column (there's at least six of you now...right? ;) had
      to go without for awhile.  Anyway, I'm back, and with me I bring text. This
      particular one can be entitled "Building the better grass tile".
      Before I start, however, let me thank Rhythm Greene for punching me in
      the arm a few weeks ago and pointing out the idiocy of the last column's
      statement "320x240x256 is more or less a standard vesa mode".  It's not.
      It's mode-x (I believe), and it's a pain to work with.  :)  For that reason,
      we've switched our little RPG to 320x200.  But don't worry yourselves over
      that, it doesn't affect any of the tips I gave in my last article. At any
      rate, thanks to glenn, and onward...
      _____Building The Better Grass Tile (Fun with Spray Paint)
      Alright, so as of last week, I left you with a dark green square with some
      light green, wavy lines on it.  Not a terribly stimulating tile, to be
      certain.  The members of my group weren't particularly impressed either, and
      so we decided we had to do better.  Along the way, we discovered a bunch of
      mistakes that are probably made often (mistake number one is and has been
      made by a variety of artists for various game companies throughout the course
      of time.  Once in awhile, it's pulled off anyway, but usually it could have
      been done better).
      I'll emphasize again that these are mistakes _we_ (my group) made, NOT
      mistakes that we arrogantly believe we are above.  Far from it, believe me.
      If you've made these mistakes, I assure you that you have my deepest respect,
      because if you haven't made them, you probably haven't been trying very hard.
      _____Number 1
      *Mistake #1*  Grass isn't all green.  Think about it.  Go out to your
      backyard and look at it if you have to (although for those of you in my
      region of the US all you'll probably see is snow).  At any rate, you'll
      probably notice there's also a lot of brown in there.
      In actuality, there's also blues, oranges, yellows, reds, and just about
      every color of the spectrum (But you need a couple of light color and design
      courses to train your eyes to see that, and still half the time it's hard to
      believe).  Anyway, considering the fact that we're only working with a 16x16
      pixel tile, we stuck to just brown and green.
      *Solution #1*  Brown and Green.  Two great tastes that taste well... mediocre
      together.  But with a little effort, you can make that combination work
      together like a well oiled machine.  Your best bet is to use the spraypaint
      tool.  Everytime I talk about the spraypaint tool, I get two responses: "The
      spraypaint tool is useless" or "The Spraypaint tool is great!"  To those of
      you in the former crowd, I humbly suggest you haven't played with it enough.
      We took our 16x16 dark green square and, using our first 16 greens, created a
      gradient.  For two reasons, we left the top two and the bottom two off the
      gradient, giving us twelve colors.  First, our effects engine deals a lot
      with hue fades, so we needed some room for that.  Second, grass is rarely so
      dark it is virtually black, or so light that it's virtually white.
      We "sprayed" the green square with the spray paint tool, after selecting our
      gradient.  This gave us a very random spread of pixels, all green, but
      varying in intensity and saturation.   We repeated this with a brown
      gradient.  This gave us a rather random looking jumble of browns and greens,
      which leads on to the next problem...
      _____Number 2
      *Mistake #2*  Completely random green and brown pixels rarely look like real
      grass.  This one's pretty much a given.  At times, they can be passed off,
      but for the most part a little thought and some basic background design in
      your tiles can give a much better impression of grass, while still managing
      to look quite random.
      *Solution #2*  I hope you're reading this whole column before you start
      trying grass tiles, or you're going to hate me for this. :)  Start with a
      pattern.  We scrapped the aforementioned random tile, and restarted.  We took
      a dark green tile, drew a relatively erratic pattern (but by placing the tile
      next to itself, we were able to ensure that some lines would appear to
      "cross" the 16x16 border.  More on that below). Now we repeated the step
      above involving the gradients and the spray paint tool.  Because the spray
      paint tool randomly sprays pixels, enough of the original texture was left
      behind to give the tile more cohesiveness then it's predecessor.
      _____Number 3
      *Mistake #3*  Too much brown makes your grass look very muddy.  The need is
      very much there for finding a good balance between greens, browns, and the
      hues in between. There are ways to balance your colors with relative ease,
      and they are discussed below.
      *Solution #3*  We added a third gradient, which I'll call "Olive Green". This
      allowed us to have pixels that were both green, brown, and a mixture of the
      two.  Now the tile was really starting to look like something.  The only
      problem?  Well, that's mistake number four.
      _____Number 4
      *Mistake #4*  It's very easy to make grass tiles look too repetitious.
      Conversely, if you make each tile too random, they won't blend and the breaks
      between tiles will be altogether too obvious.
      *Solution #4*  We took six of the same grass tile, and placed them in a
      vertical column, with one line of white space between each.  We selected each
      of our three gradients, and using the shade tool, darkened and lightened the
      various pixels (This method is described in my fourth dpaint article.  If you
      didn't read it, then shame on you! :)  Now we had six different tiles that,
      when placed together, create a very random, yet still coherent patch of
      The tiles range from light to dark, and can be placed in ways that make the
      patch of grass appear shaded, without it being terribly evident how the
      effect was achieved.  This, of course, involves some experimentation, but I
      shall leave that part up to you. :)
      There you have it, "Building a better grass tile" from start to finish. Don't
      expect the world to beat a path to your door... that's for building a
      mousetrap, but you can expect any game you're working on to have a much
      greater level of depth and realism in its tiles.  This process can be applied
      to a variety of tiles, ranging from grass to wood to stone (and even to skin
      tones, albeit with a lot of work).  Experiment, play around, and see what you
      can come up with.  If nothing else, come up with a bunch of plausibly useful
      tiles. :)
      That's the article for this time. Again, sorry about the wait.  I hope it's
      been worth it.  Next time, I'm going to jump right into the long awaited (and
      still multiple-undo-less, grrrr) Photoshop 4.
    go to part 10

   news    galleries    articles    database    links