Better looking water tiles

Felix Trapper

old fogey
Veteran
Joined
Mar 14, 2012
Messages
163
Reaction score
117
First Language
English
Primarily Uses
Better Looking Water Tiles!

By Felix Trapper

Introduction

RPG Maker VX Ace has an entire tileset dedicated to Water tiles. This, of course, is the "A1" tileset. You may have felt that the default RTP water is lacking. Perhaps it's too square, perhaps you don't like how it's opaque, etc.

In fact, you may have grown up playing such gems as FF6 where the water effects were downright awesome.


Something like this would be impossible using the default tilesets. You can't magically make them translucent, or put sunken houses underneath them, and make the water curve. But there is a fix!

You will need:

  • A graphics editor (paint shop, paint.net, etc.) that supports transparency
  • At least a minimal working knowledge of that editor
  • Patience

You will NOT need:

  • Lots of time
  • Great pixel art skills


1 - Find your water base tiles

Every game needs them. These are the 3 tiles that make up the core of your animated water. In this tutorial, we are gonna take the base tiles directly from the RTP, to show you how it's possible to change the RTP water easily.



Check this out: I opened up World_A1 from the RTP tilesets. Then, I set up a grid in my editor to divide the image into 16x16 squares (a normal tile is 32x32 in game). The three

yellow squares

are the base water tiles. Grab these three tiles and put them on a new sheet.



Good. Now, this next step is optional but I do recommend it. Right now, the water still looks kinda bland. We want there to be more

contrast

between the "white water" and the rest. In your graphics program, find where you can adjust the contrast, and do so thusly:



You'll notice the water looks a bit easier to distinguish between the crests and the troughs. Alright, we are done with the first step.




2 - Making a cliff base


Look back at the first picture from FF6. The water needs some sort of cliff or background tile to be placed upon to give it realistic depth. Again, we are going to pull from the RTP. I'm gonna do a little more in each picture while showing a little less, so do try and read between the images!


See what I've done? I've taken the cliffs from the RTP, used the grid to slice them into 16x16 sections.


Now, I've taken those 16x16 sections and made a base for my cliffs. I have a flat (front) section, and 2 side (diagonal) sections. Notice the ground is not grass--it is dirt/mud. Underwater, you will not see green grass! It looks bad. Use dirt. I also made my own shadow. Remember that the default RMVX shadow is pure black (0,0,0) set to 50% opacity. Got it? Good.
3 - Mixing water and earth

Now that we have the water base and the cliff base, it's time to mix them together. Start a new, large image and paste the ground base in 3 sections.



Now we are gonna put the water on. If possible, paste the water on another layer. If you are comfortable working in layers, this will help a lot. If not, or you don't know how, just paste the water and then set its opacity to about 67% (look up a tutorial on your respective graphics editor for this)

Once you do this, you can start dragging and pasting water base tile A (the first of the three) onto cliff base A.


Go back over this step and analyze the picture(s) a couple times if you got lost.

Now you are going to take one of each water tile, A B and C, and paste them again, side by side below.


We are now going to make the diagonal water tiles so it looks like the water follows the form of the cliffs!

Zoom in on those 3 water tiles you just pasted. Using the eraser tool, you are going to cut the tile diagonally in half. Try and set the "hardness" of your eraser to 50% and the size to about 4-5 pixels. This will give the edge of the water a cleaner effect.


Important: Always make sure the top left and bottom rightmost pixel are water, and likewise, cut it as close as you can to that pixel. This will make the water appear more seamless. Do it for the other two tiles, adding a little variation to each one.


It's coming along nicely. Now, we want the water to become 'whiter' when it crashes against the cliffs. This gives the water and edge, and contrasts it between the rocks. To do this, find your "lighten/darken" tool. We want to lighten the edge of the water. Adjust the strength of the effect to your liking. Ideally, it should come out looking something like this:


Ta-da! We now have reasonable looking water edges. Now, you are going to do the same thing for the other diagonal direction, and also the front side. For the front, you want the tile to be almost empty with just 1-5 pixels of water fluctuating at the bottom border.

When you have all the tiles, add them to the ground base. The leftmost water tile would go on the leftmost ground base, the middle on the middle, and so on.

You should get something like this:


Coming along nicely! I admittedly hurried through this part and could have made them a lot nicer. For your game, you will take plenty of time perfecting the look.

