Create an Animated 2D Water Tile Using Inkscape
Updated: Dec 18, 2018
This tutorial shows you how to use Inkscape to create an animated 2D water tile that you can use in your 2D side scrolling games. This tile can be duplicated many times to create a long continuous stream of moving water. This tutorial assumes that you know Inkscape at least at a basic level.
Here's what the water animation will look like:
There are four steps to creating this water tile. I will explain each step.
Step 1: Draw a stream of water and the clipping rectangle
The stream of water should be about two times the length of what you want the length of your final water tile to be. Now place a rectangle over the right end of the water stream. The right edge of the rectangle should be just a little to the left of the right edge of the water, and the top and bottom of the water should be inside the rectangle. The water encompassed by the rectangle will be the first frame of your water animation. At the end of this step you should have something like the image below. Note that I have the stroke(outline) enabled for the water now for the purpose of demonstration. You will be able to more easily see what I am doing with it enabled. However, you should remove the strokes at the end.
Step 2: Duplicate and shift right
Now select the water piece, duplicate it, and press "page down" so that the new copy of the water is under the clipping rectangle. Now move the new water piece to the right a little making sure that the bottom of this piece is in line with the previous water piece. You should have something like the image below. As you can see from the image, the rectangle so far encompasses the first two frames of the water animation.
Now duplicate the second water piece and press "page down" so this new piece is under the clipping rectangle. Now shift this piece to the right. You should have something like the image below. The clipping rectangle now encompasses the first three frames of the animation.
Repeat the above procedure about seven more times. If you choose to do that then you will have ten frames in your water animation and you should have something that looks like the image below. The rectangle now encompasses all ten frames of your water animation. Now we just need to clip the water pieces under the rectangle using the rectangle to get our ten animation frames for the water animation.
Step 3: Clip the water pieces using the rectangle
Select all the water pieces and the rectangle. Go to Object > Clip > Set. This will clip all the water pieces leaving you with the ten animation frames for your water animation. The first frame of the animation is on the very bottom and the last frame of the animation is on the very top. Remember this! After clipping you should have something like the image below.
Step 4: Match horizontally the start node with the end node
You have to match the start node and end node horizontally for each of the ten pieces to ensure a smooth transition from one water tile to the next if you are going to put water tiles next to each other.
For each piece in the stack of ten we created in step 3, select the piece, duplicate it, and put them side by side. Work on it one piece at a time. For each piece, you should have something like the image below. As you can see, if we are to put water tiles next to each other, we will not have a smooth transition between the tiles because we did not match the start node and end node horizontally:
If instead you do it right and match the start and end nodes horizontally , you will get this which is what we want:
Now keep the water piece that you adjusted and delete the other one. Now you have the tenth frame of the animation that has horizontally matching start and end nodes. No further work needs to be done for this animation frame.
Do this for the other nine animation frames. Starting with nine, then eight, seven, etc. Don't lose track of which frame each water piece belongs to. In the end you should have all ten frames of the animation (notice that i removed the strokes for each piece):
Step 5: Export
Now all that needs to be done is for you to select each piece and export it. Select the folder you want to export to, give the piece a name, and then export it. No need to mess with any other setting in the export window. I would call the first frame of the animation "water1", second frame, "water2", etc. Now that we have all ten of the image files that make up our water animation, we can go to unity, or whatever game engine/animation app that we use, to actually create the water animation.
If you feel like skipping all the work then feel free to download the water animation free at the Game Assets section of this website.