Laserbrain Studios

Games Forum Blog Contact

Author Topic: Automating character sprite creation  (Read 6795 times)

Christian Knudsen

  • Administrator
  • Ace
  • *****
  • Posts: 3014
    • View Profile
Automating character sprite creation
« on: October 15, 2014, 06:26:53 PM »

In addition to working on fixing and improving the AI, I’m currently working on adding carrying corpses. Beyond the programming involved with that, it also entails a new set of animations and a bunch of character sprites for these animations.


When I first started working on Hidden Asset, making these character sprites took a looooong time. At least a couple of weeks were spent making the thousands of sprites just for the walking animation. Since then, I’ve automated a lot of this process so it now only takes a few days. I thought I’d run through the process of making the sprites for a single animation set and how I’ve automated as much as I could to speed it all up…


Every character animation I make always starts in Poser. Here, I manually animate the default male Poser character. When I’m happy with the animation for him, I then also apply the animation to the female Poser character and correct any issues that crop up due to these two characters not being of the same size and proportions, so the animation from the male character doesn’t fit 100% on the female one.


For the ‘carrying a corpse’ animation I had to animate two characters at once: the player character and the poor guy/gal that’s dead and being carried. When this was done, I rendered out my template animation frames. For this specific animation, it resulted in these 10 frames of animation (here shown in 1 of the 8 movement directions):



These template frames are then animated in the actual game engine, meaning that each frame gets a set of coordinates that tell the game where the sprite should be drawn relative to the tile the character is on. I’m now ready to start rendering the actual sprites for use in game, since these template sprites are never used directly in the game — only for figuring out the relative coordinates for each frame.


Thankfully, Poser offers something called Poser Script, which is short scripts written in Python that can be used to basically automate anything you do in Poser. For my needs, these scripts are used to automatically load and apply clothes and hair and the like to the Poser characters, then rendering out each of these items separately and for each frame and direction of the animation. It doesn’t take much time to write such a script, especially now that I’ve already done this process a bunch of times and can just reuse old scripts. So I set a script to run in Poser and can usually leave the computer for half an hour or so — or work on something else while the sprites render in the background.


When this has been done for all the body parts, clothes, shoes, hairstyles and everything else for the characters, I usually have a few thousand separate sprite images in my folder. For this particular animation, I actually first rendered out the player character, since he’s just a single sprite:



When rendering the sprites for the character being carried, I applied a flat grey material to anything that wasn’t the specific sprite being rendered to mask out anything that’s obscured by the character itself or the player character carrying it. Let’s use a pants sprite as an example. Here’s one of the pants styles for the first frame of the animation:



Before I got clever about automating as much of this as possible, I only rendered the pants themselves, so I had to manually erase everything that was supposed to be obscured. If you have to do that for X thousands of sprites, you can probably imagine why this took so long for the first set of animations I made for the game. Now I’ve just written a small program that automatically reads all the image files in a folder and erases anything in the image with the exact gray color used for the mask. So I just copy this program into the folder containing the image files and run it. It chugs along for a couple of minutes and then everything has been erased just the way I want it:



There are sometimes still a few issues that need to be corrected manually. Sometimes the gray color was also present in another part of the image, so I have to restore the part that shouldn’t have been erased. Or parts of the character was clipping through the sprite and covering it, so I have to patch that area. But it’s negligible compared to the work needed before. I can probably quickly check and fix all the thousands of separate sprites over a day or two.


I do this in GIMP. But I do more than just fix any problem sprites in GIMP — I also shrink the sprites to half size. Whether drawing by hand or modelling and rendering through a 3D program such as Poser, Blender or 3ds Max, it’s always a good idea to make the original artwork in higher resolution than needed and then shrink it. You’ll get more detail in the final artwork/sprite like that. Also, in my particular case, the jagged edges left behind when the gray areas were deleted become more smooth when the image is shrunk:



In keeping with my attempt to automate as much as possible, I’ve written a small GIMP script that automatically shrinks all open images to half size and saves them. So I usually have 20-30 images open at a time in GIMP, then quickly check them for issues that need fixing and then just run my script. Quick and easy!


