Spine four--erect bones with Spine, create animations

This page provides a simple overview of how to erect bones with Spine and create animations.

Spine is not limited to character animations, but character animations are the most common and best examples. Instead of a complete picture, the characters in the Spine slice each part into a series of small plots. For example: Head, torso, arms and legs. These small images are attached to the bones and are then free to set the character action with the bones. These slices produce smooth animations as the bones move. assembly Modes Setup mode

Use Spine to start with assembly mode, create bones in this mode, attach slices. In the upper-left corner of the edit area, Setup (assembly) or animate (animation) is shown to indicate the current mode and can be toggled by clicking.

sliced Images

The Images node in the hierarchy tree defines the image where Spine will find the skeleton for you. The path to the picture uses the relative path of the current project by default. Absolute paths are also supported. When the settings are complete, the pictures under the path are loaded into the picture Images node.

Spine real-time monitor the path of the picture, if the picture changes, immediately updated to the project. reference picture Template image

By using a full character picture as a reference, you can create bones and place images more easily and accurately. Here's how: Drag the template image from the Images node to the edit area, which is appended to the root bone point. The properties panel at the bottom of the hierarchy tree checks the background Background, which is set to the background and is not selectable or output.

You can change the color of the reference image to make it easier to identify. role slicing Character Images

Under the Images node, click the slice, then SHIFT + left or CTRL + to select all the other slices. Drag and drop them into the edit area, and Spine will create slice slots for them slots and put them all under root bone points.

Cross-position all limb slices against the reference image.

Slices are not attached directly to the bone, but are attached to a slice slot, which is attached to the bone. You can place multiple slices in a slice slot, but only one at a time. Slice slots provide more control over the drawing order of complex bones.

Drag in the Draw order node of the hierarchy tree to change the drawing sequence. The slice slots above the list appear in front, and the slots below are displayed behind. You can also use the + or-number keys to adjust the order, and hold down shift to move 5 units at a time.

When the reference graph is exhausted, you can click the display point in the hierarchy tree to hide it.

Photoshop

If you are using Photoshop, you can use the "LAYERSTOPNG.JSX" PS script provided by Spine when you erect bones. SCRIPTS/PHOTOSHOP/LAYERSTOPNG.JSX can be found in the Spine installation directory. This script can export the JSON files of the layer as PNG files and Spine. Click the Spine flag in the upper-left corner of the Spine and Import Data, Skeleton. The imported skeleton contains a bone point and all the pictures, the positions of these pictures and the display drawing order are all one to the layers in PS. The only job left for you is to create bones. This will be described in the following.

Another productivity-boosting solution is to use Adobe Generator. It allows PNG files to be synchronized with the PSD, and my mom will never have to worry about my manual mapping of tens of thousands of images. The Spine is also the PNG in the real-time synchronization folder, which is equivalent to Spine in the slice footage can be synchronized with the PSD. Creating Bones Creating Bones

When you create a new bone using the Create tool, you first select a bone as its parent, and then drag and drop to create a new bone.

When creating a new bone, press SHIFT (without pressing and holding) to select the picture under the cursor. When a new bone is dragged out, the selected picture becomes a child of the new bone.

Using this feature to create bones can be more efficient because you create new bones at the same time and change the parent of the picture.

Finally you might want to change the parent of a bone, slot, picture, or something else. Here's how: Select the object that you want to change the parent to, press the P key or the Set parent button, and then select the new parent in the hierarchy tree. If the skeleton is present, it may be more convenient to edit the area than to select it in the hierarchy tree.

To change the length of the bone, select any of the transform Tools Rotate, Translate, or scale. Then drag the end of the bone. In addition, the bone length can also be adjusted in the properties panel below the hierarchy tree. If the bone length is 0, it will be displayed as a special icon in the edit area. And in other places it's no different than any other bone.

Bones can set colors in the properties panel at the bottom of the hierarchy tree. This makes it easy to differentiate between different bones.

The image and Bone buttons in the compensation panel are used to adjust the bones but keep its sub-objects, such as bones and pictures attached to it, unaffected.

Don't change the way you've created your bones, use the Create tool to select the bones you want to adjust, hold down the ALT key, and then click Drag. This allows the bones to be redrawn in the new position without affecting its sub-objects. animated modes animate mode

Click Setup in the upper-left corner of the edit area to switch to animation mode.

In animation mode, the hierarchy tree displays the animated animations node, which contains all the animations that can be edited and viewed.

Pose with bones and set keyframes to create animations. When the animation plays, the bones automatically add intermediate frames between keyframes to achieve smooth motion. Photo Sheet Dopesheet

The Dopesheet button can be clicked to expand the dope sheet, which provides a more detailed keyframe view. You can drag keyframes to adjust the animation in the dope sheet.

Set Keyframe Setting Keyframes

Usually the first keyframe is set on 0 frames. Set keyframes by clicking the keyframe icon after the shift, zoom, rotate (Translate, scale, and Rotate) tool. Green indicates that no keyframes are currently present, and yellow indicates that the value has changed, but no keyframes have been added, and red indicates that the keyframe has been added.

Hotkey K can set keyframes for all changed values. Hotkey L can set keyframes for the current activation tool. If the AutoKey button is pressed, all changed values are automatically set as keyframes.

Then, on the timeline, you'll be on the next position, adjust the bone pose, and add keyframes. Click and drag the timeline to see the smooth skeletal animations.

Animation Workflow Animation Workflow

The common animation workflow, first K out the key pose and then back to refine the action. Click the Playback button above the timeline to activate the "Step stepped" button in the open panel to achieve a critical pose preview.

It can disable tweened frames, making it easier to observe critical pose. Once all the big moves have been created, turn off stepped and add more keys to optimize over-effects. Curve Editor Graph

Curve Graph button to expand the Curve editor. Select a keyframe in the dope sheet, where it shows the interpolation curve between it and the next frame.

By clicking on the Bezier Bezier Curve curve icon to start the nonlinear interpolation, it is crucial to have a vivid animation of K.

Drag the Bezier handle in the Curve editor to change the interpolation. The X-axis represents the time between the current frame and the next frame, and the Y-axis represents the value.

"Turn from" http://zh.esotericsoftware.com/spine-quickstart#Character-Images