In this tutorial, we will go through the making of a nice animated clock. This is a pretty easy tutorial and it’s intended to get a first contact with Sprite Kinematics Workbench’s terminology.
Before we start Sprite Kinematics Workbench. The first thing we have to do is draw a basic draft of what we want to animate. (This draft should not take more then 5 seconds to draw)
The next step is to identify the motion points. An anchor is the point where one image joint with it’s parent image. (Don’t worry if you don’t understand, this should be getting clear when you start using Sprite Kinematics Workbench in step 2.1 )
Since the first version of Sprite Kinematics Workbench only allow motion transformation through combobox, we have to give name to all our anchor so they become easier to select and modify.
At this point, you should open GIMP or any other PIXEL drawing tool. And draw your images. Then you should pack them in a zip file using specific names for all components. Since this is not a drawing tutorial I will skip this part. The image to use are already provided in the ./images/ folder.
Oki we are now ready to start using Sprite Kinematics Workbench. You can Double-click the jar file or use any other well known method to start the application. When the application starts, it preload all zip that can be found in the ./images/ folder. It’s important to know that if you modify any of those file, you won’t see any difference until the next time you start Sprite Kinematics Workbench.
Oki now that we have the Workbench ready. Let’s create a new canvas.
File -> new
Then let’s create an animation to work with. Creating a new animation will Automatically copy the first frame of the first animation. If this is the first animation, a blanc frame will be shown.
Kinematics -> add
In the Dialog, enter the name of the animation in the ID field and click the “add animation” button.
For this tutorial we will use id = Hours
Now that we have an animation ready. We can add the Kinematics Sprite to animate. Keep in mind that a Sprite is a group of images, were each image is liken to one parent and many (or 0) childs.
The first step is to add a root anchor. Open the add dialog
Kinematics -> add
In the Dialog, enter the name of the root in the ID field and click the “add root” button.
For this tutorial we will use id = Clock
Do not close this dialog yet. We will add some more anchor. First we need the base anchor. Fill in the following informations and click the “add new leaf” button
Id: Base
Parent: Clock
Image: Clock
Then do the exact same thing with the following informations
Id: Needle
Parent: Base
Image: Needle
You can close the add dialog and take a look at the canvas. If you see the following image, you can move to the next section; otherwise try again from section 2.1.
The next step is to create the 12 different frames that will create the animation. We will do this by cloning (copying) 11 times the frame we just made.
Open the clone dialog
Kinematics -> clone
Then click 11 times on the “clone frame” button. After closing this dialog your canvas should look like this:
Then we can begin transformin the frames. Make sure the slider at the bottom of the canvas is referencing to the frame 0 then open the transform dialog
Kinematics -> transform.
We will now specify the position of the needle. Fill in the following information and take a look to the canvas. The needle should be facing “12” on the clock.
Select node to transform: Needle
Rotate: 180
Move to the next frame (frame 1) using the slider, reopen the transform dialog and fill in the following information
Select node to transform: Needle (might be called Needle_1 depending on the version)
Rotate: 210
I think you got it. Now complete the animation by filling in the following information for each frames
Frame | Node | Rotation |
0 | Needle | 180 (should be done already) |
1 | Needle | 210 (should be done already) |
2 | Needle | 240 |
3 | Needle | 270 |
4 | Needle | 300 |
5 | Needle | 330 |
6 | Needle | 0 |
7 | Needle | 30 |
8 | Needle | 60 |
9 | Needle | 90 |
10 | Needle | 120 |
11 | Needle | 150 |
Congratulation. The animation is done. You can now export your work to a png file and create a nice game out of is.
File -> save as png