Clock Tutorial (Very easy)

Introduction

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.

1. Preparations

1.1 Draft

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)

1.2 Anchors

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 )

1.3 Identifications

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.

1.4 Drawing and Packing

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.

2. Using Sprite Kinematics Workbench

2.1 Creating the first frame

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

2.2 Creating the anchor tree

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.

2.3 Transforming the frames

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

2.4 Saving the results

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