Fading water into a picture background

Since I saw a request on this and the answer would anyways be a long winded tutorial like post, I just gonna bite the bullet and make it a tutorial.

You can achieve similar effects the same way in other makers, but since I hate editor mapping from VX to MV due to its limitations especially on layers, this is a tutorial for MZ.

So here is a more complex result that requires quite a bunch of tile editing and placing stuff correctly, but can technically be made in the engine as well:


Before we dive into the whole thing: I am very sure I saw a similar effect (not sure achieved this way) in a mapping video by @Dust many many years ago. Just giving credit where credit is due.

To demonstrate how to get the fading, I threw together this quick editor map with default tiles only:

As you can see, I simply use vehicle type charsets for the ship in the distance and simply used the world map default autotiles instead of the outside ones. Generally, as I always say: look around and build your own tileset, it just looks so much better.

One thing I already did besides this slight tileset adjustment with the world map floor is to copy the Ocean picture and rename its copy to “!Ocean”. The “!”, prevents is from scrolling and shifting with the map. As you can see, with “!” it is exactly where it is in the editor.

Here is the difference.

Ocean:


!Ocean:


So how to get the fading? This is where you open gimp and start editing.

Since you need transparency here, make sure the mode of the image you copy your result on is set to RGB. In Gimp you can do this by choosing Image - mode - (and if it is not already set) RGB. Indexed mode will not work.

First of all, you need to have a tile that is only the water without the border, this is achieved by simple copy and paste:

Autotiles are cut in 24x24 pieces that combined fill the 48x48 grid. To get a all water autotile that seamlessly fits the one with the border, you need a 24x24 grid any copy and paste the parts from the middle and place them to fill the autotile as you can see indicated by those colored in pieces on the left.

The upper two tiles of the autotile you’ll ignore, since those autotiles won’t be able to do bends and curves anyways.

For this example, I want my transition area to be 4 tiles high, that is why I take my “tiling water” from the last step and copy it again, to be 4 tiles vertically:

You can see that this all happens in a separate file than the autotiles, I don’t wanna accidentally mess with the default one. So now, all I need is the gradient:
Right click on the layer, and add a layer mask. Which one does not matter since I am going to change it anyways immediately.

Then, I choose the gradient tool with a smooth transition from white to black, and fill in the layer mask on top of these 4 tiles with it. The start is where the tiles start and the end is where they end. Hold the control key to ensure the gradient follows a completely straight vertical line.

And here is how the result of that looks like:


This is the matching layer mask:


Now right click on the layer and “apply layer mask”, to make the change permanent.

All you have to do is to translate this gradient into the autotile format and use it, which basically just means you have to have an empty row on top of every 2 tile segment; I also quickly threw some text in the preview window so I know what it is in editor:


Then you place it on your sheet, wherever you have room or have something your are fine with swapping out:


Here you can see how the label helps:

And now, I simply map the top 2 tiles of what is currently ocean with “Fade1” and the two below it with “Fade 2”.


This is where I realised I made the edit on the wrong beach water, but since this is just to show the effect, it doesn’t matter:

All that is left is to shiftmap the “original ocean” to remove the top sandy border:


And how does it look in game?


There is so much more you could do, like have semi transparent charsets of water animals in the water, add “mapped” islands that bind the parallax picture more into the map or use an ocean picture without the island and have it scroll or recolor it a bit to match the ocean tiles water color better…

If you have the room on your A1 tileset you can have your fading area over more tiles, a 6 or 8 tile fade will look smoother of course.

Have fun!

really nice, but I also see the "HAMBURGER" :D.

nice tutorial as always, nice tweak. Thank you a lot of this nice tutorial.

A mapping masterclass!
Yay. Thank you.

Nice.

By the way, maybe a reflection wave filter can make the water less static.:LZSgrin: Need to remove the island though.
Pixi Filter Controller - fancy screen effects by pixi (MZ version released!)

I know you don't take requests but even with your tutorial, I am a complete noob with GIMP, or any picture editing tools for that matter. If you would be willing to create that A1 tile, I would gladly pay you. ya?

You have so many cool ideas. And you combine your artistic skills with mapping.