The windmill projects show how to model isometric perspective with both Spine Essential and Spine Professional. The project illustrates how to perform isometric rotations, create a simple smoke effect, and how to add variation by duplicating elements and their animations.
The download for this project contains seven
.spine files, numbered in chronological order, allowing you to follow along with the video.
Each tree is composed of a slot representing its trunk (
tree2-trunk), and one bone for each bundle of leaves attached to a trunk's branches (
leaves8). Since we do not animate the tree trunks, their slots are direct children of the root bone, saving us two bones.
The bushes each consist of a single bone (
bush2), each with a single slot and attachment.
The flowers are a little more complex. They each consist of a hierarchy of bones and slots modeling the flower's shadow, front and back leaf at the bottom of the stem, the stem itself, and the flower petals at the top. The flower petals slot contains 3 different images from which we can select different petal shapes when customizing a duplicated flower. We also change slot colors to add additional variety.
The trees are animated by keying only the rotation of each bundle of leaves. The setup position is keyed at the start and at the end of the animation, with variations in between, forming a seamlessly looping animation.
The bushes are animated by keying only their shear property. This deforms the bushes while keeping them attached to the ground. Like the tree leaves, the shear value is keyed at the start and end of the animation to create a seamless loop, with variations in between.
With all basic keys set, the curves between keys were changed by selecting all keys and applying a curve in the Graph view. To make the animation slightly less synchronized, the Offset tool was used on groups of keys.
This rooster is a decoration on top of the house roof. It's made of metal, and can be shaken by the wind. The scene has an isometric view, so the rooster should rotate on the vertical axis adhering to the isometric perspective.
The rooster consists of a single bone with zero length and a slot containing a front view of the rooster as a region attachment.
The rooster is animated by keying the shear property on the Y axis. To create a seamless loop, the shear value is keyed in the first and last frame, with variations in between.
The rotating blades are the main focus of the composition. They consist of the blade base image
windmill-blades and two long wood parts forming the front of blades,
windmill-blades-wood-v. All images are prepared in a frontal view, but rotate in adherence to the isometric perspective of the scene.
We need two bones to achieve a correct isometric rotation: a bone that deforms the blades to match the isometric perspective
windmill-blades-pivot and a bone to actually perform the rotation,
Isometric perspective can be obtained by scaling an image by
0.86 and then applying a shear of
30°. This would be valid for a square, but since the blades are attached to a hexagon, we use a shear of
In Spine the children inherit the parent bone's transformation (unless you disable inheritance in the bone's properties). Applying a scale of
0.86 and shear of
20° to the parent bone will also apply that transformation to the children. We can therefore apply the isometric perspective transformation to the
windmill-blades-pivot parent bone and it will affect the bone's children.
To give the blades more depth, we separated the front and back into two bones,
windmill-blades-front, and slightly offset them.
To achieve a complete rotation in Spine, we key the rotation of a bone at the beginning and end of the animation to
0°. We then place two keyframes equally spaced in between, one at 1/3 and the other one at 2/3 of the animation duration. A complete spin takes
360°, so the rotation is incremented by
120° in each key frame.
The two bones
windmill-blades-front both rotate following this principle.
The depth effect of the blades was adjusted in
Setup mode with the help of the
The smoke comes out of the chimney and fades into the distance.
We reuse the image of a cloud across 3 bones,
smoke3, to create a little smoke trail.
The smoke movement is a combination of translation, rotation, scale, and color keys.
The smoke translates from the roof to the upper right, while rotating. It starts small and gets bigger as it moves up and to the right. It also changes its transparency when it appears, moves, and eventually disappears in a soft fade.
The animation was first created for a single smoke bone, then copied and offset. To make offsetting possible, the first and last frame must match.