iPhone App Directory
RPG Maker VX
 
Gallery Members Search Calendar Help


Welcome Guest ( Log In | Register )

Collapse

>Announcement

The 2nd Quarter Contest has arrived! Go check it out in the Community Announcements now!

> Note for Tutorial Threads

New threads (tutorials) here will go into a moderation queue. You will not see your thread appear when you create it. A moderator will decide if it will be approved or denied.

2 Pages V   1 2 >  
Reply to this topicStart new topic
> [-Mapping -] Animated Water, How to animate water using photoshop.
Rating 5 V
ak47lol
post Aug 3 2011, 05:43 PM
Post #1



Group Icon


Type: Designer
Alignment: Chaotic Evil




ANIMATED WATER

This tutorial will explain how to animate water for parallax mappers, using photoshop.

EXAMPLES
Spoiler:









Footage Taken From
Amulet of Athos: Legend of the Sarian Knights

TECH DEMO
It looks A LOT better in game then on youtube. smile.gif
So I strongly recommend you try the Tech Demo HERE.
This demo is just to show the water in game, Please DO NOT decrypt this demo and use it's contents!


WHAT YOU WILL NEED
Adobe Photoshop
Modern Algebra's Animated Parallax script
Woratana's Multiple fogs script (Optional Script)
Celianna's Farm and nature Tileset (Optional resources)
Ying's Trees (Optional resources)

Some time and a little patience. smile.gif

WARNING
This is quite a long tutorial, so please make sure you have plenty of time.

NOTE:
There are probably a billion better ways of doing this that produce far grater results but this is just one method and I hope it helps.
I don't have a Mic so I will have to post smaller videos and comment under them. sad.gif
Also you won't see much in the embedded videos, it's far too small. Please watch them on youtube itself, much bigger screen.

STEP 1 - Starting up



- Open Photoshop and create a new page with the desired map size.
- For this tutorial we will stick to one standard resoulution VX screen, 544x416 pixels.



- Next make and Insert your ground layer (I'll leave this to you)
- And open up any resources you want to use.
- I strongly recommend Celianna's Farm and nature Tileset and Ying's Trees.



STEP 2 - Making the Water Pool



- Go to Celianna's tileset or the resource of your choice and find a water like image, something with wavey lines in it, like in the video.
- Copy and paste it in to the page you're working on, above the ground layer.
- Keep doing this like in the video untill you have filled the page, Try to mix it up abit so you don't see any obvious blocky patterns.
- Once you have filled the page, you should have something like in the video below.



- Keep in mind, you can save this image and re-use it for all your other water maps so you don't have to do this process ever again!
- Re-color the water if you want.
- Duplicate the water layer, Very important Incase you mess it up! (like i often do) and then work on the copied layer.
- Now, select the eraser tool with the rounded soft brush and erase out the shape of your pool like in the video above.
- Move the pool to the desired position, if need be.

STEP 3 - Adding a border



- Go back to to Celianna's tileset or the resource of your choice and find a 'Edge' like image, like in the video.
- Copy and paste it in to the page you're working on, going all around the border like in the video.
- Ok, you must be thinking WTF? right now, but please, trust me, it will work out in the end. tongue.gif

- So now it should look like the video below.



- Duplicate the border, Incase you mess it up and then work on the copied border layer.
- Select the eraser again and the soft rounded brush and go around the Inside of the border smoothing out all the rough edges.
- Then still with the eraser select the splatter brush, but this time go round the outside of the border, use lots of clicks instead of draging.
- Once that is done you should have some what of a decent border, I did mine very roughly. You can spend alot more time and make yours really nice.
- Of course you don't have to make a border like this and just use your 'cliff' tiles instead which is done in the same method. (I'll leave that to you)


STEP 4
- Making the Animation Frames



- Duplicate your water pool layer 3 times, name it Frame1, Frame2, Frame3
- I used 3 frames you can use however many you want but I don't reccomend too many.
- Select each frame individualy then go to Filter > Filter Gallery > Distort > Ocean Ripple
- For the first frame change the Ripple size to 2 and keep Ripple magnitude on 1.
- For the second frame change the Ripple size to 4 and keep Ripple magnitude on 1.
- For the third frame change the Ripple size to 6 and keep Ripple magnitude on 1.
- You can adjust the Ripple size value in larger increments if you want the water to be more hostile.


STEP 5 - Saving The parallaxes

- There are many ways to display the animated frames in the game, one option would be to use the multiple fogs script. (which will be needed for waterfalls that you can walk through)
- But for this method we will use Modern Algebra's Animated Parallax script.
- So make sure you have Modern Algebra's Animated Parallax script already in your game.



