Loading art assets...

1. Rig Character

Select a Body Type Preset, then use the tools and controls in the right panel to position, rotate, scale, and set pivots for each part. Hold Shift while scaling corners for uniform scale. Use the Zoom slider to magnify the canvas. Switch to the 'Upload Assets' tab to change artwork.

History:
Tool:
Layer Order:
Canvas Zoom:
1.50x

2. Upload Assets

Choose the source for each body part. Check "Fit Uploaded/Selected Art" to automatically scale new art to the size of the current art or placeholder. Use "Auto-load" options to quickly populate related limb sections.

Head
Head Thumbnail
Neck
Neck Thumbnail
Chest (Upper)
Chest Thumbnail
Torso
Torso Thumbnail
L. Upper Arm
L. Upper Arm Thumb
R. Upper Arm
R. Upper Arm Thumb
L. Lower Arm
L. Lower Arm Thumb
R. Lower Arm
R. Lower Arm Thumb
L. Hand
L. Hand Thumbnail
R. Hand
R. Hand Thumbnail
L. Thigh
L. Thigh Thumb
R. Thigh
R. Thigh Thumb
L. Lower Leg
L. Lower Leg Thumb
R. Lower Leg
R. Lower Leg Thumb
L. Foot
L. Foot Thumbnail
R. Foot
R. Foot Thumbnail

3. Preview & Adjust Animation

Frame: 0/16 Zoom:

Clears any frame-by-frame adjustments made in the Finetune tab for the current animation settings.

History:

Animation Mode

Animation Settings

Shared Controls

1.0x 1.0x 0 deg 0.2x 0 deg

Prebuilt Styles

4. Finetune Animation Frame-by-Frame

Select a frame using the controls below. Click on a part in the canvas to select it for this specific frame. Use the tools to adjust its position, rotation, or scale. Changes only affect the selected frame. Use the 'Apply To...' buttons to propagate a manual input change to other frames.

Frame: 0/16

Export Queue Actions

History:
Tool:
Onion Skin:

5. Export Animations

Export Current Animation

This will export the animation currently configured in the "Animation Preview" and "Finetune" tabs using the settings below.

Animation Export Queue

Manage and export previously saved animation configurations. Each will use the export settings defined in the "Export Current Animation" section above when its "Download" button is clicked.

6. Help & User Guide

Welcome to Loop Animator! This guide will help you create 2D character animations.

Overview

Loop Animator enables you to rig 2D character art (divided into body parts and optional accessories), generate looping animations (walk, run, jump, idle, etc.), finetune these animations frame-by-frame, and export them as sprite sheets, image sequences, or GIFs.

The typical workflow follows the tabs from left to right: 1. Rigging2. Upload Assets3. Animation Preview4. Finetune (optional) → 5. Export.

1. Rigging Tab

Assemble your character, define part connections, pivots, and layering. This is also where you manage accessories.

  • Body Type Preset: Choose a base (e.g., Default, Heroic, Chibi). This sets initial part scales and positions.
  • Save Current as New Body Type: After adjusting your rig, click this to save the current configuration as a new, selectable Body Type Preset.
  • Canvas: The main interactive area.
    • Pan: Use the Middle Mouse Button to drag and pan the canvas view.
  • Tools (Right Sidebar):
    • Move : Click and drag a part to change its local position relative to its parent.
    • Rotate : Click and drag a part to rotate it around its pivot.
    • Scale : Drag handles on a selected part to resize. Hold Shift with corner handles for uniform scaling.
    • Pivot : Drag the red pivot circle on a selected part to change its rotation/scaling origin.
  • Layer Order: Select a part, then use "To Front", "Forward", "Backward", or "To Back" to adjust its drawing order (z-index).
  • Selected Part Dropdown: Directly select a body part or accessory.
  • Canvas Zoom: Magnify the rigging canvas.
  • Random Character: Loads a character with randomly selected library art.
  • Adjust Selected (Panel): Appears when a part is selected.
    • X/Y Offset, Rotation, Scale X/Y, Pivot X/Y: Numerical inputs for precise local transforms.
    • Lock Aspect Ratio: Maintains art's aspect ratio when scaling via inputs or Shift-dragging corners.
    • Mirror H: Horizontally flips the selected part's artwork. This is usually for body parts; accessories typically don't use this.
  • Accessories:
    • Accessories are added via the "Upload Assets" tab.
    • In the Rigging tab, select an accessory to position, rotate, and scale it relative to its parent part. Its parent can be changed in the Upload Assets tab.
  • Rig Export/Import:
    • Export Rig: Saves the current character rig structure (including hierarchy, part transforms, art sources, and accessories) to a JSON file (RigV1.1 format).
    • Import Rig: Loads a previously saved rig from a JSON file. This will attempt to apply the body type, recreate accessories, and set up all part transforms and art.
  • Shortcuts:
    • Arrow Keys: Nudge selected part (Move tool active). Shift + Arrow Keys for larger nudges.
    • Ctrl+Z / Cmd+Z: Undo last rigging action.
    • Ctrl+Y / Cmd+Y: Redo last rigging action.
  • Generate/Update Animation Button: When rigging is complete, click this. It enables the Animation, Finetune, and Export tabs and generates an initial animation based on default settings.

2. Upload Assets Tab

Manage artwork for body parts and accessories.

  • Add Accessory Button: Click to add a new accessory to your rig. You'll be prompted for a name. Accessories initially use a placeholder image and are parented to the Torso by default.
  • Part Slots: Each body part and accessory has its own slot.
    • Visibility Toggle / : Show or hide a part.
    • Use R./L. Art (Limbs): For limb pairs, use art from its opposite counterpart.
    • Thumbnail: Preview of the current art.
    • Source Options (Radio Buttons):
      • Placeholder: Default colored block.
      • Upload: Upload your image. Click "Choose File".
      • Select: If library assets are defined, an asset browser appears to choose art. This is view-aware (Side/Quarter view art if available).
    • Parent Part (Accessories Only): A dropdown appears in an accessory's slot allowing you to choose which body part it should be parented to. Changing the parent here will update its position in the Rigging tab to maintain its world position.
  • Global Asset Options:
    • Fit Uploaded/Selected Art...: Scales new art to match the size of what it's replacing.
      • Ignore Art Aspect Ratio...: If "Fit" is checked, this will stretch art to fill dimensions.
    • Auto-load matching upper/lower limb...: e.g., selecting `upperarmL1.png` tries to load `lowerarmL1.png`.
    • Auto-load same art for Left/Right limbs...: e.g., selecting `upperarmL1.png` tries to load `upperarmR1.png`.

3. Animation Preview Tab

Preview and adjust global animation parameters. You can also manage accessory-specific animations here.

  • Canvas & Playback Controls: Standard controls for previewing.
  • Navigation Buttons: Move between Rigging, Finetune, and Export tabs.
  • Animation Mode: Select Walk, Run, Jump, Fight, Fall, Idle, Kick, Die, Win, or Lose. Each has unique parameters.
  • Shared Controls: Cycle Duration, Animation Speed, Head Bob, Head Angle, Torso Swing, Chest Angle.
  • Mirror Left/Right Limb Settings: (Walk/Run Only) Synchronizes left/right limb parameter changes.
  • Mode Specific Parameters: Extensive sliders for each animation mode.
    • Walk/Run: Includes stride, arm swing, body tilt, limb bending, foot articulation, and parameters for dynamic head/chest turning during the cycle.
    • Jump: Controls height, hang time, anticipation, tuck, takeoff/landing, arm/leg motion, body rotation, and parameters for body part separation (stretch/squash effects) and X-axis shifts for body/chest.
    • Fight: Attack speed, stance, attacking limb, recovery, guard pose, torso twist, step amount, and specific angles for guard/attack/off-hand arms.
    • Fall: Duration, impact, spin, limb flail/stiffness, drift, shoulder drop, leg behavior (flail/tuck/straighten), final head angle, and body tumble.
    • Idle: Sway, breathing, arm relaxation, and options for arm movement (static, swing together, swing separately with individual offsets).
    • Kick: Kicking leg, height/reach, speed, body lean, arm balance, foot articulation, and head/chest turning.
    • Die: Collapse speed, direction, sprawl, final limb/head angles, leg follow factor, and independent chest/arm rotation controls over the dying animation.
    • Win: Arm raise, jump amount/type, speed, head tilt, arm variation, and parameters for overall body part separation and stretch effects.
    • Lose: Slump amount, drop speed, head drop, hand pose, shoulder slump, chest/arm sway, hold duration, and options for arm movement (slump/sway, static, custom angles).
  • Accessory Animation Settings (Appears if accessories exist):
    • Configure Animation for: Dropdown to select an accessory.
    • Enable Animation: Toggle procedural animation for the selected accessory.
    • Animation Type: Choose 'None', 'Rotate', 'Move (Local Offset)', or 'Swing (Pendulum)'.
    • Type-Specific Parameters: Sliders and inputs for start/end angles, speeds, amounts, phase offsets, etc., depending on the chosen animation type for the accessory.
  • Prebuilt Styles: Quick-start animation presets. Modifying any parameter switches the style to "Custom".
  • Add Current Animation to Export Queue: Saves the current complete animation setup (including base parameters and any finetune overrides) to the Export Queue on the Export Tab.
  • Clear All Finetune Overrides: Resets any frame-by-frame adjustments made in the Finetune tab for the current set of animation parameters.
  • Shortcuts:
    • Ctrl+Z / Cmd+Z: Undo last animation parameter change (including accessory animation params).
    • Ctrl+Y / Cmd+Y: Redo last animation parameter change.

