The challenges of complex animation spriting


OK so this is about what I would call "complex sprite" work in the RenPy engine. It's a pretty long effortpost.

By that I mean, I consider that the level of layers / options and animations I am building into my game sprites to be much more complex than is the norm for VNs

But with an ambition like having highly emotive animated sprites comes a lot of headaches, at least for the past month as I was learning RenPys coding language and coming up with a system for orgnising my sprites.

I've gone through about 4 different revisions of sprite art so far, fingers crossed the sprites I'm using now will make the final game....


ROUND 1:

I just needed something to place in my bare bones prototype of the game as I learnt the RenPy software. They were kind of funny golems that sometimes looked endearing and sometimes were little evil orc things.



What a little beast.



You dont know what you dont know, so I made some general errors in how I was approaching spriting.

MISTAKE #1 

There is absolutely no point in putting the amount of effort I put into these little troll placeholder sprites, if I was going to take this approach I should have just sketched out really quick pose/expression sets of all of mays options and then just used them as ongoing placeholders in the game.  That is actually something I am still planning to do once the demo portion of the game is finished.

MISTAKE #2

This is NOT how you should make sprites for RenPy, my mistake being that everything was all collected in one image, there was no layering, everything was easy to manipulate in photoshop, but once I exported a PNG for RenPy that was it, everything was combined.

As her expressions and poses grew, the amount of images began stacking up (over 100mb just for her sprites) and then ifI wanted to tweak anything on her base appearance (clothing, hair etc) then I was faced with updating dozens of images......

But at this point I hadn't really learnt these lessons, so onwards to the next round of little demons.


ROUND 2:

OK, so next round was me hand drawing everything for the first time, the previous round had been this mish-mash of google images stock etc and a few hand drawn parts for the face and hair.

These ones were all hand drawn from scratch basically. At the time I was thinking these would be good enough for the visual style I was going for, I think they're kinda quirky and cute, have a bit of a MSPaint aesthetic.....

So at this point I was only making mistake #2 as I was still exporting images as full flat PNGs with no layering for RenPy, but I had avoided mistake #1 "in theory" because I thought these would be final game sprites.



Not gonna lie, I still have a soft spot for this version of May, I think a passable game could be made around this art style.....



But then something else happened and that brings up to the NEXT ROUND  of gremlins.


ROUND 3:

For some reason or another (probably just horrible gnawing insecurity) I decided to resprite my May character again.

TBH I'm glad I did because this version of sprites was basically reaching the level I would consider acceptable for the final game I was imagininng in my  mind. They were much higher resolution and much more attention was paid to fine line art, shading, coloring and body proportions.



May was finally showing some signs of reaching her "true form".



Now why didn't things stop here? Well a couple of reasons.

I was still making MISTAKE #2 by not understanding how layered images work in RenPy. I was building up this  HUGE collection of may sprites of her in all these expressions / poses / outfits / accessories. It accelerated quickly and you soon loose total track of your image library and the game folder was bloating by 100s of extra MBs. The way it was looking if I made an entire game this way it would ship with 2GB+ of sprite images!

And there was another issue that I really couldn't have anticipated..... I changed one of my core ideas about the setting of the game.

I'd been going with a Japanese themed school experience...with the uniforms on all characters, as such durng the daytime school scenes all my characters would be sprited in a similar uniform, I thought it would be a cute visual theme.

Here's some examples of the other characters that were progressing at that time.....






As it turned out I hate making all my characters wear these boring ugly school uniforms.....I mean you can sexy them up, but they're still boring AF.

So I made the decision to re-set the game in an American style that didn't require school uniforms.....and that's how we finally get to (hopefully) the final round.....


ROUND 4 (hopefully final)

OK, now I knew I had a final look I was happy with for the game, I had a more refined polish on the sprites, but now the issue had shown itself regarding having these endless variations of poses expressions, I knew I couldn't keep doing things that way....

I knew I either severly limited my expression/poses/animation options (like sadly so many games do) or I found a more complex way in renpy to layer my image elements together as a sprite.

Of course once I did some basic research I found out that there was already an amazing feature setup in RenPy to do exactly what I wanted, it was the "LayeredImage" function.

Once I'd spent a few days gathering an understanding I began to put LayeredIMages to use. No longer did I export full images from photoshop and collect massive libraries of sprite poses of all possible combinations. Now I was just exporting one layer at a time, the workflow looks like this.

STEP 1 - scanning lineart into photoshop and creating a "MASTER SPRITE"



So now you have this photoshop document that you're basically going to be living in for the rest of your life, I'd recommend setting up folders within the photoshop file that seperate BODY / HEAD / ARMS / MOUTH / EYES

so you dont completely go mad, becuase you will end up with a LOT of layers very quickly.

I will probably have to do another long DevLog just on how I work within photoshop with these master sprites.... later, later....

Then once you're all setup with this master sprite which you NEVER EVER WANT TO LOSE (backups people...regular backups)

you will start generating elements for RenPy to combine using LayeredImage.

Quickest way to explain this is showing you my folder structure in the game project.




Then if you go into the ARMS folder you will see this:



A big ol collection of different arm poses, every folder will have a collection of different expressions/poses , eyes / mouth etc etc

Then in RenPy you use the LayeredImage feature and start combining all these PNG elements together, once again LayeredImage is such a big feature that I should do  a seperate  DevLog on that too.

But now the beauty of how things work is I don;t have to keep track of hundreds of sprites and if I update one part of Mays body, then it updates for everything, all my sprite changes are controlled by keywords in RenPy code.

A quick example being:

show may msmile enormal bnormal arjc 

SHOW / MAYS SPRITE / SMILING / NORMAL EYES / NORMAL EYEBROWS / ARMS CROSSED WEARING RED JACKET

I hope that makes sense.

So that brings me up to basically where I'm at, the only other pointer I'll make is that once you have a LOT of mouth and eye sprites you're probably going to want to make a "CHEAT SHEET".

What is a CHEAT SHEET?  Well for me it's  an Excel document that lists the codename for each expression and then shows the image next to it like so.



Now you might ask why don't I just use Windows default imageviewer software or just look at extra large thumbnails in explorer??

Well you're going to reach a stage where both those options are just way too slow and frustrating, you can use them, but they're just going to become a bottleneck. I'll give you examples why.

A lot of your fine expressions, eyes, eyebrows, mouths are going to be small objects on a pretty big HD+ sized transparent canvas. So when you're trying to view things like that as thumbnails...well you wont see anything.


That's me trying to view the mouths in windows explorer with extra large thumbnails on, not SUPER helpful.

ANd here's me trying to view the same images using the image preview software.



Not very helpful right?  Sometimes for subtle expressions these ways of previewing will drive you mad.

So that's why I recommend a cheat sheet where you lay the expressions down over a skintone background color and then sort them into your excel document.

Trust me on this, it's not going to be something you care about if you're using limited expression sets, but if you're like me...you're going to want this setup from early on in your projects development.

It's one thing to have like 4 mouth expressions / 4 eyebrow expressions and an eye with blinking animations, what have you got like 16 possible expression combos?

At this early stage I already have 26 unique mouth expressions and 36 eye expressions plus 8 eyebrow poses........WTF combination possibility is that?

I checked it's like 7000.

Anyway I hope this helps out at least one other person trying to make a game :)

I'll leave you with a few May May sprites as she got tweaked in the current version.

A RARE VINTAGE MAY



MORE CURRENT MAY


Jeeeze I can't pick a fav, I kinda miss the flower in her hair......

Leave a comment

Log in with itch.io to leave a comment.