For each of these sprites to be drawn in the right place on screen when running the game, the engine needs to know the sprites’ coordinates relative to the template sprites. So when the game is running, these ‘sub-sprites’ (that are each a separate body part or clothing item) are drawn to screen relative to the original template sprites, which were drawn relative to the ingame tile.


To get the coordinates relative to the template sprites, I use another program that I wrote for this purpose. Just as I did with the program that erased all the masked parts, I copy this program into the image folder and run it. This program automatically crops each image and then writes the coordinates of the cropped image’s top left corner (what the coordinates of the cropped image’s top left corner were on the uncropped image) to a text file. This leaves me with thousands of cropped sprite images that are as small as they can possibly be — and a long list with the coordinates for each sprite:




Using a third program I wrote for this specific purpose, these coordinates are then converted into a format that I can copy/past directly into the game’s code. Voila!


All I need to do now is gather all these thousands of sprites into a few sprite sheets and feed the coordinate of each sprite on the sprite sheet into the game’s code. This is also done with my own program that spits out a text file with coordinates that are formatted so they can be copy/pasted directly into code.



And there you have it. There are quite a few steps involved, but automating as much as possible has made what was once the biggest bottleneck when developing Hidden Asset almost a breeze!



SmartK8

  • Guest
Re: Automating character sprite creation
« Reply #1 on: October 19, 2014, 06:35:36 PM »
Hi,

  I just found your developer's blog and it's great. I'm a fellow programmer working on a similar - yet less mature - project. It's not commercial... it's basically a pet project aside my full-time job to keep me relaxed (sane? :). I'm going for more realistic (less stylized, more raw) look than you, but I love X-COM series and dig your style as well. I'm doing my own art too (also in Poser :D) and I even use (royalty free) music by Kevin MacLeod as you do. The similarities made me laugh (I was also working on rogue-like before, but switched to isometric). But I'm going for a free 2D isometric, the tiles are still used for the ground, but everything else can be placed anywhere. I've finished UI system and several subsystems and I've started to do in-game visuals. It goes quite well. Free isometric is a level harder than tiled one (collisions, lighting, visibilities, etc.) but so far so good.

  I've checked your walls and are amazing (whole engine is). I love you progress throughout videos. A great inspiration for me. I'm now working on making thick walls and I kinda hit the wall if you excuse my pun. If you could give me some hints on how your sorting algorithm works and how you solved corners, etc. I'm still struggling a bit. My "game" is in early stages, but I'll show you some early screen-shots in action:

Game: http://uppix.com/f-UntitledGameScre5443e62f0017e8ee.png
Editor: http://uppix.com/f-UntitledEditorSc5443e64b0017e8ef.png

Keep up good work. I especially love your body-part composition system and elevators. How to do z-levels is at this moment beyond me. :D

regards,
Kate

Christian Knudsen

  • Administrator
  • Ace
  • *****
  • Posts: 3014
    • View Profile
Re: Automating character sprite creation
« Reply #2 on: October 20, 2014, 06:53:36 PM »
Looks like you've got a nice engine in the works! Is it fully 2D or semi 3D? The lighting on the ground looks like it's rendered with 'real' 3D lighting, but the walls seem to be lighted per wall section and not as a full 3D model? Does the shadow cast by character, for example, fall correctly on walls, or does it clip through under them and is just drawn on the ground?

My sorting algorithm is based on everything being tile-based. So I first draw the ground, then cycle through all visible tiles back to front and first draw the (back) walls, then any characters or objects on the tile. When characters are moving from one tile to another, I just draw part of the character on one tile and part on the other. It's quite a bit more complicated and messy than that, but that's the basic idea.

With regards to walls, I have a bunch of checks and conditionals that crop the end of the walls a bit if there are connecting walls. For end walls that have no adjacent, connecting walls (such as doorways), I also have to draw a thin sliver of just the end of the wall, since it overlaps into the adjacent tile, so that the wall will be covered by any characters walking past it incorrectly. My wall and character rendering code is just a tangled mess of checks and conditionals at this point.

SmartK8

  • Guest
