Having lighter and darker shades of green allows you to add depth to the grass. If you use few colors, all the grass will look like it's the same height, and kind of flat.
So imagine you have 4 shades of green. You could still draw a blade of grass with just 2 colors, but now you have three different brightnesses of grass (the two brightest shades, the two middle shades, and the two darkest shades). The brighter ones will seem taller (getting more sunlight and less shade), so you can group them together to imply some topology.
Sometimes the darker color is used to imply a spot that is low, where there's barely any grass so it's mostly shade. Sometimes a sliver of dark is used under a bright patch of grass, to imply that grass is even taller and casting a shadow. It's also used around the grass edge tiles to make the grass look like it's above the dirt.
The logic behind each pixel placement is about where the lights and shadows would be in 3D space. Plus, it's choosing pixel placement that implies the right curves and shapes when zoomed out (pixel cluster shapes, anti-aliasing).
This is one of the major game art dliemmas. A grass tile is one of the first assets needed in many games, yet it's one of the hardest environmental assets to do well.
It's okay to get abstract and basic with grass tiles though. There's a general game design principle that floors are better with less contrast and fewer busy details. It makes the action on the battilefield clearer. It helps the player see where they can move, because walls and obstacles will stand out. Look at the outdoor areas in Diablo 3, and notice how much softer and painterly the ground is compared to all the other tiles and objects.
I get the general idea of the pixel placement, but I couldn't tell you specifics without studying it myself.
I'm badly colorblind so I would be using tools to help me figure out what's going on. Example, you said this grass is about 5 colors. Try picking one color and replacing it with another that is usually next to it. What is the grass missing without this color? Is this color used for diffuse base, specular highlights, shadows, edges, shading, etc? What happens if you make the color darker/lighter, saturated/muted, or shift the hue?
The pixel art in the example was definitely done painstakingly by hand. This is Square Enix in 1996, doing the best pixel art in the biz at the end of the SNES lifecycle.
There is barely any recognizeable repeating pattern. It's impossible to tell where the tiles are split. The transition to other tile types (dirt, other grass) is perfect. This all takes meticulous technical and artistic planning at the 16x16 tile level.
Resizing a texture gives you random pixel clusters. Blades of grass or individual leaves would lose their shape and become basically noise. Hand placed clusters are what make each leaf and blade look nicely shaped, even at this tiny resolution.
The resized rock texture example above isn't a good comparison. Rocks don't need to keep a specific shape to look "rocky". Grass and leaves do.
If I were studying a complex pixel pattern like that, I would try learning how it works by editing it. Make minor changes to the pixels, zoom out and see if it still looks good. Undo or continue until it starts to make sense.
Try posting it tiled and scaled up so we can see. Like this.
Looks like a good start. Next trick is to make a second tile that seamlessly blends with this one.
Having lighter and darker shades of green allows you to add depth to the grass. If you use few colors, all the grass will look like it's the same height, and kind of flat.
So imagine you have 4 shades of green. You could still draw a blade of grass with just 2 colors, but now you have three different brightnesses of grass (the two brightest shades, the two middle shades, and the two darkest shades). The brighter ones will seem taller (getting more sunlight and less shade), so you can group them together to imply some topology.
Sometimes the darker color is used to imply a spot that is low, where there's barely any grass so it's mostly shade. Sometimes a sliver of dark is used under a bright patch of grass, to imply that grass is even taller and casting a shadow. It's also used around the grass edge tiles to make the grass look like it's above the dirt.
The logic behind each pixel placement is about where the lights and shadows would be in 3D space. Plus, it's choosing pixel placement that implies the right curves and shapes when zoomed out (pixel cluster shapes, anti-aliasing).
This is one of the major game art dliemmas. A grass tile is one of the first assets needed in many games, yet it's one of the hardest environmental assets to do well.
It's okay to get abstract and basic with grass tiles though. There's a general game design principle that floors are better with less contrast and fewer busy details. It makes the action on the battilefield clearer. It helps the player see where they can move, because walls and obstacles will stand out. Look at the outdoor areas in Diablo 3, and notice how much softer and painterly the ground is compared to all the other tiles and objects.
I get the general idea of the pixel placement, but I couldn't tell you specifics without studying it myself.
I'm badly colorblind so I would be using tools to help me figure out what's going on. Example, you said this grass is about 5 colors. Try picking one color and replacing it with another that is usually next to it. What is the grass missing without this color? Is this color used for diffuse base, specular highlights, shadows, edges, shading, etc? What happens if you make the color darker/lighter, saturated/muted, or shift the hue?
The pixel art in the example was definitely done painstakingly by hand. This is Square Enix in 1996, doing the best pixel art in the biz at the end of the SNES lifecycle.
There is barely any recognizeable repeating pattern. It's impossible to tell where the tiles are split. The transition to other tile types (dirt, other grass) is perfect. This all takes meticulous technical and artistic planning at the 16x16 tile level.
Resizing a texture gives you random pixel clusters. Blades of grass or individual leaves would lose their shape and become basically noise. Hand placed clusters are what make each leaf and blade look nicely shaped, even at this tiny resolution.
The resized rock texture example above isn't a good comparison. Rocks don't need to keep a specific shape to look "rocky". Grass and leaves do.
If I were studying a complex pixel pattern like that, I would try learning how it works by editing it. Make minor changes to the pixels, zoom out and see if it still looks good. Undo or continue until it starts to make sense.
Well, that's some of the best pixel art grass ever made. It's hard to explain when they make it look so easy.
Read up the pixel art tutorial this came from: http://opengameart.org/content/chapter-8-a-world-of-tiles
Here's a slightly simpler grass/leaves tutorial in stages, it might help you get a grasp of what goes into it: https://pbs.twimg.com/media/CjeXkAIWYAEjHs1.png
That's not allowed here. I'll mark that entry. Thanks for the heads-up.
I started with these textures: http://opengameart.org/content/commission-medieval
Then Justin Nichol did a paint-over of the diffuse texture.
I posted a look at each step here: https://www.patreon.com/posts/5815750
Nicely done! These look pretty great at 16x16
Pages