- Select only frame 1 and the rest of the layers and save the image as "WaterTut_1 .png"
- Do the same for frame 2, this time name it "WaterTut_2.png"
- Do the same for frame 3.


STEP 6 - Inserting in to the game



- Open up your project.
- Make sure you have Modern Algebra's Animated Parallax script inside.
- Put the default speed to 10, you can assign a speed for each individual map, but we'll just go with the default value for now.
- I put 10 but you can make it faster if you want.
- Open Resource Manager, In parrallaxes import the 3 images you created.
- Set the map properties up like in the video, Make sure the map is the correct size!
- Once that's done we can test it. Watch on youtube itself or fullscreen! smile.gif sucks embeded.



- Ok, lets compare it to the default RTP water.



- Don't know why I showed you that. tongue.gif



- Above is the comparison, not too bad I geuss.
- Again please watch on youtube.

STEP 7 - Adding Water Features

- How about we spruce things up abit?
- Let's add some nice water features rather then having a plain old boring pool of water.
- Please watch on youtube!



- Open up your resources. Celianna's and Ying's resources are awesome for this, thanks guys!
- Copy say the rock feature like in the video and paste it into your page, paste it again on top of it.
- Name one layer Rock Top and other Rock bottom or something tongue.gif just so you can identify them later, if need be.
- On the top layer select the soft round eraser tool, yet again, and erase around the bottom of it.
- Then select the bottom layer and turn down the opacity. It should look like it's underwater.
- Then on the bottom layer erase the most bottom parts like in the video to give it more depth.

- Do the same for some more features like in the following videos.



- Another water feature.



- That should be enough for now.
- Please remember. when you have done this once you can re-use all of the stuff you created again for later maps so it will be much faster next time.
- Now you need to re-save all these parallaxes again like before.



- Select each water Frame and save it individually just like before, and just overwrite them.
- Now we need to insert them in our game again.



- Do the same like before as in the video above.
- Now let's test it!
- Please watch on youtube, I know I keep saying this.



- It works!
- You can even animate the features aswell using the same method, for exmaple a fountain, but i'll leave that to you. tongue.gif

STEP 8 - Adding a Waterfall that you can walk through.

- Coming soon!
- Can't be bothered right now but I'll show you how to do this soon.

STEP 9 - Build the rest of the map.

- I'll leave this to you. smile.gif
- In the end It could look something like this.
- Please watch on youtube



It looks a lot better in game then on youtube so I recommend you try the Tech Demo HERE.

That's it for now.
Thank you for your patience, I know it was quite long but hopefully it gave you some idea of one method of animating water.

EDGE ANIMATION

A very quick example with a little "wave" effect around the edges of the water, which makes the water look more like it is moving.

Video


You can do this using the same method, I'll show you how it was done a bit later.


WATER DEPTH

A quick exmaple of adding water depth.



-Make a new layer above the Water animation frames.
-Select the white color.
-Select the soft rounded brush tool.
-Brush along the border of the pool.
-Once done turn the opacity of the layer down to like 25% or whatever you like.
-Thats it, just re-save your animation frames again with this new layer aswell.

Example Screen


Example Video



CREDITS

Please make sure to credit the following people if you used their scripts and resources!

Adobe Photoshop
Modern Algebra - Animated Parallax script
Woratana - Multiple fogs script (Script)
Celianna - Farm and nature Tileset (resources)
Ying's - Trees(resources)
AK47 - (Tutorial) Some credit would be nice for the time spent making these tutorials. smile.gif

SUPPORT

Found this tutorial helpful?
You can support it if you want or you can support my game Amulet of Athos: Legend of the Sarian Knights which inspired this tutorial.


Spoiler:

CODE
[url="http://www.rpgmakervx.net/index.php?showtopic=48327"][img]http://img819.imageshack.us/img819/4896/animatedwaterban.png[/img][/url]



Spoiler:

CODE
[url="http://www.rpgmakervx.net/index.php?showtopic=34288"][img]http://img695.imageshack.us/img695/7864/supportbar.png[/img][/url]



This post has been edited by ak47lol: Dec 4 2011, 03:23 PM


--------------------





Go to the top of the page
 
+Quote Post
   
quigonkeichy
post Aug 3 2011, 06:01 PM
Post #2


I MOVE THE STARS FOR NO ONE.
Group Icon


Type: Writer
Alignment: Lawful Evil




Yessss, this is totes helpful! It's weird actually 'cause I'd managed to figure out how to animate the water and it was just the edges I was having trouble with before D: thanks for this dude!


--------------------





My project!



I support:
Spoiler:









