Water tiles part II

Okay, now for the continuation of the water tiles!

We need to make the water tiles work with the terrain edges, otherwise it will look very boxy instead of natural. We’re going to work with the top left 2 sections that we have ignored in the previous post. These 2 sections are for the water meeting a terrain, so that means we can only have 2 of them. Pick which 2 would suit your map best, usually it’ll be grass and dirt, though you can have it meet with rocks or a man made boundary.

So, we’ll do a sand one, and then a grass boundary. Set your grid to 16×16. While you don’t really need to do this for a sand boundary, usually grass boundaries have a bit of height over the water, so you’ll see a bit of brown right under the grass. Take a look at the RTP.

We’ll focus on only 1 column for now, as the rest would be copy and paste. Ignore the water for now, all we’re going to be doing is the boundary. Taking a look at the RTP again is a good reference for how you should be setting it up. The circle in the middle is for the top row, the vertical lined ones are below it, the horizontal lined ones are below that, and in the bottom is either the corner parts, or just plain water, you may not even need to put the corners.

This is how mine looked like, with the tiles shown seperately in the middle, and enlarged ones to the side.

You’ll want the vertical lined ones to tile vertically, and the horizontal ones to tile horizontally, if not, it’ll look odd.

Copy this column over to fill the section. I recommend placing a copy of the whole thing off to the side somewhere, either in a new file or in an unused part of your chipset.

Now, fill that whole light blue section with the animated first row of water. The first frame of the water should always be in the left side, the 2nd frame in the middle, and the 3rd frame to the right. Copy over the section of grass you made before and place it over the water (Obviously making sure the area in the middle is transparent). Giving us this:

Now that the grass is complete, let’s do the dark sand beach terrain. Since I already have the grass part still to the side somewhere, I just make all of the grass into one shade of brown. If you notice beaches, the sand that meets the water is flat.

But let’s make a white foamy line around it, and animate it so it looks like waves are going on the beach. So I’ll make a blueish/white line around it. For the 2nd column, I’ll move that line back 1 pixel, and I’ll push it back furthur for the 3rd column. I did vary the pixels a bit because I didn’t really like how it looked if it all went back a pixel.

As you did before, copy it onto the animated water onto the dark blue section that’s left. So for this corner, the only things left should be the animated tile pink section. Here’s our chipset so far.

Trees will be next. Take a look at some trees, either around you or in Google images and see which ones you like.