# SpriteDX - Representing Stage 3 in Pipeline.json

Yesterday, right before sleep, I played with SpriteDX with my daughter a bit and it was kinda rewarding to see things coming along. The generation of reference character was being done consistently and animation sequences were somewhat consistent as well. It was the kind of the magical experience I was looking for.

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1758034948179/25a4f057-d369-4a61-b52d-6e02187cfeb7.png align="center")

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1758034987601/b1cc6748-0505-4de6-a420-b21fdb8f3a53.png align="center")

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1758035123518/004027d3-7506-473b-a5a7-37bf5c1bfd55.png align="center")

Today’s task is to move on to representing **Stage 3** in the pipeline.json. Stage 3 is rather simple, it just receives an animated WEBP clip and outputs N shorter clips.

## Requirements

Requirement is that we need to split the clips into shots defined in the `animate.shots` array.

```json
[
  { "id": "greet", "prompt": "Intro: Camera static full body shot and pixel art character says “hi.”", "loop": false },
  { "id": "idle", "prompt": "Idle Loop: Camera static full body shot and the pixel art character is facing slightly right (+x) looking straight right (+x) and shows sprite animation loop for “idle” state, breathing in and breathing out, on a pure white background.", "loop": true },
  { "id": "run", "prompt": "Run Cycle (in-place, +x): Camera LOCKED on the pixel art character running in positive x direction, and character starts showing sprite animation loop for “run” state on a pure white background.", "loop": true }
]
```

We then assign each shot an `id`, so in the future we can reference the clip with a stable identifier. We will use `clip_${id}.webp` as file name. For example, for above clips:

* `clip_greet.webp`
    
* `clip_idle.webp`
    
* `clip_run.webp`
    

## ComfyUI Workflow

Here is what we have currently.

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1758036081686/54844f42-aa21-43dd-b78b-feb6bf7705b4.png align="center")

Right now it cuts the shots and creates three shots all with the same file name prefix.

Goal is to save each of these clips with the proper file names.

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1758043144663/1574a66d-55c2-4be7-98ad-493e886fc24a.png align="center")

To feed the the shot ids into the `Split String` node, we create a computed property:

```json
"shotIds": {
  "type": "string",
  "computed": {
    "sandbox": "quickjs",
    "with": { "shots": "..animate.shots" },
    "script": "shots.map((shot) => `clip_${shot.id}`).join(',')"
  },
  "mapTo": "75.inputs.STRING"
}
```

---

## Collecting Outputs

ComfyUI now generates 3 files in following format:

* `greet_00001_.webp`
    
* `idle_00001_.webp`
    
* `run_00001_.webp`
    

We need a way to rewrite this to more friendly url. To support a rewrite rule, let’s implement a rewrite rule structure in stage outputs.

```json
"outputs": {
  "clips": {
    "type": "array",
    "items": { "type": "image" },
    "mapToFile": "*.webp",
    "saveAs": {
      "match": "^(.*)_(\\d+)_\\.webp$",
      "replace": "$1.webp",
      "conflict": "skip"
    }
  }
}
```

* `mapToFile` is preexisting and is a glob pattern to collect the output image files.
    
* Then, we have `saveAs` which used to be simple string value. We have expanded it to be an object defining following properties:
    
    * `match`: Regex pattern to match part of string.
        
    * `replace`: replacement string.
        
    * `conflict`: Conflict resolution options. It is either `skip`, `version` or `overwrite`.
        

---

With that Stage 3 is completed. It is generating the right clips with proper file names.

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1758049197797/aff22b83-dae3-4cbc-9260-4bec0db4643a.png align="center")

---

## Next Steps

This will have to do for this week. I’m volunteering for a conference and I also need to catch up to the course work this week. So, probably best that I only start on the Stage 4 once I have a handle on other deliverables.

— Sprited Dev 🌱