Re: Automating character sprite creation
« Reply #3 on: October 21, 2014, 09:30:57 PM »
Hi,

"Is it fully 2D or semi 3D?" Yes, it's fully 2D. I was thinking about 3D (or pseudo-3D), but I love this challenge of 2D only while keeping visuals of 3D. Some things are solved in a "3D world space" but via sprites (quads) only. Also animation of 3D models is kinda beyond me at this point.

"The lighting on the ground looks like it's rendered with 'real' 3D lighting, but the walls seem to be lighted per wall section and not as a full 3D model?"

Exactly. The "terrain" is rendered via a per pixel (shader) lighting. But I wasn't able to do it for walls and stuff (well I was, but it doesn't look right). You can notice that I have problem recognizing when wall is being "back faced" to a light source. That why kinda need thick walls. I'm working on it ATM.

"Does the shadow cast by character, for example, fall correctly on walls, or does it clip through under them and is just drawn on the ground?"

I was able to limit shadows to a polygon cast by its "parent" light at least. But casting it on the walls would be a real challenge (IMO quite impossible). At this moment the cycle is: 1) tiles, 2) shadows (restricted to a light polygon), 3) objects.. but I'm thinking about thick walls atm.  I was considering isometric masking:

http://www.servo7.co.uk/iso/masking.aspx

But this technique is not able to resolve the objects that occupy same space (like thick walls touching at south corner). So I don't know.

"My sorting algorithm is based on everything being tile-based. "
That's a good idea. I'm considering full depth-map at this point. To write it to depth buffer and have "real" ordering. Poser is able to render this and store it in a layer of PSD. But it's basically twice the memory (or rather one more channel). I'll think about your tile-based approach.

"With regards to walls, I have a bunch of checks..."
It looks amazing. Good job, really. Looks so natural. I'm trying to dodge this tweaking, but I guess there's no ideal solution to this problem. Check this video I've made (notice how PC still goes through walls when near):

https://dl.dropboxusercontent.com/u/69880576/UntitledGame.mp4

regards,
Kate

Christian Knudsen

  • Administrator
  • Ace
  • *****
  • Posts: 3014
    • View Profile
Re: Automating character sprite creation
« Reply #4 on: October 22, 2014, 01:29:00 PM »
Those character shadows look amazing! It's a pity they won't be able to fall on objects. I think you pretty much have to go fully 3D if you want proper shadow casting in an isometric game. The guys working on Elysian Shadows, for example, started out making a 2D isometric engine, then eventually switched to 3D with billboarding to be able to get the benefits of 3D lighting (among other things). I'm not really a fan of their 2D/3D mixing, but they've got some great shadows.

Going full depth map is probably the best overall solution if you want to avoid all the checks and conditionals I have to do in my engine. It's taken a long time to get everything to render like I want it, but there are still issues that I've just learned to live with -- and the engine is very limited. Like, if I changed the size of wall sprites, everything would fall apart. So it's very much a specific solution, whereas full depth map would probably be much more flexible.

I'm like you in that I love creating something that looks 3D using only flat 2D sprites. And I can't even begin to imagine all the extra stuff I'd have to learn just to make a simple 3D engine that can load and animate a 3D model. But if I had known how to do that stuff when I started working on this game, I'd probably have gone fully 3D. Of course, then the game would probably require higher specs, and asset creation would take much more time.

SmartK8

  • Guest
