Making a Custom Grass Autotile from Scratch
Avery
by
Avery
on
June 1, 2021
June 1, 2021

Making a Custom Grass Autotile from Scratch

Making a Custom Grass Autotile from Scratch
by

Avery

on

June 1, 2021

Sometimes, the tile you think you need someone to make is actually already within your skill level and you just don't know yet! For an example, let's learn how to make a grass autotile!

Sometimes I read requests like “I need texture xy, just something different.” Depending on your game’s size you might want to have some extra textures for more variation or you just want to have your own touch.

Note: The tutorial is meant for creating MZ style results. If you use Ace RTP, just use a different grid size and don’t limit the colors in the end. For MV, don’t limit the colors in the end.

Basic setup

All things shown here were made with a graphic tablet (as I like to work with pressure opacity, you can emulate that effect with pencil and smudge tool) and Gimp. My graphic tablet is a cheap off brand one that I got for christmas years ago, so no high end equipment was used here.

I draw all the tiles at 1000% and scale them down later. The review images are 50% of the size I drew them and 500% the size they actually will be when I use them.

If you do so as well, remember that anything that is thinner than 10 pixels might just disappear in the final shrinking down process!

Future or past, medieval or modern, fantasy or realistic, every game has grass unless your entire game is set inside a building or something.

So let's take a look at how we can make some neat grass for our own games.

First, I create a layer of my darkest green tone and I will keep that layer as background untouched for the whole process until the merging in the end. It is the size of the final tile (so here: 480x480 pixel, scaled down 48x48).

Everything besides this background layer can be done on one layer (or several ones for each shade, if you need to try around some more).

Using a lighter green tone, I start sketching in the grass on a separate layer. I make sure I don’t touch the actual borders of the tile and try to follow the actual structure of grass. Here you have to know what you want, as grass differs in length, color and level of care people put into it. Here I went with very basic grass that is of a medium length and unkept.

I try to create several “tufts” in this process, cause this is how grass usually grows.

With an even lighter shade I highlight the grass - I like to go with a soft brush here and make the middle to top part lighter than those which are closer to the ground. As this grass is bent, I usually have the tips fade to a darker tone as well.

With a shade between the background color and the base color of the tufts I added some more grass in the gaps and also added some shading where I felt it was needed. You can for example add some shadow where the blades overlap or in the middle of a tuft.

Now I take that layer with all the nice shaded grass and… cut it in half. as this part was drawn in one, it is seamless. Now I place it like this on my background tile.

And I repeat the steps from before to fill in the gap. Now I have a neat grass strip that loops vertically.

While the vertical part works fine, horizontal is not quite there yet, of course. But here I use the same technique.

A quick cut and rearranging…

...followed by some more grass tufts, and then, you might guess…

after another cut, rearrange and repeating with the tufts, I am done.

The process of just drawing and then cutting the structure then filling in leads to a seamless pattern, just as I wanted.

Scaled down, it will look like this:

You can now limit the color range to get a more pixelated look for MZ, though in this specific case, I have to admit there is not that much of a difference:

Right: limited colors, Left: unedited

Now there is another thing left to do - this tile is just what I wanted, but if I try to map a path…

Welp, not ideal.

To start with our autotiles, we need a 2x2 tile area of the grass:

Now there are two options, I like to have both.

These are created in the same pattern:

The middle part, a 48*48 section, is one looping texture - either our grass or the “not grass” part. The blue parts have to loop.

These are just drafts that I now use as base to create a nice shape.

In the middle you see the refined part, on the sides the proof and test that the side parts still loop.

For the refinement I made sure to follow the shape of the grass and add some blades here and there to get a nice consistent edge.

Then I made myself this shape by using the 4 edge parts to use as a template to create the inner edges.

Out of these parts I can now put together the whole autotile:

This process left me with these two autotiles:

I now have to add shadows to them, so I make them a layer in Gimp:

Then I duplicate that layer and turn it to black:

Now I select the upper left, the upper right and the lower part of each autotile and use a gaussian blur on each of them:

You have to do this in these steps and separate parts to not get the wrong edges blurred.

Place this layer behind the grass and you have a functional shadow.

Now create a new layer, select the transparent part of your grass layer and fill that on the new layer with a darker green shade:

Use the gaussian blur on that layer as you did on the shadow layer, first each upper left and upper right tile and then each lower part:

Now select the transparent parts of the grass layer again and delete that section on the green layer.

This is my result:

I can now add our ground behind and am done (Editors Note: You can also just leave it without the groundcover and use MZ to tile it onto a higher layer!):

Here you can see how much of a difference these easy shadows make:

And my path would now look like this:

Last words:

You can use a different colored shadow if you want it to match the ground better or even use that method for a layer mask that you use to darken the actual tiles.

By picking the colors, make sure your contrast is not too high - your ground should not be too busy.

Make sure to avoid too many obvious clusters or patterns in your structure, as those will repeat over the map.

Recommended Posts

footer-map