Gw Temp

Menu

Tutorial - 'Tile Your World: Water' by Mateui

An item about General posted on

Blurb

Learn about various water tiles, and then learn how to create your own.

Body

Tile Your World: Water
By: Mateui

Water – Also known as H20.

Tiles are very important in RPGs (At least 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 water tile, while first looking at professional water tiles to see how it’s done.

Water In RPGs:

Water, water, water. In real life 75% of the Earth’s surface is covered with water, so it makes sense that in RPGs, water would have a predominant appearance. Since water is usually found in many places in RPGs, the player playing your game will be looking at your water tiles for a fairly long time. If they’re not aesthetically pleasing, then, well, the player may lose interest in the game itself.

While this may be the worst case scenario, it would be wise to ensure every custom tile you make is up to par. How do we do this? Let’s look to the professional side of RPGs, and observe some methods of water tile creation.

The Simple Approach:
Water may sometimes be too hard to effectively pixel, so, some games, have decided to make it simple and easy. One game, that I have mentioned in the past, and will probably mention again in the future is “Zelda, A Link to The Past.”

I have taken the liberty of taking a screenshot of this fine game. Here it is:



Now, as most of you know, since water moves in real life, it moves in RPGs as well. (Most of the times). It’s basically an animation, with 3 or 4 frames which cycle to provide an effect of movement. There are two cycle options in Rm2k/3, but we will get to that later.

Look at the main water. It, in reality, is flat, but some effects are used to make it look like it’s moving. If you look at the water close to Link, near the bridge, you can see this light blue, shape (“^”). Also, you can see two straight short lines (“-”). These shapes are the things that actually cycle in the animation (In the main water area). These few shapes, appear and disappear, while the “^” shape grows and diminishes. These shapes create the illusion that the water is flowing down the stream, and rocking to and fro.

Now lets talk about the other area of the water. (The part that is dark, and hits the sides of the dirt walls. The water is darker, so that it looks like it is translucent. The darkness is supposed to represent the bottom most area of the dirt wall.

Also, you can see more subtle “v” or “u” shapes. All of these grow and diminish in their animation cycle, making it look like the water is hitting the sides of the dirt wall, and then flowing away with the rest of the water.

Overall, the illusion is really superb.

A Little Harder, Yet More Realistic Water:

Ok, so those water tiles were a little simple for you. Have no fear, more complex water tiles have been created, and lucky for you, I will attempt to create one and guide you through the process.

Before we do that however, we will need to look at an example and discuss it.



If you look at the water as a whole, you can see that it is merely composed of various ovals next to each other. The water looks like it has depth because of the highlights and the colour choices. For instance, in each oval, the centre is fairly dark, and becomes lighter the closer it gets to the edge of the oval.



If you strain your eyes, (or look at the above zoomed in version) you can even see some evidence of dithering (Making a repetitive pattern of two colours to create another shade – in this case, it’s a checkboard pattern inside the ovals.

Overall, all the elements of pixelling make this a really nice tile.


Making Your Own Water Tile:

Let me first say that making your own water tile, especially that of the complex variety is a pretty tough thing. It will take you many tries until it looks smooth and flowing enough to look like water.

(Before you begin, it would be a good idea to open up your Rm2k and look in the helpfile. Search the contents for chipset, until you find a section showing you the various sections within an Rm2k tileset. You will find some info there about how a water tile is animated – this will help you get the results you are looking for.)

A Simple Water Tile:

I cannot really show you a step by step process as things can get a little complex to explain, even in a simple example. But, I will show you my end result and will explain how I went about doing it.



Basically, this is what I did. I first zoomed in really far, until I could see the 16x16 square borders. Then I randomly placed groups of 4 pixels together. I then added 2 more lighter highlights around those groups of pixels. I did this for one line of 16x16 boxes. I then copied and pasted this line of 16x16 boxes, but flipped it horizontally, vertically, etc to make it a little different in the animation.

It turned out okay – and it would be used for a really simple style game.. although I have no idea what kind of game that would be.

Hey, at least I tried.

A Harder Water Tile:

The hard water tile. This one took quite some time, and I’m still not totally happy with it.



For this tile, I made various oval shapes at first, filling the whole 48x64 image. I then began to anti-alias the edges to make the more smoother. (For an excellent tutorial on dithering and anti-aliasing, see RG’s tutorial, by searching “Pixel Art Mayhem” on the GW Search engine, found on the upper left of your screen.)

I made some ovals nice and round, and others, more squishy and rigidity.


Conclusion:

By all means explore different water tiles found in other games and try to emulate those styles. Heck, even go outside and look at real water – it will help you a lot.

I guess that’s it for now. Tune in next time for some other tile madness.



- Mat.