Go to the top of the page
 
+Quote Post
   
The JJ
post Aug 3 2011, 06:14 PM
Post #3


TGOD
Group Icon


Type: Designer
Alignment: Chaotic Neutral




Jheez man that looks amazing, I'll give it a go and this will really help me with my remaps smile.gif


--------------------



If anyone can sprite, draw RTP portraits and make HUD's then I will pay if someone would help me with some editing, Name the price and just PM me.
Go to the top of the page
 
+Quote Post
   
ak47lol
post Aug 3 2011, 06:26 PM
Post #4



Group Icon


Type: Designer
Alignment: Chaotic Evil




Hope it helps, I know it can take some time initially but the more times you do it, the faster you get. smile.gif
Also If the tutorial wasn't too clear about anything please let me know.
Thanks.


--------------------





Go to the top of the page
 
+Quote Post
   
Dkpwner
post Aug 3 2011, 07:00 PM
Post #5


Igzo Mina!
Group Icon


Type: Designer
Alignment: Chaotic Good




Looks amazing,
going to try and make later on^_^


--------------------
Deviant Art with custom animations:
http://dkpwner.deviantart.com/

My Project:


==================================DEVELOPMENT PAGE COMING SOON=============================


I SUPPORT:
Spoiler:






Go to the top of the page
 
+Quote Post
   
Luneth
post Aug 4 2011, 12:07 AM
Post #6


Hero of Light
Group Icon


Type: Artist
Alignment: Chaotic Good




So much awesome oozing out of this tutorial! This is really helpful and easy to follow biggrin.gif Thanks very much ak!


--------------------
V CLICK THIS FOR AWSOME PICTURE V
Spoiler:
You know Lightning is awsome ;)

Spoiler:


That's right ~desu

I support:
Spoiler:
Games:








Tutorials:


Other:






My thing(s):
Spoiler:




My Project:


My Project Development Blog:
http://heroesofyoreproductions.wordpress.com

If you are a believer of Jesus Christ, and are 100% proud of it, put this in your sig!
Go to the top of the page
 
+Quote Post
   
Joerao
post Aug 4 2011, 12:30 AM
Post #7


...
Group Icon


Type: Musician
Alignment: Neutral Evil




Again, you are really pushing RMVX's limits here. Kudos.


--------------------
Go to the top of the page
 
+Quote Post
   
Croixiane
post Aug 4 2011, 12:43 AM
Post #8



Group Icon


Type: Designer
Alignment: Neutral Good




Thanks for the tutorial Ak47lol, this will very helpful to me....
I always wonder how you make the animated water that look so beautiful ^^
Awesome =3


--------------------

Spoiler:
I support :






Go to the top of the page
 
+Quote Post
   
Celianna
post Aug 4 2011, 01:58 AM
Post #9



Group Icon


Type: Artist
Alignment: Chaotic Evil




If it were me, I'd just recommend actually using the animated water that is my huge tileset (it's in the temple tiles). It's a transparent water-tile with 3 frames, you can put it on top of any blue watertile, and it acts a lot more natural than using the filter effect in Photoshop. I personally think this effect only works with non-detailed water, with detailed water like that, the water has to actually move around, not just ripple. But, it's nice alternate method.

Just a tip; next time you make a tutorial ... put everything in one video.
Go to the top of the page
 
+Quote Post
   
ak47lol
post Aug 4 2011, 01:02 PM
Post #10



Group Icon


Type: Designer
Alignment: Chaotic Evil




Thanks guys, I'm glad it helps. smile.gif

@Celianna: I tested your method, that works too, instead of using the filter effect you can use the water tile animations instead, and add a shadow yourself.
Like I said, there are many methods of doing this, so I urge people to experiment and find something they are most comfortable with.

Also here is a very quick edit with a little "splash" effect around the edges of the water, which makes the water look more like it is moving.

Video

Compared to without it


That was a very quick and simple edit, I'm sure you can get it looking alot better if you spend a little more time on it.
I will show how to do this a bit later on, thanks to Celianna for bringing this to my attention.

Also thanks for that tip, that would have saved me alot of time instead of uploading like 20 videos. smile.gif

This post has been edited by ak47lol: Aug 4 2011, 02:12 PM


--------------------





Go to the top of the page
 
+Quote Post
   
Vyora
post Aug 5 2011, 02:00 PM
Post #11



Group Icon


Type: Spriter
Alignment: Unaligned




It looks really great ak47lol! biggrin.gif
I am definitely using this in my game, it looks beautiful ~
Hope you make the "going under waterfall" tutorial for us soon, would be really useful smile.gif
Thank you so much for this ;-)
Go to the top of the page
 
