What is a Bone object ?

A bone is the fundamental building block when doing inverse kinematics with the library FXUtil. A bone has a length and a joint around which it can be rotated. The end with the joint is called the head of the bone, the other one is called the tail.

Figure 1 shows a single bone, its head, tail, and length. The bone rotates around its joint.
In the library FXUtil, a bone is resembled by the class Bone. The minimum set of variables usually required to initialize a Bone object are currentAngle to setup the rotation and currentLength for the length of the bone. Code Sample 1 sets up a bone with a length of 50 and a rotation of 0, which means it will point horizontally to the right.

Assembling bones

Bones can be assembled to define the skeleton of an animated object. Two bones are linked by attaching the tail of one bone b1 with the head of another bone b2. Bone b1 is called the parent of bone b2, bone b2 is called a child of bone b1. Figure 2 shows two connected bones b1 and b2.

The class Bone offers two variables to define the structure. The variable parent stores the parent of a bone, the variable children is a sequence of all child-bones. To connect two bones, only one direction has to be set, the other is set automatically. In other words, to link the bones b1 and b2 from the example above, one can either add b2 to the children of b1:
or set the parent of b2:
The instance variable currentAngle defines the rotation between a bone and the extension of its parent bone. A value of 0 results in a straight line, a value of 180 results in the child bone overlapping its parent, but pointing in the opposite direction.

Although having parents and children imposes an order on the bones in a skeleton, it usually makes no difference, which bone is the parent and which is the child. There is just one exception, when angles are limited, which will be covered in part 2 of this tutorial.

By repeatedly linking heads and tails of Bone objects, it is possible to create a chain. This simple structure is used in the caterpillar sample. For more complex objects, this is not sufficient. As the variable children suggests, a Bone object can have more than one child bone, which allows to define a tree structure.

The bone at the top of the tree, which does not have a parent, is called the root bone. The root bone is treated a little different then other bones during initialization. The position of a bone is usually defined by the position of its parent and its rotation, which is measured relative to the parent's extension.

But for a root bone the position can be set by initializing currentHead. (Note: Setting currentHead for any other bone has no effect; the value is simply ignored.) The second difference is, that the instance variable currentAngle of a root bone defines its rotation in the overall scene. You can think of it as having a parent bone which points horizontally to the right.

Now we are able to define the structure of our dummy, as shown in Figure 3. The code to generate the skeleton of the dummy can be seen in Code Sample 2.

Attaching visual elements

Bones themselves are not visible. They are only defining the structure. The instance variable content, which is a sequence of javafx.scene.Node objects, can be used to attach visible elements to a bone.

The position and rotation of the attached Node objects is controlled by the underlying bone. The origin of the local coordinate system for all attached nodes is the head position of the bone. If the head position is moved, so are all nodes.

The rotation of a bone is also passed to the nodes. If the bone is not rotated at all and currentAngle has the value 0, it is pointing horizontally to the right.

In Code Sample 3 a bone is defined with two circles and an ellipse attached. In Figure 4 this bone is shown and animated. The attached nodes are moved and rotated according to the position of the bone.
Code Sample 4 shows the required changes define the appearance of our dummy by attaching circles and rectangles. The resulting dummy can be seen in Figure 5. In the picture, I added symbols for the bones to make them visible.

Note that none of the visual components are rotated themselves and all positions are local to the bone. The final positions and rotations in the scene are calculated from the positions and rotations of the bones only.

Adding everything to the scenegraph

Now there is just one final information missing to be able to render the dummy on the screen: the class Skeleton. The class Skeleton is the bridge between the scenegraph and the bones with the attached Node objects. It extends CustomNode and can therefore be added anywhere in a scenegraph. It can be translated, rotated, scaled and transformed like any other node in the scenegraph.

A Skeleton object and the bones of an animated object are linked by setting the instance variable skeleton of one bone. You will notice that the variable skeleton of all bones in the same structure will be updated to point to the same Skeleton object afterwards, because it is not possible that two bones in the same structure point to different Skeleton objects.

To see the result, download the full script. To compile the script, you need to add the library FXUtil to your classpath. You can download it from FXUtil.com. To add it to the classpath for example in a NetBeans project, open the Project Properties and add the jar-file in the section “Libraries”.

What's next?

The first part of this tutorial showed how to define the static structure – or skeleton – of an animated object and how to attach visible components. The second part will explain how this structure can be animated to create naturally looking animations.