Slices

A slice is a named rectangular region you overlay on the sprite to mark gameplay-relevant areas — hitboxes, hurtboxes, anchor points, attack ranges, item-pickup zones, 9-slice patches, etc. Each slice has multiple keys so its bounds can change at specific frames during an animation.

Slices export to a standard Aseprite-compatible JSON that engines like Phaser, Solar2D, and Godot importers consume directly.

---

Where to find it

• Tool: Y hotkey, or Tools panel → Crop icon.
• Panel: right panel → Slices tab.

---

Create your first slice

1. Press Y to activate the Slice tool (cursor switches to crosshair).
2. Click and drag on the canvas to define a rectangular region.
3. The slice is created with a default colour and named Slice 1. The Slices panel opens it for editing.
4. Click the swatch in the panel header (or rename inline) to give it a meaningful name like hitbox, hurtbox, attack-range.
5. Pick a colour — by default the editor cycles through 6 distinct colours for visual differentiation.

The slice rectangle is now visible on the canvas with a coloured outline + name label.

---

Anatomy of a slice

Field	What
Name	Identifies the slice in JSON exports (e.g. hitbox, pickup_zone). Single-click to rename.
Color	Hex — controls the canvas overlay outline + label background.
Data	Free-form metadata — typically a JSON string the consuming engine parses. e.g. {"type":"hitbox","damage":10}
Keys	Per-frame state. Each key holds bounds and an optional pivot.

---

Per-frame keys

The killer feature: slices can change bounds across animation frames.

• Each key has a frame index. The slice "applies" to a frame by inheriting the most recent key whose frame ≤ currentFrame.
• A slice with a single key at frame 0 has constant bounds across the whole timeline.
• A slice with keys at frames 3, 7, 10 changes bounds at those frames; frames in between inherit.

Example: punch attack hitbox

Imagine a 6-frame attack animation (frames 0–5):

Frame	Slice key?	Bounds
0	—	inherits from prior frame (no slice yet)
1	—	no slice yet
2	✅ key	(20,12, 8×4) — small box near the fist
3	✅ key	(28,12, 12×4) — extended forward, max reach
4	✅ key	(20,12, 4×4) — pulled back
5	—	inherits frame 4

In the Slices panel, with the punch slice active:

1. Go to frame 2, drag the desired bounds with the Slice tool → key 2 created.
2. Go to frame 3, drag again → key 3 created (overwrites bounds for frames 3+).
3. Repeat for frame 4.

The "Frame N" panel section shows whether the current frame has its own key (badge key), is inheriting an earlier key, or is off (no key yet).

Remove a key

Click Remove key in the editor to drop the active frame's key. The slice falls back to whatever earlier key it can resolve.

---

Pivots

Each key can carry an optional pivot — a point in canvas pixel coordinates, useful for sprite anchors (where the character's "feet" sit in the world, where a projectile spawns from a hand, etc.).

Toggle Pivot OFF / ON per key in the panel. When enabled, a target reticle renders at the pivot position on the canvas overlay. Move it by editing the X/Y numeric inputs in the key's expanded section.

9-slice center (for engine-side scaling)

Each key can also carry an optional 9-slice center — a smaller rectangle inside the slice's bounding box that defines the stretchable middle for 9-patch / NineSlice rendering in engines like Godot or Unity. Toggle Center OFF / ON per key in the panel, then set its x / y / w / h via the numeric inputs. The export embeds it as slices[].center in the JSON.

---

Custom data

The Custom data textarea is free-form. Whatever string you put there is exported verbatim in the JSON's slices[].data field.

Conventions used in the wild:

• Plain string: "hitbox"
• JSON object as string: "{\"damage\":10,\"knockback\":5}"
• Project-specific shorthand: "hitbox/heavy/blunt"

The editor doesn't validate — your engine consumes whatever you put.

---

Canvas overlay

Active slices render as coloured rectangles on the canvas:

• Solid outline for the active slice (the one selected in the panel).
• Dashed outline for non-active slices.
• Label chip at the top-left with the slice name.
• Pivot reticle if a pivot is set on the resolved key.

Slices are non-interactive on the canvas — to edit, select via the panel, then drag with the Slice tool.

---

Export

When you export a sprite sheet (File → Export → Sprite sheet), the JSON metadata includes:

{
  "frames": { ... },
  "meta": {
    "app": "motestack",
    "version": "0.5.0",
    "format": "RGBA8888",
    "frameTags": [...],
    "slices": [
      {
        "name": "hitbox",
        "color": "#ef4444",
        "data": "{\"damage\":10}",
        "keys": [
          {
            "frame": 2,
            "bounds": { "x": 20, "y": 12, "w": 8, "h": 4 },
            "pivot": { "x": 24, "y": 14 }
          },
          { "frame": 3, "bounds": { "x": 28, "y": 12, "w": 12, "h": 4 } },
          { "frame": 4, "bounds": { "x": 20, "y": 12, "w": 4, "h": 4 } }
        ]
      }
    ]
  }
}

Slice key frame indices are local to the exported subset (so when exporting a single sprite or animation, indices match the export's frame order, not the global frameOrder).

---

Engine consumption

Phaser 3

Phaser's loader.atlas('hero', 'hero.png', 'hero.json') consumes this layout natively. Frame tags become animation references; slices are accessible via the parsed JSON metadata for runtime collision logic.

Solar2D / Cocos / Godot

Each has its own importer; most read the same Aseprite Hash format used here. Refer to your engine's docs for slice-data conventions.

Custom engine

The JSON is a plain ASCII document — read it with whatever JSON parser you have, and walk meta.slices[].

---

Tips

• Match colour to category. Red for hitboxes, green for hurtboxes, blue for anchors — visual scanning becomes much faster.
• Use data for parametric metadata. Damage values, pickup tiers, AI hints — anything that doesn't fit in the bounds.
• Keep slice counts manageable. A complex sprite might have 5–10 slices; more than that and the canvas overlay gets crowded. Use layer groups to organise the actual pixels and treat slices as the gameplay-relevant subset.
• One slice per concept. Don't reuse a single slice for "hitbox" and "blocked-zone" — make two slices with separate keys.

---

Related

• Frame tags — name time ranges of the timeline (slices name spatial regions of frames)
• Sprite sheet export — where slices land in the JSON
• Frames & timeline