Re: Automating character sprite creation
« Reply #5 on: November 01, 2014, 08:26:58 PM »
Sorry, I was working hard on that depth buffer implementation. But I finally did it and it works great (as expected, but still kinda). It was tough to tweak all the shader bits, but I think it was worth it. Now I can draw objects in whether order I want. The only drawback is to have Position map in Poser rendered (I've expanded my engine). Check it out:

Depth map: http://s9.postimg.org/z7eoh89vz/DC32_OM_Depth_Buffer.png
Movie: https://dl.dropboxusercontent.com/u/69880576/UntitledGameDepthBuffer.mp4

"It's a pity they won't be able to fall on objects."

With Object-Position information it just might. But I'm quite happy the way it looks now. I'm trying to keep FPS at maximum because I plan quite extensive A.I. later one. I don't want to end-up like guys in professional studios where all the FPS thrown at graphics and guys working on A.I. will get almost no share of the FPS. Thus leading to basic (stupid) A.I.

"Of course, then the game would probably require higher specs, and asset creation would take much more time."

Exactly. I kinda now how to do 3D (key animation only theoretically), but I still decided to go 2D. It's immensely easier to put together, far less technical issues (arguable :D) to fight against, much faster graphics (just few sprites basically.. not really) and most importantly I want this to be heavily moddable by almost anyone. 3D modelers can still do their thing and render it via Poser, but 2D artists can draw something as well (depth map is not required, sprite just goes flat if not provided).

I like your body part system. I'm thinking about something similar. But I'm afraid that it might negatively impact the number of GPU draw calls. Not necessarily the multiple parts but that scattered body-parts. Can you fit it on one texture? I'm afraid that if it grown to multiple textures the switching might be a GPU nightmare. Anyway I've worked on this problem many times before, but that was roguelike and I only used multiple "color layers" that marked set of pixels to have customizable color to them. Your system is the best (ballsy) I've seen ever (in 2D). I'm not sure if I muster the strength to start something even less intimidating.  :-[

regards,
Kate

Christian Knudsen

  • Administrator
  • Ace
  • *****
  • Posts: 3014
    • View Profile
Re: Automating character sprite creation
« Reply #6 on: November 04, 2014, 07:25:22 AM »
Nice! That system is going to save you so many headaches!

Though, how do you handle stuff like windows, for example? I guess you will still have to draw anything behind a window before you draw the window itself for proper alpha layering and such?

I can fit everything related to a single frame of animation on one sprite sheet, but all the character sprites currently take up 30-40 1024x1024 sprite sheets. So in theory, each character draw causes a texture switch because in between drawing the characters, I'll most likely also be drawing environment sprites, which are also on separate sprite sheets. It's definitely a bit of a bottleneck on really old systems, but it still runs absolutely smooth on older, non-gaming systems.

At first, I was really trying to keep texture switches to a minimum, but as the game has grown, I've just accepted that I will be doing a lot of texture switching no matter what. I figure that the people that are (hopefully!) going to buy the game either have gaming systems or at least not non-gaming systems that are 5+ years old.

SmartK8

  • Guest
Re: Automating character sprite creation
« Reply #7 on: November 05, 2014, 07:47:45 PM »
"Though, how do you handle stuff like windows, for example? I guess you will still have to draw anything behind a window before you draw the window itself for proper alpha layering and such?"

That's true. I still have to draw the semi-transparent sprites last to achieve correct blending. I've reserved a range 0-2000 (1600 height + 2x200 off-screen on top and bottom) to represent depths of 0.1-1.0. The UI is being drawn last (it's a different subsystem anyway) at depth 0.0 (front). In-game overlay layer is drawn at depths of 0.001-0.099.

"So in theory, each character draw causes a texture switch because in between drawing the characters, I'll most likely also be drawing environment sprites, which are also on separate sprite sheets."

That sound reasonable. I would like a texture (or two at max) per character, a tile will be one (at this moment one draw) texture.. I still have space for 300 tiles (Fallout has around 250), few environment textures hopefully packed logically together (even duplicate some common elements) by a biome, the "object" (rest of the world) textures hopefully packed together as possible (buildings, vehicles, etc.). I ha

"At first, I was really trying to keep texture switches to a minimum, but as the game has grown, I've just accepted that I will be doing a lot of texture switching no matter what."

I guess that awaits me too soon. Hopefully, it won't get out of hands. But we'll probably have an interstellar flight technology by the time I complete this game (if).

regards,
Kate

SmartK8

  • Guest
Re: Automating character sprite creation
« Reply #8 on: November 07, 2014, 05:20:26 PM »
I've made a breakthrough yesterday, the objects are now have per pixel lightning (even with Z!). Checkout how the shadow smoothly slides over the "3D" sprite.

https://dl.dropboxusercontent.com/u/69880576/UntitledGamePerPixelLighting.mp4

Also I've did some early optimization and sped it up 500%. So now I'm at 250 FPS on my good old (but mostly old) HD 5850. If you told me three month ago when I got just basic terrain per pixel lightning and didn't know how to sort objects or make collisions on them that I will have this. I wouldn't believe you. It still needs some minor fixes (red light seeping through at few pixels). Now I need to start working on REAL game stuff like everything else. Hope you'll have some new post soon btw. ;D

Christian Knudsen

  • Administrator
  • Ace
  • *****
  • Posts: 3014
    • View Profile
Re: Automating character sprite creation
« Reply #9 on: November 07, 2014, 07:48:34 PM »
Nice work. That looks awesome! Congrats on getting it all working!

Between getting everything transfered to my new dev computer and being sick, I haven't gotten as much done as I would have liked over the past week. But I'm hoping to get a new dev video up soon when I've also managed to reinstall Linux so I can edit the video in Kdenlive.

VFP82

  • Newbie
  • *
  • Posts: 14
    • View Profile
Re: Automating character sprite creation
« Reply #10 on: November 20, 2014, 02:16:41 AM »
Glad to see you're still alive and kickin CK!

Christian Knudsen

  • Administrator
  • Ace
  • *****
  • Posts: 3014
    • View Profile
Re: Automating character sprite creation
« Reply #11 on: November 20, 2014, 08:42:17 PM »
Likewise! :D

Serge

  • Guest
Re: Automating character sprite creation
« Reply #12 on: December 03, 2014, 12:19:04 AM »
Hi!

wow, so much isometric goodness!
I'm all in for 2D isometric rendering instead of 3D. It's great to see both of you keeping this nice alive.
I hope to be able to join the club one day, if I can manage to get an engine working properly.

I've worked on a RGP some years back. I never finished it though. The code got messy and I learned much while working on it. Maybe that killed the project, as I spend way too much time recoding old stuff. I'm sure you know the feeling :) 
I was never satisfied with the nature graphics, so I redid those many times as well.
I never got it right, but I've learned a lot since then so I think (and that's probably the biggest trap) I can do better in the next project.
Here are some old RPG screenshots:




The lighting system looks a lot like your detail level 2 lighting system in HIDDEN Asset.
The game uses Allegro 4 library, and I've now moved to Allegro 5. But sadly it doesn't appear to have a rendering method like 4 did. So no smooth lighting for me.

On sorting the graphics rendering part, I sort out everything on y position first. Then I'll render all the walls, objects and NPC's. Simple, but it works fine for me.

I'll keep an eye on these forums, I feel lot's of good stuff is still to come :)
Keep up the good work! I'm looking forward to the next post!

