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
  grass.
 
  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. :)
 
  _____Conclusion
 
  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.
 
 
 
 

main - new stuff - gallery - gfx chart - database - guestbook - links - fun - contact me

---

GFX Zone was created and is being maintained by 3D Addict