Dev Diaries - June 2019 - Sprites

Howdy-O, campers! I'm Kari, the programmer for Studio Coattails. I make the tree and squid girlfriends look happy or sad based on what Syon says. So you can blame me for everything wrong with the video games.

Last time, I talked about UI, so this time I wanna talk about displaying your characters! Much like UI, there's a lot of ways to do this in Ren'Py, and I've made games with like three completely different ones. I'm gonna use Eve in National Park Girls as an example because she's the easiest one to explain the highest level of.

So, when you see characters making faces in the game, you're seeing two image files. Well, a bunch of image files if you count everyone else and the background, but each character is two: body and face.

Yes, the image on the left is kinda terrifying, but listen.

Don't even worry about it.

Doing sprites this way saves a lot of memory, since we only need to have a sprite for each combination for body and outfit, and one sprite for each expression we can use across all of them. So this is how the above two images would combine to create what you see in game, using LiveComposite!

So, each character has a file called '[name]spriteengine.rpy' in the folder with all their sprites that just defines a bunch of images. Defining an image pretty much goes like this:

But you can get a lot more complex with it by using LiveComposite. Let's go step by step through what this code means and what it does.

image eve casual hair annoyed

This piece of code sets the name of a specific image we want to call. So here, we're wanting to define Eve, casual outfit, playing with her hair and with an annoyed look. Putting spaces here is important, because it'll keep better track of what things stay the same and what things change. Like if we want to use a transition to swap between Eve's faces, we don't want to transition her pose or outfit since they stay the same, so separating these variables with spaces makes it so only the changed things get transitions!

= LiveComposite(

This part defines that the image is going to be a live composite, AKA  showing multiple files as one image. The parentheses here is important because it encapsulates the next few lines as what makes up the LiveComposite. I don't know why LiveComposite is capitalized, I'm not sure if it works if you put it in lower case, but I'm not willing to piss off God that badly, so don't do it kids! Always capitalize your LiveComposites!

(895, 1895),

This is the size of Eve's sprite. No matter if it's her body or face, each image is 895 pixels wide and 1895 pixels tall. The space and comma here indicate which is which, the width always comes first. The parentheses indicated that this is self contained, and the comma at the end indicated there's more to the live composite on the next line.

(0, 0), "images/eve/eve_casual_hairfidget_base.png",

(0, 0), indicates that the placement of the image at the top left. So everything will display within the borders established in the previous line, starting at the first pixel you can. There's some reason to change this if you want, like if your face sprites are only the size of the face, and not just the same dimensions as the body, but it's a lost simpler this way so I kinda prefer it. Oh, and make sure you put a comma there to indicate there's more after it.

"images/eve/eve_casual_hairfidget_base.png"

This part is literally just the name of the file on your computer, relative to the game’s base directory so you don't have to type in what drive it's on every single time. Ren'Py is smart like that. 

Remember the comma! Cause there's more.

(0, 0), "images/eve/eve_face_annoyed.png",

This is pretty much the same code as the last part, but it's her face instead. These things are layered in the order you order them, so make sure to put the faces after the body. Or vice versa, if you're gonna try and get real weird with it. I won't judge. Also, comma is your best friend and occasional worst nightmare as you spend five hours trying to figure out why your game won't launch at all before finding out you're missing a single comma. Yay!

(0, 0), "eve_casual_hair_night"

HOLD UP

What? Night? What facial expression is night? The answer is: all of them, but at night time! This is a thingy we'll get back to in a future post cause it's a huge tangent that's kinda complicated and not really part of the basics you need to know going in. Basically if it's night time, then it layers a layer of transparent blue over her in the shape of her body sprite. It's like a cool DIY shading thingy. Take that, BioSoft Games! Oh also, Mr. Comma is done for right now cause it's the last line of the code. BYE JERK I WON'T MISS YOU!

)

And this right parentheses goes back to the one right at the end of the first line, bringing this whole image LiveComposite to a close. Just to show off what things need changing based on the different images, here's a couple more examples.

This will show Eve in her casual outfit, scratching her neck with a flat expression.

And this is Eve in her ranger outfit with her hat. There's a couple more variables in this, mostly a layer of shading over her face that's the shadow her hat casts. Also a similar thing to the night thingy but for when that one guy accidentally sets the trees on fire with a cigarette.

Okay, cool, how do I actually make it show the right thing in the game?

I'm glad you asked! Cause that's the rest of this post guide thingy and that means you've almost got it!

You just go the bit of the game where all the dialogue is, and type “show (image you defined that you wanna use weehaw)”. “onlayer middle” tells the game which layer to put it on. For example, the background is on the layer “background”, Eve is on the layer “middle”, and Zion is on the layer “forward”. These are things you gotta define yourself in the options file. You can add as many as you like and name them whatever you want, and they'll have priority in the order you put them in. Oldest is the last, and the newest one is on top.

With dissolve is a transition to display the image with. We use dissolve on pretty much every game, and it's a subtle fade between two image files that kinda looks like a face actually moving.

I hope this was helpful! As always, if you’re confused about anything or need help, leave a comment!