+Quote Post
   
ak47lol
post Aug 7 2011, 09:03 PM
Post #12



Group Icon


Type: Designer
Alignment: Chaotic Evil




@Vyora: You're welcome, hopefully soon I'll be able to do the waterfall part. smile.gif

A quick example of using cliff walls instead of pond border.







This post has been edited by ak47lol: Aug 15 2011, 05:52 PM


--------------------





Go to the top of the page
 
+Quote Post
   
JaydenTMusic
post Aug 8 2011, 05:48 PM
Post #13



Group Icon


Type: Designer
Alignment: Chaotic Good




Where is Modern Algebra's script? I can't find it...


--------------------

Why do you care about what I sponser hmm? o.o
Spoiler:



Go to the top of the page
 
+Quote Post
   
ak47lol
post Aug 8 2011, 06:40 PM
Post #14



Group Icon


Type: Designer
Alignment: Chaotic Evil




@JaydenTmusic:
You can search for it in google or at rmrk.net


--------------------





Go to the top of the page
 
+Quote Post
   
Kaze`
post Aug 11 2011, 12:10 AM
Post #15


// In your comment line.
Group Icon


Type: Designer
Alignment: Lawful Neutral




Amazing tutorial, this got me into parallax mapping, where can I find the trees you use on your map though?

My first attempt at parallaxing a map ever I think it turned out pretty decent considering i've never tried this before.


This post has been edited by Kaze`: Aug 16 2011, 01:54 AM
Go to the top of the page
 
+Quote Post
   
ak47lol
post Aug 16 2011, 08:14 PM
Post #16



Group Icon


Type: Designer
Alignment: Chaotic Evil




@Kaze`: Great job for your first try!
You could erase the outside border with the splatter brush a little more so it seems a bit more natural.
Them trees were edits/recolors of Hanzo Kimura's trees or BenBen trees.

This post has been edited by ak47lol: Aug 16 2011, 08:20 PM


--------------------





Go to the top of the page
 
+Quote Post
   
Kaze`
post Aug 16 2011, 08:28 PM
Post #17


// In your comment line.
Group Icon


Type: Designer
Alignment: Lawful Neutral




I shall definitely try that ak47! Thanks. smile.gif

Could you link or send me the trees by any chance? I can't find them anywhere. ;__;
Go to the top of the page
 
+Quote Post
   
Mr. Bubble
post Aug 17 2011, 01:01 AM
Post #18



Group Icon


Type: Undisclosed
Alignment: Unaligned




ak47, got any tips on how to make distinguishable depths in the water? Such as a beach where it's lighter near the shore and gets darker the farther you go out.

I think Kaze's picture is a good example of the awkwardness of only one tone of depth. (not to say it isn't a good use of photoshop water) ;p


--------------------
I no longer support Tankentai.
Go to the top of the page
 
+Quote Post
   
Kaze`
post Aug 17 2011, 02:24 AM
Post #19


// In your comment line.
Group Icon


Type: Designer
Alignment: Lawful Neutral




You could try using some sort of ground or deep water layer under the water then put another water layer over it with the opacity jacked way down bubble, in my head this works but i'm half awake right now so i'm too lazy to try it. xD
Go to the top of the page
 
+Quote Post
   
ak47lol
post Aug 17 2011, 04:56 AM
Post #20



Group Icon


Type: Designer
Alignment: Chaotic Evil




Sorry for the late response, wasn't at home.

@Kaze`: You can find the orignial trees in the resource section on this site, I think.

@Mr. Bubble:
Thank you for bringing this up, I never thought of that. smile.gif
There is one very quick and easy method of doing this, as follows...



-Make a new layer above the Water animation frames.
-Select the white color.
-Select the soft rounded brush tool.
-Brush along the border of the pool.
-Once done turn the opacity of the layer down to like 25% or whatever you like.
-Thats it, just re-save your animation frames again with this new layer aswell.

Example Screen


Example Video


Note: It doesn't suit this map very well because it's just a small pond, but it should suit Kaze's map quite well.

Again, this was just a quick solution, there are probably better ways of doing this, but hopefully it does the job.

Another way would be to actually map the underwater level of the pool.

This post has been edited by ak47lol: Aug 17 2011, 01:20 PM


--------------------





Go to the top of the page
 
+Quote Post
   

2 Pages V   1 2 >
Reply to this topicStart new topic
2 User(s) are reading this topic (1 Guests and 0 Anonymous Users)
1 Members: kuz

 

Lo-Fi Version Time is now: 20th April 2014 - 07:51 AM

RPGMakerVX.net is an Privacy Policy, Legal.