Export a single PNG, each layer is a row, each column is a frame

[hectormartinezdev]

Hello!

I find useful to have my sprites organized into one PNG, where each row is an animation and each column is a frame. In Aseprite is called "Split Layers" when you export an SpriteSheet.

Input:

Output:

What do you think? Would be a good addition to Pixelorama?

[chrishessler]

I've wanted to do exactly this. Has this feature been added yet?

[Indee11]

Recently did some animations for enemies and it's honestly a really big pain point in Pixelorama. There are a few ways to get this same effect, but they're all not ideal and have pretty bad drawbacks. It's honestly a big enough problem to make me consider using a different program, so I definitely think this would be a good addition.

[Raiguri]

But why you don't use tags for this?

[roninpawn]

Same thoughts here!

It's a natural way to organize your work for a character with multiple animations -- to pack those animation states onto multiple layers. When I tried to export to Spritesheet, I was missing the option to export row-for-layer / column-for-frame.

Then I noticed export by Tags was an option. And I assumed this was how I was meant to get there. So I looked to the documentation about tags, created one, and was able to use it to limit each animation by its own length within the grid of frames. (convenient) But when it came to export, Tags only seem to provide the option to export to a single row, by the length of the tag. And that is not the desired result.

What's wanted is to be able to export a whole spritesheet, with every single layer represented as its own row.
I don't believe this can be achieved with Tags alone.

I just did a simple mouse sprite that has static, walking, and running animations to it -- and all animations are of the same frame-count. It would be silly to break this up into three 7-pixel tall sheets. One sheet, with 3 rows, is vastly preferable. Lacking the wanted export option in Pixelorama, the way I got the desired result is by creating an "Export" layer, where I manually copied in each of the frames from each of the other layers, in order. Then I exported them with Orientation: Rows, and Columns set to match the number of frames in the animation.

That's not going to be a viable workflow on larger, more complex spritesheets. Any change to any frame requires figuring out which frame matches which in the export layer; then manually copying it in with fingers crossed you've picked the right frame.

This export options is sorely wanted.

[Variable-ind]

Tags only seem to provide the option to export to a single row, by the length of the tag. And that is not the desired result.

What's wanted is to be able to export a whole spritesheet, with every single layer represented as its own row.
I don't believe this can be achieved with Tags alone.

Hy @roninpawn 👋 this is totally possible through tags. I mean it's possible to make each tag it's own row or column in spritesheet

test-.2.mp4

[roninpawn]

The video you tried to attach is "corrupt," apparently.
But I went back into the export menu to try again to get 3 layers exported as 3 rows, since you linked a solution and...

...Still couldn't find a way to do it.

So if it is possible using tags... Boy is it all kinds of unintuitive! I tried flipping every switch in both Image and Spritesheet mode, including those in Advanced Options, and found nothing that will simply put each of the 3 layers onto their own row, in the same image.

I'll be happy to know how it's done! But I'll also probably still be left advocating for a simple, straightforward menu option to click. Because if a designer experienced in multiple graphics software suites can try to make it happen 3 times, and still not find it then the UX isn't quite right.

[Variable-ind]

In the export dialog, there is an Orientation parameter, set it to either tags by row, or tags by column.

[roninpawn]

This was the first setting I tried when I discovered Tags.

But the reason this isn't a solution, and doesn't answer needs, is that it requires the animations to not be organized by layer. Which is what everyone who has contributed to this thread has been describing and posting screenshots of.

Organizing complex, multi-state character animations on a single, run-on layer is not a good workflow and it is not a reasonable demand to make. This thread's OP provided a screenshot in which there are at least 7 different animations, each containing as many as 22 frames. Using tags, that would make for a potentially 154-frame layer, that the designer must now scroll back and forth, horizontally, to access and edit.

And If you want to compare frames from one animation with the next - for instance to try and match an animation cycle, so it can be switched in and out of as seamlessly as possible... Well, good luck with that. Your best bet will be to create a new layer, and paste in the animation cycle you want to compare, under the current one. (which is how you want to be working from the outset -- in layers) Then if you realize you want to make changes to the frames you copied in to the temporary layer... Well, make sure you copy those frames back to where they came from in the "master" layer. And don't copy over the wrong frame! Which is easy to do, when an animation is fluid, and only a few pixels change per frame.

This is what we're all talking about.

And it's why my own "solution" to this problem has been to work in layers, until I'm done, and only THEN arrange the results onto an Export layer, similar to what you show above. But this is tedious and error-prone. It requires you to either keep a mental model of which layers you've made changes to, or re-copy and re-paste all of them, before every single export; never making a mistake on which frames go where as you copy them around.

For want of a simple option that exports each visible layer as its own row, Pixelorama presently demands artists basically work as though there's no such thing as layers. It's the real world equivalent of trying to design and animate on a fully opaque surface, with no convenient way to compare whether you're still on-model - or in sync - with other animations for this character.

Tags - used as shown - are not a solution to the problem this thread describes.

[Variable-ind]

Using tags, that would make for a potentially 154-frame layer, that the designer must now scroll back and forth, horizontally, to access and edit.

The way pixelorama is designed, unfortunately the intended way would be the 154-frame layer (Layers are meant to be for blending, clipping masks, organizing background, head etc... sprites), and that was the alternative i was suggesting.
So to implement this (IN the core) we would have to account for all of that (not saying it's impossible, just hard)

And If you want to compare frames from one animation with the next - for instance to try and match an animation cycle, so it can be switched in and out of as seamlessly as possible... Well, good luck with that.

The silver lining is that is that i had already made an extension that does a similar thing (it saves each layer as it's own spritesheet as in video, just need to modify it so that it's combined as one spritesheet)
I'll try to post it here shortly, and if it's to your liking, i'll publish it to the Pixelorama's extension repository

The video you tried to attach is "corrupt," apparently.

Try opening it on computer (for me it shows as corrupt on mobile only)

test-4.mp4

[roninpawn]

Merging the outputs of that extension into a single file could work. Thanks for trying to provide a solution.

Considering the core implementation challenges you mention makes me wonder if the broader solution isn't to add one more 'vertical' container to Pixelorama's toolbag. I'm thinking how, in Gimp, changes to the blending method, and other pass-through FX only apply within their "Group." A lot of aspects of the compositing job are sort of trapped to only apply within the current folder-of-layers.

So, for Pixelorama, something like a 'Collection/Group' -- where multiple layers can be joined together, and any masks, FX, etc apply from the top to the bottom of that group, but not beyond it. A logical container like that might enable even more creative flexibility for artists to play with, while simultaneously providing a clean boundary for an Orientation>Group as row option on export.

Obviously a big idea. But I thought I'd throw it out there, in case it inspires a new direction down the line.

[Variable-ind]

Extension: Extract Me.zip

Here is the extension, After extracting, drag and drop it in Pixelorama and enable it from Edit > Prefferences > Extensions

This will expose a new export format called Separate sheet per layer

All this extension does is treat each layer as spritesheet (using export settings) and then stacking them vertically (they can be saved separately too through Advanced setings > Each layer as separate png file)

test-.3.mp4

[roninpawn]

That seems to do it.
And I can now ditch the 'Export' layer with its added complications.
Thanks!

[OverloadedOrama]

Should now be implemented by #1456