Export Sprite Sheet for GUI/User Interface (Knob and Fader)

[andreyshinami]

I have a knob and a slider that I need to export as a sprite sheet, which is a single long PNG file containing multiple frames arranged sequentially.
Is there an easy way to do it?

Knob (40x40px) should be exported as a sequence of 127 frames in a long PNG (5080x40px), where the knob rotates from left to right.

Slider (20x60px) should be exported as a sequence of 127 frames in a long PNG (20x7620px), where the fader cap moves from bottom to top.

Another complication: For the knob, I could manually create a 5080x40px artboard and move/rotate it for each frame using CMD+J. However, the knob consists of multiple layers (shadows, light, base) that I don't want to rotate, and moving parts (arrow, body) that do need rotation. Unfortunately, CMD+J doesn’t allow me to copy the entire knob group and rotate only the moving parts within that group.

It seems like I manually have to create a very long Artboard, copy and arrange my knob 127 times while rotating slightly the layer I want to move. 
I realize that animation support isn't on Affinity's roadmap, but maybe this could potentially be introduced as an Export Persona feature, with a focus on "sprite sheet export" rather than "animation."

---
For those who encounter the same issue, I have a solution: there's a software called Knobman (it still works on both Mac and Windows, although it's an older app and likely not supported anymore). You can export your Affinity Designer layers, import them into Knobman as transparent images, and export your UI elements from there.

[GarryP]

If you want to export something it must exist in the document.

Because of this, if you want to export multiple versions of something you will need to create multiple versions of that thing.

It might be easy to create those multiple versions but we would need more information about what one version looks like and how it’s been created before we could offer advice.

If you can share the document which contains one version and tell us which parts need to rotate/move then we can experiment and maybe give some possible methods.

[thomaso]

19 hours ago, andreyshinami said:

However, the knob consists of multiple layers (shadows, light, base) that I don't want to rotate, and moving parts (arrow, body) that do need rotation. Unfortunately, CMD+J doesn’t allow me to copy the entire knob group and rotate only the moving parts within that group.

How about …

• Split the layers in two separate sets for CMD+J, one that rotates when moving and the other that moves only.

• Instead of separate layers for lighting you may consider Layer Effects, they do not get rotated with an object rotation but preserve the light direction relative to the document.

[andreyshinami]

@GarryP

I can't send the actual knob and fader I have, but I've prepared an example here. (I know it looks tasteless, but it illustrates the task well)

The export should be a single long PNG file (17920x140, because of the 128 frames), where the layers named "move it" should rotate from the current initial left position to the right position.

MyFullKnobExample.afdesign

[GarryP]

Thanks for the document.

I was concerned that the set-up might be more complex that I was hoping, and it is unfortunately.

The problem being that you need to rotate two different layers, which are each clipped inside other (different) layers, and rotate them both at the same time by the same amount.

I can’t think of a quick/easy way to do what you want at the moment but someone else might.

Exporting to use the design in an animation application might be the best solution.

[andreyshinami]

Thank you for your answer!

[thomaso]

10 minutes ago, GarryP said:

rotate two different layers, which are each clipped inside other (different) layers

Doesn't it work if you move "Some light" above its grandparent "Big Circle" to exclude it from rotation and then rotate "Big Circle".

[andreyshinami]

1 minute ago, thomaso said:

Doesn't it work if you move "Some light" above its grandparent "Big Circle" to exclude it from rotation and then rotate "Big Circle".

Yeah, that's the point. My original knob is event more complex. Otherwise, splitting the layers and using CMD+J would work.

[thomaso]

2 minutes ago, andreyshinami said:

Otherwise, splitting the layers and using CMD+J would work.

If simple splitting won't work you might try additional layer copies, for instance a copy of the greenish ring for the clipped "Arrow", and move them both + the pink "Arrow" above "Big Circle" (or "My FullKnob_example") to rotate only these layers.

[GarryP]

Extracting “Some Light” and “Big Circle” separately helps a bit.

I managed to get what you can see in my attached image using the Move Data Entry functionality but the ‘white zing’ of the dial rotates, so that’s not great.

[thomaso]

12 minutes ago, GarryP said:

but the ‘white zing’ of the dial rotates, so that’s not great.

Good point. If it gets removed from "Small Circle" and created as a separate circle with white/transparent gradient fill it can be excluded from rotation together with "Some Light" as a "Reflexion" Group.

[GarryP]

After some ‘jiggery pokery’ I managed to get what you can see in my attached image and documents.

I rearranged some layers, duplicated some, swapped things around, converted a circle into a donut, and repeatedly used Moved Data Entry.

I have no idea how well this might work with the actual design.

 

RejiggeredKnob.afdesign

MyFullKnobExample-Rejiggered.afdesign

[andreyshinami]

Thank you! Nice idea! It may or may not work depending on the complexity of a knob, but this is something I will consider when building GUI elements in Affinity Designer.
For complex things, I'd need to export layers into another app or make repeated tweaks manually. I hope someday there will be an "export sprite sheet" functionality that allows us to set the initial and end points of a certain element.

Thanks a lot for helping out. 

 

[GarryP]

You're welcome.