7 replies to this topic

[LTTP]

Transparent Water
By: LTTP

 

Today I will be making a tutorial on Transparent Water!

All screens will be using DoR Tile Set

Here is a quick Example on what you will be doing:



As you can see (only somewhat see in this case) the water is transparent, and you can see tiles under it!
Looks beautiful if you ask me!

(Scroll down to skip the simple transparent water to get to making it swimable/walkable)

We will start with just creating simple Transparent water!

You will need 1 layer screen for water for this example.

Start off by making your screen.
For this example, I will be making a simple dirt area, surrounded by grass.
The dirt area is where the water will be located on. (I will show further examples below this first section)

Ok! Now that's set! Go Creat/select a screen you are planning to use for the water layer (you should how to do this if you are reading this guide)
Basically you just want to put water on the layer where you would want the water to be on you're screen (as i stated, the dirt area on my screen)
So lets get to it!

OK all set!
I'd like to add: I use the darker water color instead of the lighter color water (normally shallow water) regardless of it being walkable or not because it looks better trnsparent (at LEAST in DoR, may not apply in all)

Make sure you have a set of solid and none solid water tiles for difference uses.
(I just made copy's of the tiles I used in this SS and had 1 set of solid and 1 not) NO NOT SET AS SHALLOW! MAY CAUSE ISSUES!
 

Now go back to you're first screen, hit F12 (go click layers under Screen Option)
Now set you're layer just made! (to 1 or 2, tho set it to 1 if you are not walking/swimming in it preferably)

Press OK AND!

TADA!
Simple right?
Now at this stage, its really easy to add details to the screen!
Simply add any tiles to layer 0 (AKA the screen it self) as you normally would and it will appear under the water as it should!

NOW TO add details on top of the water, you will need a new layer, and all tiles have to have transparent backgrounds!
For example:

Now simple add this layer like you did for the water (BUT keep transparency off of course)

AND!

Tada!

This screen is pretty ugly, but its only for an example!

Now a bit more detailed screens using cliffs to give the water depth!!!






AND even use other transparent layers over water (may turn out weird looking)

And that is it for simple transparent water!

 

 

 

 

 

 

Walk and Swim in Transparent Water

 

So now we move to the more time consuming part!
We will make it interactive!!

You will be able to walk in it and swim, getting both full effects of walking and swimming!

 I'll try to make it simple and clear!

First make an example screen like so:

Same as before! THO THE DIRT will not be staying! (you will be seeing in a moment)


Next apply the water over the area, same as before! (MAKE SURE ITS NOT SOLID WATER)
BUT THIS TIME SET IT TO LAYER 2 NOT 1!
 

OK new layer screen time!
This is pretty simple, re-create the area you wish to be covered with water like so:


You can go ahead and add the details if you'd like to now, but in this case I wont.

Next add the layers to you're screen, making sure the water layer is on layer 2 and the ground layer on 1.

You shouldn't need a SS at this time to know how!

OK now it should look like:


Same as before! BUT now we will do the things to make it interactive!

So this step will be based on what you want you're water to be.
Want to swim in it? USE water tiles!
Want to walk in it like shallow water? USE shallow water tiles!

Go to your first screen and disable layer 1 and 2 for now!

Next simple apply the water tile you wish to use over the area where the water is!
Note: don't worry how it will look, it will be hidden under the layers!!!
Like so: (In this example its shallow water)


(The blue is shallow water, again use Water or Shallow water based on what you want)
NOW simply re-enable the layers 1 and 2 and you should get it back to how it normally looked!
BUT it will be interactive (Based on what water tile you used)



AND its done!

BUT their is an issue at this point.

Layers 1 and 2 are used, so trying to use on top water tiles will be an issue, putting it on layer 1 will make it appear under the water, and putting it on layer 2 will make it transparent...

So at this point you will need to just try to make under the water look as nice as you can to try to replace the lack of stuff on top of the water.

I'll leave that up to you to figure out!



Tip: If you have a screen with shallow water and also with none shallow water (solid) and are not planning to have it swimmable (or not having flippers) Just use layer 3 or 4, it will be odd if enemy's go on it or if you throw stuff at it, but it works out if you use it correctly.

Tip: Swimming in shallow water may look odd on link with his bottom missing! You may want to edit it! Also tho, its not to much of an issue.


Other then that, this should be it!

Don't be scared to play around with it!
Test things out!




Any mistakes or anything you think I should add/improve let me know!

Edited by LTTP, 28 May 2013 - 10:40 PM.

[Mr. Z]

Your first pool is interesting, you didn't actually use ledges, but instead you used the dark spots in the water to make it look deeper.

Many people don't use transparent water, either because often it doesn't look good in their tileset, or because they're convinced transparent water is always ugly and unrealistic. (They haven't seen real water and its spectrum of colors then)

Luckily, the water in this tileset looks really nice.

[LTTP]

I fine light color transparent water turns out really weird in DoR, so I use dark for everything, and it turns out well I fine in most cases.
You could probably try other color water tiles to try to give deeper water more *deep* effect, tho this would be easier if u could change how transparent some parts are
Maybe in future release :3

Ya I tried transparent water in a few Tilesets before, its sometimes hard to get it to look nice.

Edited by LTTP, 29 May 2013 - 09:37 AM.

[UZF]

This is a wonderful tutorial! 

But this definitely should not be used in the Pure Tileset. 
This was a very easy tutorial to understand. Thanks for posting this! 

[Russ]

But this definitely should not be used in the Pure Tileset.

I disagree. Here's a picture from me and a picture from Mr Z, both in the pure set (well, PTUX, but same thing).

 

 

 

I'd say it works fine in the Pure tileset.

[LTTP]

You just have to use different water color to use transparent water in other tilesets.

[Mr. Z]

I disagree. Here's a picture from me and a picture from Mr Z, both in the pure set (well, PTUX, but same thing).

 

I'd say it works fine in the Pure tileset.

 

Actually mine used the Pure Remembrance tileset, which has Dor style palettes I think? I also edited the palette like crazy, including the enemy csets, so you can't really compare them any more.

It was a lot of trouble getting the right colors though, add one value to blue and the whole thing looks different. It's often a matter of luck and patience.

 

Here are some more examples of transparent water that cost me a lot of time to get right:

 

The lower part, the bottomless water uses a dark green-grey-like color as layer 0, that's the only color this transparent water looked right with.The submerged parts of the mountains are 8-bits and include this color in their tiles.

 

This shot looks better in game where it's animated. The details underwater are made in grey/white, no pure blacks.

 

 

So if you want to use transparent water, but the colors don't look right, it's best to just edit the palette. Tiny changes make a lot of difference. Just watch out the changes don't interfere with other tiles that use the same color as water.

[LTTP]

Thankfully I didn't edit my palettes at all (other then links a tiny pit)
I do plan to change some colors at 1 point, I just got to watch out as u said