Gw Temp

Menu

Tutorial - 'Tile Your World: Grass' by Mateui

An item about General posted on

Blurb

Learn about various methods of grass creation in RPGs, and then, learn how to pixel your own grass, with a tutorial. Many pictures inside!

Body

Tile Your World: Grass
By: Mateui

Grass - The Green of Life.

Tiles are very important in RPGs (Atleast the ones that are produced by amateurs in the gaming community). This is because without tiles, the game would take place on a blank screen – and the illusion of reality would be nonexistent.

This tutorial will teach you how to create a basic grass tile, checking to see how it would tile, then transforming it into Rm2k form. Ready? Let’s go!

Grass In RPGs:

Throughout different RPGs in the past – many methods of pixelling grass have been produced. Some have been created to show such fine detail as single blades of grass, other have toned down the detail, and used more soothing techniques, while others, totally removed the detail, and made the grass all one colour – simple, yet effective if used right.

Which games use these? Instead of specifically telling you, I decide to find some screenshots of such games, and tell you some more about the type of grass they used.

Zelda – Simple, One Colour:



Look at the main grass. Only one colour. In normal cases, you would think that this would be a really bad idea – but why did it succeed? The big reason would be consistency. If the grass was one colour, and everything else was really detailed, then the grass would be a no-no. But since the style is kept throughout the whole game, the grass is ok.

Another reason why the grass is good, is because it doesn’t necessarily grab and hold your attention. The main focus should be around the character sprite (Link), and since the grass isn’t too flashy, the player’s eye is automatically drawn to him.

Yes, simple, but it does the trick.

Secret of Mana – Highly Detailed:



SOM, everyone probably holds this game as one of the most beautiful and detailed creations to come on the SNES. And it probably is – just look at all the fine detail placed on such simple things as grass.

Now, in this screenshot, we can see two different renditions of grass. We will first talk about the darker grass, the one surrounding the dirt area.

If you look closely, you can see various single blades of grass. If you inspect the grass right where the dirt ends near the bottom, you can see these blades standing upright. Very detailed, and they only consist of about 5 pixels each. Wow.

Materia Quest – So Good, People Say it’s the New RTP:



Well, everyone knows this style – as Mack and Blue (Refmap) have been quite the popular tilesets to use. The main reason is that they are in a complete set, but still, Refmap chips look really beautiful. (Sadly, they’ve been given a bad name due to over-usage..)

Now, in this screenshot, you can also see two types of grass tiles – one light coloured, and one dark coloured. Let us examine the light coloured one first.

The grass has uses about 4 colours, 5 for the areas right above the cliff rock. This grass uses a slight dithering style – sort of detailed, but not as much as the SOM grass. Instead, the grass tends to be more softer, and flat. The grass is not wild, like the SOM type.

The other grass is almost practically the same as the light grass, but only with more darker colours. These dark colours are used to achieve the look that the grass is being shadowed by surrounding areas or objects.


Grass Creation:

Now that we know a few things about grass in other RPGs, we can begin to create our own! I will give you a step by step tutorial on how you can pixel your own grass for use in your own game.

Step 1: Selection of Colours
In all of the examples we’ve looked at, you could see that all of the grass was composed by different shades of green. Now, grass doesn’t necessarily have to be green, for instance, if your game takes place on another planet, but since most RPGs take place in a world were green is the main colour of grass, this is what we’ll use.

Typically, most pixelled grass is composed with 1-5 colours. We’ll use 4 in this tutorial. Before you can select the colours though, you will need to acquire a palette. The one I personally use is the one which is used in REFMAP. You can acquire this palette by saving a Mack and Blue chipset, and then opening it up in IDraw. It should look something like this:



Got it? Good. If you want to create your own palette, just select two colours at a distance from each other, and hit the gradient button to get some nice shades of a colour.

I have chosen these 4 shades of green:



And here is a 2x version:


Step 2: Fill it in

This is fairly simple – just use the paint bucket to fill in the whole 16x16 square. Fill it in with the darkest colour you have. Simple.



And here is a 2x version:


Step 3: Pixel in the Blades

Now, select the second lightest colour, and pixel in the shape of the blades of grass you will use. Again, this step can be different depending on the style you decide to emulate. I am going for a REFMAP/SOM Style..



And here is a 2x version:


Step 4: Shade in the Blades

Now, select the second darkest shade (3rd green colour) and shade in the blades. To do this, find your light source, and shade the opposite side.



And here is a 2x version:


Step 5: Highlight the Blades

Now, select the lightest colour, and give the grass some highlights on the grass. Try not to add too much, as it will take the focus away from the other shades of green.



And here is a 2x version:


Step 6: Check for Tiling

Now, you may want to take your tile, and copy and paste it to make a large box. This will let you see how your tile will look like in a game when it is all tiled. If it looks like you can see an obvious pattern forming, you may want to edit your tile a bit. Look at how my tile tiled. You’ll be able to see that in most cases, the tiling will not look that great – you can see some patterns forming already. (I’m going to edit it for the next few steps..)




Rm2k Chipset Form:

You have your 16X16 tile, but you need to transform this into Rm2k form, (which is 48X64) and then add it to a chipset. Below, you will find something that will help you.



You can find this in the Rm2k Helpfile, but I will remind you here to make this quicker.

The purple 16X16 box needs to be filled with the colour that will be your background. In this case, you can fill this with a solid dark green colour, preferably one that you used in your grass tile.

For the blue and red boxes, you can use your already existent 16X16 tile, but for one of them, you can flip the tile Horizontally. I find that this works fairly well.

The last green box (48X48) is where your actual grass tile will be. What I did was copy and paste the 16X16 across the whole thing, edit it to disperse the pattern, and then I made the thing more circular.

To see the end product look below.



And here is how the grass looks in the Rm2k Editor:



Note: I made another version of the grass tile, but a little lighter. You can really see, both version look nice together.


Conclusion:

I hope you’ve learned something about grass – it was pretty fun observing various tiles, and then creating your own. I trust you’ve had a fun time as well.

I off for now. I’ll continue to write about different tiles as I explore them. Until then, BAI! ^_^!


- Mateui