As a bonus, if you took the "paste the water on a new layer" recommendation I made earlier, you can now freely adjust the water's opacity to suit your liking. You can also use a hue shifting tool to make it more/less blue. If you pasted it all on one layer, your options are limited.
4 - Arrange the water tiles for use

Now it's time to make these useful. We want to put all these water tiles into a format VX recognizes. Let's start by deleting the redundant tiles or the tiles that aren't used with water. This is what is left:


Notice how each tile above is unique. Now, we are going to group these into blocks of 2x3 tiles to fit into the water tileset. Remember, a normal water tileset piece looks like this:




Notice there are 6 main tiles that make up the water. So, arrange your water tiles like this. It will look like a mess at first.







I like to group mine in similar sections. you can do it how you please, it doesn't make a huge difference.




Now, lets paste these into a water tileset for use.







Fits very snugly. Great. Now just save this as a new file, and put it in your project. Optional steps include pasting the dry ground diagonal tiles you made in an A5 tileset. You will see this in the final product.





5 - Finally, use the water in the RPG Maker editor!

Now we can finally see how it works! Import the tileset and start a new map. Using the water tiles, make several different 2x2 blocks of water. Notice each unique tile is being displayed. To get the upper-right tile to show, you need to make a 4 way intersection. The middle intersection piece will become the top-right tile.



Now we get to test your wicked shift-clicking abilities! Surely you know about shift-clicking, right? That's where you hold shift, right-click copy a tile, then while still holding shift, you can paste that exact tile without worrying about Mr. Autotile messing things up!

Go ahead and shift-click to your hearts content!





Add a sunburst effect (because what would an RPG Maker game be without SUNLIGHT EFFECTS?) and suddenly you have a bona fide map with water that looks a lot better than normal! And you don't even have to pester some dude about using them in your game because you made them yourself from materials you own a license to! *high five*



Check out this video to see the water in action!









Optional The default water animation speed in VX(Ace) is kind of slow. Formar supplied me with a fun little script that lets you customize the speed. check it out!





class Spriteset_Map
#--------------------------------------------------------------------------
# * Update Tilemap
#--------------------------------------------------------------------------
alias speedup_update_tilemap update_tilemap
def update_tilemap
speedup_update_tilemap
# 1 will double the speed
# 2 will triple the speed
# 3 will quad...
2.times do
@tilemap.update
end
end
end
Code:
 
Last edited by a moderator:

amerk

Veteran
Member
Joined
Mar 13, 2012
Messages
1,439
Reaction score
511
First Language
English
Primarily Uses
Nice, very clear and concise. It's great to see all these photoshop like tutorials coming up, as it definitely helps to break the mold and make such programs less scary.
 

rtester

Veteran
Veteran
Joined
Sep 13, 2012
Messages
55
Reaction score
13
First Language
English
Primarily Uses
RMMV
wow very nice i take it you do the same if you want it to be a sandy shores or any other tiles? lava ect. ect.
 

telles0808

Villager
Member
Joined
Sep 4, 2012
Messages
12
Reaction score
1
First Language
Portuguese
Primarily Uses
Man, your tutorial is awesome, thank you for sharing!
 

Jetstopia

Villager
Member
Joined
Sep 6, 2012
Messages
22
Reaction score
1
First Language
English
Primarily Uses
I don't think I have read a simpler tutorial to follow to date.

I will be puting this to use as soon as I can.
 

gruberik

Vein of Stars
Veteran
Joined
Nov 26, 2012
Messages
70
Reaction score
8
First Language
English
Primarily Uses
What graphics editor are you using? Looks amazing!
 

Sabin6120

Villager
Member
Joined
Dec 20, 2012
Messages
6
Reaction score
0
First Language
English
Primarily Uses
I'm using paint.net and I can't get the pixels to line up,It seems like I consistently end up with a picture that does not line up with the games tiles. If you could post a link to your graphics editor I would be much obliged.
 

Felix Trapper

old fogey
Veteran
Joined
Mar 14, 2012
Messages
163
Reaction score
117
First Language
English
Primarily Uses
Hey guys, for those wondering, I myself use Paint Shop Pro X3 as my graphics editor. I'm not familiar with Paint.net, so I couldn't help troubleshoot that specific problem, sorry!
 

