# Best way to export a sprite sheet from p5.js animation frames?

**URL:** <https://discourse.processing.org/t/best-way-to-export-a-sprite-sheet-from-p5-js-animation-frames/49597>\
**Category:** Coding Questions\
**Created:** [October 6, 2026, 9:28am UTC](https://discourse.processing.org/t/best-way-to-export-a-sprite-sheet-from-p5-js-animation-frames/49597 "2026-10-06T09:28:30Z")\
**Posts on this page:** 4\
**Page:** 1

<div class="post-metadata">

**Author:** ![lovelycraftguides](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/lovelycraftguides/32/22207_2.png) [@lovelycraftguides](https://discourse.processing.org/u/lovelycraftguides)\
**Post date:** [October 6, 2026, 9:28am UTC](https://discourse.processing.org/t/best-way-to-export-a-sprite-sheet-from-p5-js-animation-frames/49597/1 "2026-10-06T09:28:30Z")

</div>

Hi everyone, I’m learning p5.js and building a small 2D game with animated characters. I have the character frames drawn across multiple draw() frames, and I’d like to export them as a single sprite sheet PNG I can reuse elsewhere. I tried using saveFrames() and stitching the images manually, but it feels clunky once you have dozens of frames. Is there a recommended approach or library for capturing frames and packing them into a sprite sheet grid directly from a sketch? Any examples or tips would be much appreciated. Thanks!

---

<div class="post-metadata">

**Author:** ![Chrisir](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/chrisir/32/45_2.png) [@Chrisir](https://discourse.processing.org/u/Chrisir)\
**Post date:** [October 6, 2026, 11:57am UTC](https://discourse.processing.org/t/best-way-to-export-a-sprite-sheet-from-p5-js-animation-frames/49597/2 "2026-10-06T11:57:16Z")

</div>

Hello!

And welcome to the forum, great to have you here!

I think the easiest is to collect the images with get() in an ArrayList.

Then make a sprite sheet from the list.

Here is an example.

It grabs the whole screen, you should just grab the necessary area, using `get()`.

You have to adjust the numbers I use; I use `resize(100,0)`, you probably don’t want to use `resize()` at all. My spread sheet is 3 images wide and 5 images high, I don’t know about yours (doesn’t matter as long you later read the spread sheet with the same 3 columns and 5 rows).

- mode 0 is your animation / collect images into `ArrayList`
- mode 1 is not necessary
- mode 2 is were the magic happens
- mode 3 shows the result, here you can say `result.save("...");` afaik,

Warm regards,

Chrisir

```auto

// https://discourse.processing.org/t/best-way-to-export-a-sprite-sheet-from-p5-js-animation-frames/49597

int mode = 0; // state
int x = 30;
ArrayList<PImage>list = new ArrayList();

PImage result = createImage(300, 500, RGB);

//-----------------------------------------------------------------------------------------------

void setup() {
  // Voller Bildschirm statt size()
  fullScreen();

  background(0) ;
}

void draw() {
  background(0) ;

  if (mode==0) {
    // collect list
    circle ( x, 290, 18);

    PImage img = get();
    img.resize(100, 0);
    list.add(img);
    x+=15;

    if (frameCount > 50)
      mode = 1;// go on
  }//if

  if (mode==1) {
    // show list / press any key 
    x=0;
    int y=0;
    int k=0;
    for (PImage img1 : list) {
      image(img1, x, y);
      text (k, x+20, y+20);
      x+=100;
      k++;
    }
    text ("Press any key.", 20, height-20);
    if (keyPressed) {
      mode=2;
    }
  }//if

  if (mode==2) {
    // make sprite sheet

    x=0;
    int y=0;
    int k=0;
    for (PImage img1 : list) {
      result.set( x, y, img1 );

      // next image pos to the right
      x+=100;

      // end of line?
      if ( x >= 300) {
        // next line
        x=0;
        y+=img1.height;
      }
      k++;
    }
    mode=3; // go on
  } //if

  if (mode==3) {
    // show sprite sheet 
    image (result, 0, 0);
  }
}//func
//

```

---

<div class="post-metadata">

**Author:** ![sableraph](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/sableraph/32/251_2.png) [@sableraph](https://discourse.processing.org/u/sableraph)\
**Post date:** [October 6, 2026, 12:26pm UTC](https://discourse.processing.org/t/best-way-to-export-a-sprite-sheet-from-p5-js-animation-frames/49597/3 "2026-10-06T12:26:57Z")

</div>

@lovelycraftguides, note that @Chrisir’s example above for Processing Java. The same general approach should still work in p5.js though, just using [p5.Image](https://p5js.org/reference/p5/p5.Image/), [p5.Graphics](https://p5js.org/reference/p5/p5.Graphics/), or [p5.Framebuffer](https://p5js.org/reference/p5/p5.Framebuffer/) instead.

---

<div class="post-metadata">

**Author:** ![Chrisir](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/chrisir/32/45_2.png) [@Chrisir](https://discourse.processing.org/u/Chrisir)\
**Post date:** [October 6, 2026, 1:29pm UTC](https://discourse.processing.org/t/best-way-to-export-a-sprite-sheet-from-p5-js-animation-frames/49597/4 "2026-10-06T13:29:04Z")

</div>

Thanks for pointing that out…! 🥰