In this interview, Jarek talks us through the creation of the game, how he used Affinity Designer and Photo to make the 2D art, and the advantages of using the Affinity app’s alongside Unity for developing games.
How did you come up with the concept for Dragon Crashers?
The Dragon in the Crystal Mine wasn’t my first idea. I had many conceptions before: Journey to the Center of Earth, Castle Siege, or a Pirate Ship. My last-minute proposition was a Crystal Mine with the dragon sleeping on a pile of gold. This concept was chosen by the team at Unity as a theme for the demo. I think it was a very good choice to show what Unity is capable of. I was inspired by Jordan Peterson’s talk about a dragon guarding a treasure (you can watch it on YouTube). Its meaning is, everything worth pursuing in life requires us to overcome some obstacle, fight our demons, or go out of our comfort zone. This stuck with me, and I thought it would be a good idea to use it.
“I was inspired by Jordan Peterson’s talk about a dragon guarding a treasure. Its meaning is, everything worth pursuing in life requires us to overcome some obstacle, fight our demons, or go out of our comfort zone.”
What tools do you use to create game art, and what does your usual workflow look like?
We live in a digital age, but I think the simpler, the better, so I start with a pencil and paper. I find there’s a simplicity about using a pencil that allows me to visualise my thoughts with minimal effort. It’s a perfect mind-art connection.
After a very rough sketch, I move to graphic software, which is either Affinity Photo or Designer. I scan my paper sketch with a smartphone and open it in the software. Right now, I feel most comfortable with vectors, so I use the Pen Tool to trace my sketch or I use some basic vector shapes like Rectangle or Ellipse. When the art is complete, I export it using the Export Persona and open it in Unity to begin development.
How did you go about creating the different characters for the demo?
It all started with good planning. In the beginning, I needed to choose good proportions for the first characters to use them as a base. I needed three bipedal (two-legged) player characters and one enemy. All of the characters (apart from the dragon) had to use the same Sprite Skinning skeleton to take advantage of the Skin Swap feature in Unity, but they also had to have their own distinct visuals. To design the characters before opening Unity, I had to make sure that all of them could use the same skeleton, so I made a simple skeleton overlay in Affinity. That way, I was able to check the character’s limbs would match the underlying bone structure. It turned out pretty well—I was able to make them look unique with different body types—one has broad shoulders, one has larger feet, and one even has a wolf’s head :)
A lot of planning went into choosing how many layers the characters needed and which bones would affect each layer. I decided this in advance. Changing it later would have led to many headaches, so good pre-planning when designing the visuals was crucial. Of course, there was some trial and error involved, but once I’d made the first base character, the others were easier.
To import the characters into Unity, I used PSB importer as it allowed me to have the same layer structure and positions as in Affinity. I designed my characters using vectors, so each layer consisted of a bunch of paths.
First, I needed to rasterize each layer, (otherwise they would have exported separately) and then export the file as a PSD (and change file extension to PSB). So I had two files for each character sprite: one source vector and one rasterized version. This allowed me to keep an editable file in case I wanted to make tweaks to the characters later.
After importing the PSB into Unity, I completed the rigging process, then made a library asset by assigning a Category and a Label for each sprite. Then I could make other characters by swapping a particular sprite library asset for another.
Before going further, I added 2D IKs to the character’s limbs. This allowed me to have better control over the character when animating him. I made this character a base prefab for all others, so the changes made to it propagated to the other characters automatically.
For the rest, I imported the PSB as before, but this time I didn’t need to make the skeleton—I copied it from the base character. I just needed to tweak the sprite meshes topology and weights to fit the new character shape.
The import of normal maps and mask maps was even easier—I copied the character in Unity, opened it in Affinity, and replaced all the layers with their normal map (or mask map) counterparts. As the normal map isn’t a colour texture, I had to uncheck the sRGB option under Advanced in Sprite Import Settings. Now I could assign the normal maps and mask maps as Secondary Textures in Sprite Editor.
The characters were now animation-ready. I used the same animation clips for most of the actions and gave each character a bit of personality by crafting each of them a unique animation for idle and attack.
The dragon was a bit more straightforward in terms of workflow. It didn’t need custom skins so there was no extensive planning involved, which meant I could focus on the design and rigging. A lot of time went into making sure the wings, tail, and neck were rigged correctly and there would be no visual artifacts when animating. The process of setting the Sprite swap, IKs, and additional maps was roughly the same as for the other characters.
To summarise, making characters mainly boils down to proper planning and thinking ahead. You need to know what you want to achieve and what constraints you need to keep in mind. The rest is just plain execution.
“To summarise, making characters mainly boils down to proper planning and thinking ahead. You need to know what you want to achieve and what constraints you need to keep in mind. The rest is just plain execution.”
Can you talk us through how you make a sprite from start to finish?
As I mentioned before, I always start with a pencil and a piece of paper. But there’s one crucial step before—the research. Even though we’re making stylized art, we want to achieve a certain level of believability. So it’s good practice to start with researching some images and colour palettes for our topic.
Another vital thing to remember is that the sprite doesn’t live in a vacuum—it needs to fit our game, so we need to have some point of reference when designing it. If it’s the first sprite for a new game, we could just take an empty canvas and start making a bunch of variants to find the right art style. But if we’re making a sprite for an already established game art style, we need to make sure that it fits and doesn’t stick out like a sore thumb. For this, we need to have some environments where we can place our sprite. Doing that will help us maintain good proportions, colour palette and viewing angle (this is very important when making a game with a camera slightly upward and pointed at an angle: top-down, isometric).
Also, if our art has outlines, we can see if their width will match the existing objects. This also applies to pixel art—if we make a sprite that doesn’t match the game palette we can change it, but if the size is off, that would require redoing it almost from scratch.
So now we have our idea, we’ve gathered references, we have a sketch and an environment to place it, we can now start making our sprite.
I like to start with simple shapes or silhouettes and then go into the details. Right now, I use mostly vector format because it’s very flexible and easily editable. I can easily edit the colours, shapes or scale of my sprite without losing quality. It is very important to work smart when making a game, thinking of the long term. No matter if it’s raster or vector, I like to have every sprite in the most editable format, so I use as many layers as possible without sacrificing performance. That way I can always go back to my original file, change some parts or colours, and have a different sprite. I only flatten my sprite layers when exporting to PNG format.
“It is very important to work smart when making a game, thinking of the long term. No matter if it’s raster or vector, I like to have every sprite in the most editable format, so I use as many layers as possible without sacrificing performance.”
Speaking of export, I mostly use the Export Persona. It’s a great tool for game development. It allows me to have one file for every sprite and export all of them with a single click. Or I just set export to Continuous, so the sprite is automatically exported when I change anything on it, which is a huge time saver.
Do you have any tips for game developers who might be thinking of giving Affinity Designer a try?
First thing, take full advantage of Designer’s Pen Tool. It has many useful shortcuts that will help you make any shape you want without switching to another tool.
Make your art as editable as possible. One of the things that will help you with this is the editable Compound path. When clicking on one of the geometry buttons on the toolbar, if you hold down Alt (or Option for Mac users), the Compound path will form a group, but every layer has an option on how it interacts with the other layers—you can choose between Add, Intersect, Subtract and Xor modes, which is very handy!
Another useful feature in Affinity Designer is Global Colours. Global Colours are colours that are set globally across your document—any object that uses the given colour will update when we change the colour in the palette. It’s handy for creating variations of objects and characters. Here’s an example:
In game design, we can have objects that are duplicated many times: level tiles, bricks, wheels, dragon scales, metal bolts. We can just duplicate them and place them around our canvas, but what if we want to change them? Here we can just make one object and turn it into a Symbol. Then when we duplicate it, whenever we change something in one of the symbols, the others will change too!
The last feature I want to talk about is the Assets Panel. If you’re making a game and want to have all the objects used (characters, weapons, sprites, or tiles) in one place, this will help you achieve that. You just put all of your objects in this panel, and then you have an overview of all the things from the game in one place. You can group them by any criteria you want: the level that the object is used on, type, colour, etc. Then you can drag and drop these objects to any document you have open. You can check objects’ visual consistency, scale, how they will look on another level. You can make mock-up screens or “screenshots” of your game. Furthermore, you can also store UI elements there (button designs, switches, icons) and use them when designing your game’s interface.
There are many handy tools in Designer, but these are my favourites that will help you level up your game art skills.
Any tips for using Affinity Photo?
The most important thing in any raster app is the brush feature. Affinity Photo has an amazing brush engine—very fluid with all the essential functions like tablet support. You can also export and import your own brushes. I love the stroke stabilization option—when you turn it on your brush lines become very clean, which is good for making outlines.
If I need to point out one major feature that I like to use (besides the great raster graphics and brushes), it’s the Live Filters. They allow you to dramatically change the look of your art without losing editability. I love the perspective filter in particular—it allows you to distort the layer to match the perspective, which is good for placing windows on buildings, posters on walls or textures on surfaces. With Live Filters also come Live Adjustments Layers and Blend Modes. It amazes me how quick and responsive they are—you can see the results instantly, without any lag.
I also like Layer Effects. With them you can add gradients, drop and inner shadows, outlines, 3D effects, and more. With a bit of creativity, you can achieve almost anything with them. Did I mention they are also non-destructive?
I think the non-destructive workflow of the Affinity apps is their strength—that you can make smart use of layers, groups and masks to make editable art. You can also take advantage of Live Filters, Adjustments layers, Effects, and Blend modes to change the look of your image without losing its editability. This is very important when making game assets. Making games is a fluid process based on iteration, so there’s a high probability that you will need to go back to your old drawings and make some adjustments.
“I think the non-destructive workflow of the Affinity apps is their strength—that you can make smart use of layers, groups and masks to make editable art. You can also take advantage of Live Filters, Adjustments layers, Effects, and Blend modes to change the look of your image without losing its editability. This is very important when making game assets.”
Affinity encourages you to work smart with features like Symbols and Global Colours. With planning, you can make your characters modular, easily add more colour permutations or add some variety with small adjustments. You can blend vectors with raster workflows, easily switch between apps and export all your sprites with one click. I think this is the knowledge that you need to learn first, even before diving deep into particular tool details, keyboard shortcuts, or tricks.
The Affinity suite for me is one whole experience. The apps are made in a way that you can use them interchangeably: you can open your document in either Designer or Photo, no matter which app you’ve saved it in first. Also, you can switch between them by using the menu command File > Edit in Designer (or File > Open in Photo).
“The Affinity suite for me is one whole experience. The apps are made in a way that you can use them interchangeably: you can open your document in either Designer or Photo, no matter which app you’ve saved it in first.”
Also, both apps share fundamental features, so things like the Asset Panel and some vector features are available in Affinity Photo. Both apps have similar, very coherent interfaces, so it’s very easy to switch between them.
What are the advantages of using Affinity apps alongside Unity? How do they integrate/synergise?
Firstly, we can just export PNGs sprites from Affinity apps and import them into Unity—straight and simple. But it can be tedious to export all of our sprites when we have 50+ layers in our graphic file. So we can use Affinity’s Export Persona to mark layers for export. When we check Continuous Export, the sprites update automatically in Unity anytime we make changes in Affinity. That’s the feature I always use.
Both Affinity and Unity support industry-standard PSD file format, so if we need to have a sprite and also keep the layers for future editability we can export our file as PSD and import it into Unity—it will be imported as a standard sprite.
But what if we want to keep our Affinity file layers and use them as separate sprites? We can do that too with the 2D PSD Importer package in Unity. We save the Affinity file as PSD like before, but to use the 2D PSD importer we need to change our file extension from PSD to PSB. PSB is an almost identical format but has support for larger file dimensions.
Upon import, we will have our file as before, but each of the layers will be a separate sprite in Unity. So there’s no need to export each layer individually and then try to place the sprite manually to match our Affinity file look.
We also can use 2D rigging and animation on our PSB file to animate it and bring it to life.
If we’re working with vector tools in Affinity, we can use the SVG format. In Unity, there is an SVG importer package in development which I tested out, and when it’s available, it will be possible to import vector images. These will then convert to mesh and the SVG sprite will be resolution-independent, so we can scale it without losing quality. This can be useful for UI parts like buttons and panels. Also, we can use it for static in-game elements like backgrounds. SVG imported sprites are best used for large elements which would have to be a very high resolution if they were raster sprites.
Finally, do you have any tips for budding game creators?
The first step is the same as for any field—have a strong motivation. Developing games is the hardest form of creation. It requires expertise in many fields: design, coding, art, sound, writing, even psychology. So having a strong vision and “Why” will help you persevere through this long journey. Start small. Just finish your first game as quickly as possible, then you’ll have an idea of the whole process. Work with constraints. It’s good to have boundaries for your game, to pick a theme and limit the mechanics and scope. A good place to learn this is game jams.
Learn to code if you don’t already know how to. Learn the basics of coding to have an understanding of how games work under the hood. You can start with visual scripting, but I would advise learning C# as soon as possible. Even with basic C# knowledge, you can make small changes to scripts made by the Unity community and adapt them to your needs.
Be persistent. As for any field, it takes time to become proficient in it. And like I’ve said, creating games requires you to master many topics, so you need time and patience to become a great developer.
More about Unity
Unity is the world’s leading platform for creating and operating interactive, real-time 3D content. The Unity Platform offers a comprehensive suite of tools for creating 2D, 3D, or VR content for over 20 platforms. Native features for bringing 2D art to life include 2D animation, world-building tools with Tilemap and spline-based object support, physics, particles, and advanced lighting possibilities. Learn more about Unity for 2D here.
More about Jarek
Jarek Majewski is a multi-disciplined artist who has worked in a variety of creative fields, including web design, 2D animation, logo design, print design and Visual FX. Between all those artistic endeavours, he was always drawn to creating games. After developing several small-scale games with a friend, his own game development path was realised a few years back when he discovered Unity and began learning C# to create games. Now he splits his time between making art and coding.
To see more of Jarek’s work, visit his website mindjardesign.com and follow him on Twitter. You can also read our previous interview with him here.
This article is based on an interview with 2D artist and animator Jarek Majewski. The interview was conducted by Eduardo Oriz, 2D Product Marketing at Unity Technologies. Jarek created the art and animation for Dragon Crashers, a 2D demo by Unity.
Unity has also published a blog post based on Jarek’s and Eduardo’s talk, which you can read here.