This tutorial will explain one method of animating water and creating custom shape water beds for parallax mappers, using photoshop.
EXAMPLES
Footage Taken From
Amulet of Athos: Legend of the Sarian Knights
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.
NOTE:
Due to the media limit here, I can't embed all the videos or even link them. So you'll have to copy and paste each video link (removing the . before it) in to a new browser. For a more user friendly version with embeded videos you can find this tutorial on rpgmakervx.net here.
This is quite a long tutorial, so please make sure you have plenty of time.
STEP 1 - Starting up
Video:
.http://www.youtube.com/watch?v=VjjzjnZcueA
- 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.
Video:
.http://www.youtube.com/watch?v=cbVeapwKA2A
- 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
Video:
.http://www.youtube.com/watch?v=FladJvhH-gk
- 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.
Video:
.http://www.youtube.com/watch?v=arlehqyQsmk
- 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
Video:
.http://www.youtube.com/watch?v=9teQUZO7kTc
- 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.
- So now it should look like the video below.
Video:
.http://www.youtube.com/watch?v=PG4NJjTwILE
- 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
Video:
.http://www.youtube.com/watch?v=BXki6l2Ubhk
- 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.
Video:
.http://www.youtube.com/watch?v=vngmXc1K8pM
- 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
Video:
.http://www.youtube.com/watch?v=Col2M6tqTgg
- 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!
sucks embeded.Video:
.http://www.youtube.com/watch?v=xEGAd6hEBiY
- Ok, lets compare it to the default RTP water.
Video:
.http://www.youtube.com/watch?v=Odxc3GXMBkU
- Don't know why I showed you that.
Video:
.http://www.youtube.com/watch?v=xdqU527N4318
- 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!
Video:
.http://www.youtube.com/watch?v=zOM2-PpFG_E
- 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
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.
Video:
.http://www.youtube.com/watch?v=P_oXCtVmPt4
- Another water feature.
Video:
.http://www.youtube.com/watch?v=6qVzNMay7FM
- 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.
Video:
.http://www.youtube.com/watch?v=kkWCLA8SeoM
- 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.
Video:
.http://www.youtube.com/watch?v=jzb3NfpF-7A
- 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.
Video:
.http://www.youtube.com/watch?v=rwuyN_b6eSI
- It works!
- You can even animate the features aswell using the same method, for exmaple a fountain, but i'll leave that to you.
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.
- In the end It could look something like this.
- Please watch on youtube
Video:
.http://www.youtube.com/watch?v=3Ywo6E9yAG0
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:
.http://www.youtube.com/watch?v=_NWh5qtXKxw
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.
Video:
.http://www.youtube.com/watch?v=y0bzupOdJ4A
-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
Video:
.http://www.youtube.com/watch?v=fKFx9Qkkgvw
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.
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
Spoiler
Edited by AK47, 13 April 2012 - 10:35 AM.
)
