Posted by: Ocean's Dream | January 22, 2008

Water tiles Part I

Time for water tiles. There are actually 2 ways to go about this, I’ll go over the first method before I do the second.

Method 1:

We’ll need to go to the upper left corner of the tileset, where the blues are. Those sections are the same size as auto-tiles, but for method 1, they do not work exactly the same as auto-tiles. The lightest blue section is for one terrain meeting the water, the one next to it is for another terrain meeting the water. The darkest blue section is for varying the types of water tiles, so you can go from light to dark.

First, let’s ignore terrain and just concentrate on making a water tile. Now, what you’re probably thinking of is BLUE. Well, you very well could use blue. However, consider what type of world your game takes place in. A more realistic world may use more browns and dull blues or greens in it rather than a bright blue.

For puddles, I recommend you use a dirt tile and make a transparent layer above it, and color it in a slight blueish or brownish. It should be darker than the original tile, though. (For reference, check out the Rudra forest chip). Photoshop or Graphics Gale are good for those layers, just make sure you first put it on RGB mode first, put a transparent layer above it, merge the layers, then put it on indexed (8 bit) mode.

For the Ocean, it tends to be more blue. Google up some pics of the Ocean. Here’s an example one:
See the area with light lines on the bottom right side of the picture? That’s generally what’s use as a reference when making water tiles. Let’s start here:

Quite honestly, for some games you can get away with having a flat blue that doesn’t animate for a water tile, or maybe one that just has a sparkle animation on only a few of the water tiles. Other tiles have a very simple animation that consists of moving some pixels slightly. Try out the tiles in RPG Maker to see if they flow well.

However, I’ll do a water tile kind of like the RTP one. The RTP water tile is the only one I know of that has the water go brighter when it animates, so usually I’ll just have the water move and not change color. I’ll go with 2 blues for now, when I need more I’ll add some more. Put down the base color (Which should probably be the darkest) first and leave it as a flat color.

We have to treat the water tile like a tile. So when placed together, they should fit together right without looking odd. So, I made a first pass water tile with only 2 colors. I mainly made circles within the tile, so use the circle tool if you’d like. Here’s the tile, the zoomed in version, and an example of how it tiles on the bottom, I recommend you do something like that to test how a tile tiles, and pay attention to the edges of the tiles too. The lines on the bottom of the tile should match up to the ones on top, the top left corner should match up to the bottom right corner, etc.

I’ll place some highlights to make it look bright. Try not to make it too bright as you don’t want the water to stand out that much.

Now to animate it. You have one tile already, you need 2 more. The animation works like this (Unless you specifically tell it not to in the RM2K3 tileset section): 1st tile, 2nd tile, 3rd tile, 2nd tile, and back to first tile where it can repeat. You could try redrawing them so it looks like it moves. There’s 2 shortcut methods you can use also, though they might not always give the best results. First one is to flip the water tile vertically for the 2nd tile, flip it vertically again but then flip it horizontally for the 3rd tile.

The second method is to move it either up and right/left a few pixels for each tile, or down and right/left for a few pixels. This will make it look like it’s flowing in a certain direction. I don’t have a gif maker here, so I just made a sheet with all 3 methods here:

You can take the darker water tile, use the circle tool, take a transparent color, and get rid of the middle of it. Take a look at the image so you see what I mean.

So the first row in that section is the lightest water, the second row is the dark water with the light water in a circle in the middle, the third row is light water with the dark water in a circle in the middle, and the 4th row is for dark water.

Method 2 of making water tiles:

Now that we covered animating water tiles, and we covered auto-tiles, we can combine them. This has the benefit of making a more natural looking water boundaries, plus you can it animate for however many frames you’d like. Do not post all the frames of the animated water in the auto-tile, you only need one water tile.

We’ll do the animation by making multiple tilesets that are exactly the same, except for this water auto-tile. Make as many tilesets as you want frames of animation. So if you have enough for 6 frames, then make 6 tilesets.

Use a parallel process event to change the tileset, and a wait command of about 0.1 seconds, with maybe another 0.0 seconds or so. Have it cycle through all the frames of animation so that it loops correctly.


Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )


Connecting to %s


%d bloggers like this: