Choose an article

Basic Editing

Slots, Image Binding, and Draw Order

Understand image resources, slots, and attachments, then bind, move, hide, and reorder them.

BeginnerAbout 15 minFor Editor v1.0 · Tutorial updated Oct 26, 2026
Download the sample PSD

After this article

Make images follow the correct bones and diagnose visibility separately from occlusion.

01

Resources, slots, and attachments are different layers

Bone
└─ Slot (attachment container and draw-order unit)
   └─ Image attachment (references an image resource)
  • The Images panel is a resource library. An asset there is not necessarily part of the character.
  • A slot attaches its attachments to a bone and participates in draw order.
  • One slot can contain multiple attachment candidates, but only the active one is displayed.
Use the hierarchy to verify actual binding rather than checking only the resource panel.
02

Bind an image to a bone or slot

  1. 1

    Select the correct resource

    Expand default in Images and locate the slice. Compare its thumbnail and name to avoid mixing up the two sides.

  2. 2

    Drag to a bone or existing slot

    Drag the image resource onto the intended bone or slot. If the bone has no slot yet, the editor asks you to confirm a new slot name.

    Expected resultThe slot and image attachment appear in the hierarchy and the image is visible on the canvas.

    A finished binding should have this structure. When a new slot is needed, the editor asks for its name during the drag operation.
  3. 3

    Check following and active state

    Move the bone slightly to confirm the image follows, then undo. If the slot has several attachments, verify which candidate is active.

    Expected resultThe image follows the bone and displays the intended attachment.

03

Handle occlusion and visibility separately

  1. 1

    Adjust draw order

    Expand Draw Order on the right and drag the target slot to the appropriate position. This changes image ordering, not bone parenting.

    Expected resultCanvas occlusion updates immediately while the skeleton stays unchanged.

    Find the target slot here and drag it to adjust occlusion; this is the operation location, not a drag result.
  2. 2

    Distinguish three kinds of visibility

    Check node visibility, the canvas image display toggle, and the active attachment in the slot. Press 1 to toggle images on the main canvas.

    Expected resultYou can tell whether an invisible image is caused by a hidden node, a canvas toggle, or attachment selection.

  3. 3

    Check occlusion during playback

    If the animation contains draw-order keys, inspect the order at different frames rather than fixing only frame 0.

    Expected resultKey poses and loop seams have no obvious occlusion errors.