By the way, are you guys (Christian Knudsen and SmartK8) doing this in your spare time or is this your full time job now? If you're doing this next to your dayjob (like me), then good god where do you guys find the time :D

Christian Knudsen

  • Administrator
  • Ace
  • *****
  • Posts: 3014
    • View Profile
Re: Automating character sprite creation
« Reply #13 on: December 03, 2014, 07:56:19 PM »
I'm doing this in my spare time. I try to squeeze in at least 1-2 hours a day, but it varies.

Those screenshots look great! At least as good (if not better) than stuff like Spiderweb Software's RPGs. I'm not really all that familiar with Allegro, but doesn't it offer bindings for plain OpenGL calls? Then smooth lighting should definitely be doable.

SmartK8

  • Guest
Re: Automating character sprite creation
« Reply #14 on: December 03, 2014, 09:09:27 PM »
Hi Serge,

  I'm doing it in my spare time as well. Usually on the weekends and holidays. I agree with Christian that it looks amazing. Kinda reminds me of Diablo 1 style (probably because of the bars and columns). Why did you canceled it or do you plan to revive it now? Even though I already may guess that it is because of lack of spare time. ;D But it might have been something else. I was always worried (and I still am) that I won't be fast enough (being a one developer) to make it into a game before the technology (and tools) will become obsolete. But today with all the retro games and emulators and Steam and stuff I'm fairly convinced I can make a retro game of the future today.  ;D

 Is there a playable piece of game (combat or quests) or is it an early stage of development?

regards,
Kate