Windmill

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.

Video

The download for this project contains seven .spine files, numbered in chronological order, allowing you to follow along with the video.

Trees, bushes, and flowers

Setup

Each tree is composed of a slot representing its trunk (tree1-trunk and tree2-trunk), and one bone for each bundle of leaves attached to a trunk's branches (leaves to 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 (bush1 and 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.

Animation

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.

Rooster

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.

Setup

The rooster consists of a single bone with zero length and a slot containing a front view of the rooster as a region attachment.

Animation

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.

Windmill Blades

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-h and windmill-blades-wood-v. All images are prepared in a frontal view, but rotate in adherence to the isometric perspective of the scene.

Setup

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, windmill-blades-front (and windmill-blades-back).

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 20° instead.

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-back and windmill-blades-front, and slightly offset them.

Animation

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-back and windmill-blades-front both rotate following this principle.

The depth effect of the blades was adjusted in Setup mode with the help of the Preview view.

Smoke

The smoke comes out of the chimney and fades into the distance.

Setup

We reuse the image of a cloud across 3 bones, smoke to smoke3, to create a little smoke trail.

Animation

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.