Creating Sprite sheets for games in Affinity Designer Part One

My hamfisted attempts at creating sprites completely in Affinity.

If you are looking to create sprite sheets in Affinity...don't go here. That tutorial is great but it doesn't actually tell you how to make a sprite sheet.

Now its my turn to dissapoint you!

First of all I have an Affinty Designer Artboard with lots of Benji poses, each "cell" is a shape with no outline or fill.

This IS a sprite sheet technically as in Unity we can switch from state to state. Like we can switch from Idle Benji to Aghast Benji without loading another file.

You can see how each cell already has a slice for the Export Persona:

Giphy

For this test I duplicated the whole Artboard and then moved and duplicated some Benjis. So each Benji is inside a shape which I can snap to the others. Check it out: when I move him he is confined to own cell...but I suspect he secretly burrowing a whole through a poster like Tim Robbins.

Giphy
Giphy

I created this sheet. To create a transparent background go Document Setup/Colour (second tab) and uncheck/check Transparent Background.

Singles

Then I create another slice which covers the entire Artboard, switch to Export persona and exported.

There are a few online tools for testing SpriteSheets, my favourite can be found at LeshyLabs

You can just drag it into the window and edit your settings. So for me it's 2 columns and 6 rows.

Giphy

It...works? Sort of! Since I didn't use exact snapping for each cell you can see there is a little slice o' Benji encroaching from the top. So this test is sloppier than Chuck Berry's bib. But the steps are correct.

Here is a simple two frame animation.

Giphy

Benji you big phoney! Look at you...you're moving!

So it IS possible to create spritesheets in AffinityDesigner. We are using it exclusively to create our game assets. Affinity is ideal for creating game artwork because since it's all vector you won't get stuck with sizes. Like 6 years ago I started making apps for the iPhone...within 2 years I had to revise all the assets to allow for new screen resolutions and yep....couldn't scale the bitmaps.

So when the table sized iPad comes out I'm ready for it.

NEXT: Affinty Designer and Spine workflow by Abban (hint, hint!)

Like this post? Try our game!

Woodland Run is now available on iOS and Android.

Woodland Run Available on the App Store Woodland Run Available on the Play Store