For the past few weeks, I’ve tweeted a couple times about the process of this character I was making for our game, Project Libra.

I was trying to:

• Sketch an original character;
• With the appropriate proportions in the style we’re aiming for;
• With an appropriate resolution for her in-game for our screens (1920×1080);
• To make a simple animation (in her case, a swift hand movement I often do);
• Also, make an interesting design for her;
• And, finally, integrate this whole mess into unity.

I should perhaps have updated all those steps on here individually, but whatever. I was too busy drawing!

I also had never used Unity before this week, and I learned a bunch on the fly. Thank lords I have Sébastien 😇 And now, I’m confident enough I’ll be able to take the job of animating and integrating the characters off him.

Woo for progress!!

For many of the steps above, it was the first time I ever tried to do them, so I decided to draw a less-important character. As in, she’s not on the game cover or marketing material that much (aside from this very blog post), but she’s still in-game, therefore she had to be not too badly designed.

She also happens to be my favorite character, and I like to think I did a pretty good job.

Presenting to you now, Scarlet Spitfire 😎

Here’s a tiny video I did to illustrate some of her animation “in-game” (in Unity):

Please ignore the little pixel twitches, thanks to the antialiasing.

Scarlet is a badass prosecutor in our game. She’s the human embodiment of fire. All in all, she’s awesome.

Design-wise, internally, we decided to choose birds to design our characters onto. For Scarlet, we went with the Bearded Vulture.

It looked appropriately angry and stylish and had a very cool color scheme, so this was a perfect match for her. For the black feathers, I had her hold a military-style vest on her back like she’s too good for it. Or something.

She’s not done yet, there’s still much to do to consider this character completed. Moreover, there has been a number of challenges along the way, and I really wanted to post something on this blog so I had cut some corners to have anything before 2019.

Challenges while designing Scarlet

Perspective

I’m still not that good doing perspective stuff off my head. I know how it works, but it takes me a while.

Moreover, I kind of have an overview bias: everything I’d draw was like the camera was positioned above the character.

The sketches themselves were ok, but it wasn’t a good perspective for what we needed in-game.

To fix this, I used the free version of Design Dolls and just made a character in the pose I wanted, positioned the camera straightforward the character, and went from there.

It definitely upgraded the quality of the sketches I did later on, based on that. It also helped to keep my body proportions a bit more realistic. My art background used to be more or less exclusively fashion design, and I tend to draw oddly long & thin people.

I then drew on top of that further and really nailed the style I wanted to use in-game.

Resolution

What goes under here up until the “What’s left” section is game design information.

You may skip it if you don’t care that much.

Also, I’m not great at explaining what’s what and I’m only going over stuff that didn’t go well.

---

I think the resolution is kind of an issue for every game. If you don’t lock your game to a specific screen size (and even if you do), you need to make sure your graphics scale and look good.

Resolution is kind of a mess and I won’t pretend I know everything, but I’m aware some screens have a different screen size (width x height in pixels) and DPI, which is the number of pixels per inch. A normal common screen has 72 pixels per inch, but phones have a higher value for a crisper look. Usually, it’s about twice as much at 150dpi.

There are other metrics to know (which I encountered later in my tests) but for now, that was all I needed to know.

I wanted to have big sprite sheets of high-quality assets that’d look good up to 1080p and 150dpi. It at least would look OK if someone played our game on gigantic screens, and it’d look crisp on any common screens, and high DPI phones.

I also thought: ” I could make big sprites with vector files, then just export it in PNG for the game. It’s doable. ”

Since I bought Affinity Designer recently, I was excited at the idea of using it for this purpose. However, it did bring its own set of challenges:

• First, sketching in this software is quite literally hell, so I didn’t use it for that purpose, which is fine. I thought I should only use it for line art and colors. I also didn’t shade Scarlet yet, and I’m very much perplexed at the idea of using Affinity Designer for that as well. I will probably just use the exported spritesheet and draw above it in Photoshop.
• Then, I did all the lines indiscriminately. What I should have done were groups of different body parts – arms, head, hair, chest, vest. Because I just decided to line everything at once, when I decided to add colors, some lines went over the colors instead of under, and it’s not as easy to delete lines as it is in illustrator (which has a literal eraser tool) or any matrix-based drawing software. Not to mention the vector layer hell, where each individual line is a layer, so shifting lines above or under colors was a problem.
• Doing colors proved itself also a problem because I assumed I would just fill the lines I did. But most lines weren’t closed, so this created awkward results.
• When I was done with the flat colors, I realized because I didn’t split all the drawing parts together, another issue was coming up: animating different parts was awkward to do, especially when suddenly a layer had some colors removed. I needed to keep it transparent, so I couldn’t just add white to hide extra parts. I had to split them again so I could make them invisible for each animation sprite.

This only describes a part of the frustration I went over in Affinity Designer. I will still do the basic sprite lines and colors in the software, however, I’ll be careful to split all the parts of a character so it’s easier to animate afterward.

Now, the fact that the whole lines and colors are infinitely stretchable, this should fix all resolutions issues (1080p and less), yeah?

Not quite.

When I imported the sprite in Unity, I encountered some other resolution issues. And also animation issues that I could have prevented but decided against. Which led to taking more time to do something pretty simple.

Animation in unity

I had a crash course on how to animate in unity, using its native tools. Roughly, I learned how to do talking animations and changing the pose (and have that pose have its own talking animation). Our system uses a scenario-based approach that Sébastien coded, in which each line a character says is tied to an animation ID to allow it to change on demand.

It’s pretty neat.

However while trying to animate my character, which uses a simple sprite sheet, I encountered a couple of issues:

• The first time around, the resolution was fine, but I added some sprite for the blinking and the boom, the crisp art was pixel-y and terrible. I’ve yet to fix this.
• Plus, the anti-alias makes certain sprites that followed each other in the timeline look like they jumped, when they didn’t;
• Speaking of which, I should have used a consistent pixel width, height and distance for each of the sprite. In unity, I had to calibrate the “sprite separator” (I don’t know the terms ok) to fix pixel-perfect each individual sprite so it wouldn’t twitch. It still does twitch a tiny bit, partly because of the anti-alias, but also because I was really tired to fix it after 3 hours.

Next time, in Photoshop, I’m gonna add within the sprite sheet all the data for the X and Y positions of each individual sprite, and their width, so I don’t have to figure it out within Unity itself.

What’s left to do for her

Animation poses

When I created her original sketch, I knew what attitude this character had. However, I didn’t sketch any of her animations nor plan what they would be. I only know how she behaves as a person.

So her animation I did for this test was really bare minimum. I see her more regal, fancy, and harsh. Her questioning hand-raise is fine and a bit fancy, but it’s definitely not angry enough.

Shading and details

Obviously, shading isn’t done yet. It’s mainly because I need to figure out the court’s lighting effects before I try to do the shading. Also, I want to try different type of shading (cell shading, semi 3d render, etc) and figure out by testing on different screens and resolutions what looks the best, and it was way out of the scope of my current testing, so this will be for another time.

Also, I’m unhappy with certain details on Scarlet, specifically. Her fierce stare from the sketch version is gone. I need to fix that.

I want to change some elements of her vest, too. The weird “tie” is just random stuff I put on bc I was trying to imagine something and it definitely does not look good.

Coming up next

I want to finish the demo site for subscribing to the Free Demo (!!) ASAP, so that’s my new focus for now. It’ll include designs for the actual main-characters of our game, for once, lol.

In the meantime, here are a couple birds related to the characters I’m gonna draw soon.

That’s it for now. Cheers!