Random isometric character generation feature - Office Management 101

Hello traveler!

Even though these days the term "procedural generation" is being used often when something random is being generated in games, making it seem like it's something new and innovative, when the truth is that random maps, stats, items, etc. have been part of computer games practically since their dawn. That's why I'm not gonna say I'm procedurally generating characters in Office Management 101, but name it what essentially is - a random character generator.

In this article I'm going to concentrate on the graphical part of the generator. Although each generated character also has a number of other parameters like their name or skill values, I'll describe that part in more details in another article.

So pretty much from the start it was clear to me that for the sake of character variety in terms of looks and to save time working on art assets, I'd somehow have to make a set of character pieces and combine them randomly in the game engine. It proved to be a bit more difficult than it would seem at first glance. Even though principally it's the same as combining graphics for a normal side view or top-down 2d sprite, and I had done that plenty of times, there's some tricky nuances when doing it with isometric sprites.

First of all I felt i needed a proper template sprite with all the animations. I had some placeholder graphics and animations for male characters, but no women, so I started with that. Still being a beginner at pixel art, it took me over a month of on and off drawing and redrawing until I was happy enough with the result - an idle stance, a 4 frame walkcycle and a silly keyboard typing/mashing animation, all drawn at 4 different angles. There's still the same work ahead with the male sprites, but I'm hoping it won't take as long thanks to learning a few things through the whole process so far. Drawing spinoffs of the female sprites have certainly been easier afterwards at least.

After some planning I decided to break the sprites down into 5 parts - legs, body, the hand behind the body (which could be either right or left hand depending on the direction of the sprite), head and an optional accessory layer for things like glasses, scarves or maybe even hats. I decided on some limitations for the shapes of the sprites, like where the belt line would be or what height the sprites are, so different parts would all fit with each other. I then cut up and saved all the different part animations in separate image files.

When generating a new character in the game the engine picks a random spritesheet image for each body part (except making sure the hand and body are from a matching set), draws them into a buffer in the order of back hand first, then legs, body, head and finally the accessory. This buffer is then loaded into a pixmap for additional manipulation, currently to replace skin tone colors of the characters hands and legs if the picked head is dark skinned. In theory I could use this step to additionally also change the colors of the shirt and the pants, so I'm probably gonna implement that as well. The pixmap is then drawn onto a texture and turned into animations as usual.

I also kept the old way of using full spritesheets in the engine, so I can draw some characters that are shaped differently than the generated ones - either bigger or smaller or even non-human. I plan to use that to put a small number of predefined characters in the game, so called special characters, that have better than average skills.

There was also another interesting problem that I had to solve regarding characters sitting on a chair when having their backs turned to the screen. It's not directly related to generating the character graphics, but might as well talk about it anyway. The thing is, the way the isometric angle is positioned, some parts of the body overlapped the chair where it shouldn't, resulting in a mess displayed on this image:

One option would have been to "cut" the parts of the character that should be hidden behind the chair on the original spritesheets, but that wouldn't work well, since there's already two different shaped chairs in the game and more to come. Instead I divided the chairs into 2 parts - the bottom part is drawn first, then the character and finally the back of the chair.

Well that's about it. If you have any questions, suggestions or just want to drop a word, I'd be glad to answer. I'm available on twitter (@tulevikEU) or you can email me at riho@tulevik.eu. You can also just leave a comment here.

Thanks for reading,
Riho Peterson

@tulevikEU | Facebook | officemanagement101.com | DevLog on TIGForums