4. Finetune Tab

Make precise adjustments to individual parts on specific frames. Ideal for polishing, fixing intersections, or adding secondary motion.

  • Canvas & Playback Controls: View and navigate frames. Click a part on the canvas to select it for the current frame.
  • Clear Overrides: Clear adjustments for the current frame or all frames.
  • Tool Selector: Move, Rotate, Scale tools for the selected part on the current frame only.
  • Selected Part Dropdown: Shows the part selected for finetuning on this frame.
  • Onion Skin: Display semi-transparent "ghosts" of previous/next frames to aid in animation. Control number of frames and opacity.
  • Adjust Selected (Panel): Numerical inputs for the selected part's local X, Y, Rotation, Scale X, Scale Y on the current frame.
    • Apply Buttons (All, <, >): After typing a new value, use these to propagate that value to the selected part across All frames, Previous frames, or Next frames.
  • Add This Animation to Export Queue: Similar to the button on the Animation tab, saves the current state (base parameters + all finetune overrides) to the Export Queue.
  • Shortcuts:
    • Ctrl+Z / Cmd+Z: Undo last finetune action.
    • Ctrl+Y / Cmd+Y: Redo last finetune action.

5. Export Tab

Generate your final animation output. You can export the currently active animation from the Preview/Finetune tabs, or manage a queue of saved animation configurations.

  • Export Current Animation (Top section):
    • Format: Sprite Sheet, Image Sequence (ZIP), or Animated GIF.
      • Sprite Sheet Options: Columns, Padding.
      • GIF Options: Quality (lower is better).
    • Character Resolution Scale: Multiplies rigged character size for output.
    • Export Canvas Size: Predefined or custom WxH for each frame.
    • Enlarge/Shrink to Best Fit Canvas: Scales animation to fit within the export canvas size.
    • Export Transparent Background: For PNGs and GIFs. Uses Animation tab BG color if unchecked.
    • Export Button: Exports the animation that is currently configured/previewed in the Animation and Finetune tabs.
  • Animation Export Queue (Bottom section):
    • Animations added from the "Animation Preview" or "Finetune" tabs appear here.
    • Export List: Saves the entire queue of animation settings to a JSON file.
    • Import List: Loads a previously saved queue from a JSON file, replacing the current queue.
    • Clear List: Empties the current queue.
    • Per-Animation Actions:
      • Restore: Loads this queued animation's settings back into the Animation and Finetune tabs.
      • Download: Exports *this specific queued animation* using the current UI settings in the "Export Current Animation" section (format, resolution, etc.).
      • Remove: Deletes this animation from the queue.
  • Download Link: Appears after an export process completes.

General Tips

  • Iterate: Don't aim for perfection on the first pass. Rig, get a basic animation, then refine. Use the Finetune tab for polish.
  • Pivot Points: Crucial for good rotation. For limbs, place pivots at joints (shoulder, elbow, knee, ankle, wrist).
  • Experiment: The best way to understand parameters is to adjust them and see the result.