Bobthegoat

Villager
Member
Joined
Dec 22, 2012
Messages
19
Reaction score
0
First Language
English
Primarily Uses
Hi. Awsome post but im stuck.

Ive read through it over and over and figured most of it out.

In section 4 I get the basic idea but I cant figure out how you got from one set of arrangements to the next and if there are any changes between 16x16 and 32x32.

Can someone clarify please? :)
 

Erics

Villager
Member
Joined
Sep 2, 2012
Messages
13
Reaction score
0
First Language
English
Primarily Uses
I just spent about 7 hours doing this.. for mine to come out all messed up @_@ I tried shift clicking and everything is still just wacky..... Anyone care to look at my tileset to see what I did wrong? Y MUST I SUCK AT THIS!?!!?

My horrible tileset...

 

Velvela Jade

Villager
Member
Joined
Jul 23, 2012
Messages
24
Reaction score
4
First Language
English
Primarily Uses
I just spent about 7 hours doing this.. for mine to come out all messed up @_@ I tried shift clicking and everything is still just wacky..... Anyone care to look at my tileset to see what I did wrong? Y MUST I SUCK AT THIS!?!!?

My horrible tileset...

I'm not seeing anything wrong with your tileset. Maybe, if you posted a screen shot of what you did in Ace (the resulting picture in ace) would help.

Thanks!
 

Velvela Jade

Villager
Member
Joined
Jul 23, 2012
Messages
24
Reaction score
4
First Language
English
Primarily Uses
I'm using paint.net and I can't get the pixels to line up,It seems like I consistently end up with a picture that does not line up with the games tiles. If you could post a link to your graphics editor I would be much obliged.
Try Gimp and see if that works better for you. Gimp has a snap to grid option that I like to use.
 

StarkinGyra

Adventurer
Member
Joined
Oct 13, 2012
Messages
219
Reaction score
9
First Language
English
That is super sweet. I will be using this for my water in the future.
 

Candacis

Pixel Pusher
Restaff
Joined
May 2, 2012
Messages
1,495
Reaction score
2,099
First Language
German
Primarily Uses
Thank you, that tutorial was very helpful. I edited the water tileset to use it at a pier:



Works very well there, too :) Same technique, background is just the stone tile I used for the wall above the water level.
 

Fallun

Villager
Member
Joined
May 24, 2014
Messages
26
Reaction score
1
First Language
Danish
Primarily Uses
Only got one word for this, AMAZING!
 

Valentor Denesto

Villager
Member
Joined
Aug 9, 2014
Messages
36
Reaction score
3
First Language
English
Primarily Uses
And this is awesome! Great job. And thank you for making it simple to understand!
 

Creativion

Warper
Member
Joined
Sep 10, 2014
Messages
4
Reaction score
0
First Language
English
Primarily Uses
Hey dude, thanks for the tutorial! One problem though... I spent probably an hour following the tutorial only to do it wrong. It's really frustrated to not have it correct despite working for hours! I'm using the same tileset as you though, so can I just use the one you finished in the tutorial? I will credit you, (I would've credited you anyway) please??? it looks like this, but after playing around with it, I realized it didn't work. So please can I use that tileset?

 

Sharm

Pixel Tile Artist
Veteran
Joined
Nov 15, 2012
Messages
12,683
Reaction score
10,586
First Language
English
Primarily Uses
N/A
If you say what's going wrong we could probably help.  It'd help Felix Trapper make a better tutorial too.
 

Users Who Are Viewing This Thread (Users: 0, Guests: 1)

Latest Threads

Latest Posts

Latest Profile Posts

Lol, I was about to write a small tutorial and realized it would belong to the MZ section ....that does not exist yet.
I've noticed that more videos on YouTube have these segmented bookmark things in the videos themselves. It's nice being able to jump to parts of a video you want, and to have them all clearly labelled.
Why you do this? Now I have to buy the new RPG Maker xD
I've always dreaded planning for my games so I just didn't plan at all. That... didn't work out after all. :kaosigh:
Turns out it can be kind of fun if you keep the scope small and don't take it way too seriously.
well... for the first time in months... I feel like my game is headed towards something again. I finally have it where I won't be drawing battle assets for the rest of the year...

Forum statistics

Threads
99,569
Messages
966,761
Members
131,225
Latest member
sabdopalon
Top