Making Your Images

Alright, there are two main components to a ghost's shell - the images and surfaces.txt. Right now we're going to focus on the images. Surfaces.txt will come in a moment.

First, you're going to want a graphics program that'll let you save transparent PNGs. Personally, I use Flash for lineart and then color things using Photoshop and Sai, but you can figure out what works best for you. If you can't save a transparent PNG, you have another option! If you set the background of your image to magenta or teal or hot pink or something, then only that color will be transparent and the rest of your image should be fine. You may end up with loose pixels around your lines, but it's better than nothing, you know?
(If your ghost has a lot of pure white, you will need to put a dot of odd color in the top left corner. More on this below.)

For now, go into your yourghost\shell\default_shell folder. You can rename this folder to match your shell if you like, like "normal" or "casual" or "superhero" or whatever you have in mind for your ghost's basic look. You can also leave the name alone, it should be fine either way. You're going to see a lot of image files and a few txt files (such as surfaces.txt, very important).

Select/highlight all the pna files and delete them. Since you're going to be drawing your own images and replacing mine with them, you're not going to need them and leaving them in will make things look kind of weird, trust me. You will notice. Besides, depending on your attention to detail, you'll be making your own pna files to replace them with anyway.

You're going to be left with a series of png files that all start with surface. These are the images that make up the template, and these are going to be the images that make up your ghost. They break down like this.

surface0.png - Girl's default pose with both mouth and eyes in place.
surface1001.png - her half-closed eye frame
surface1002.png - her closed eye frame. These two frames make up her blinking animation.
surface1101.png - her half-open mouth
surface1102.png - her open mouth. These two frames make up her talking animation.
surface1501.png - Girl's embarrassed pose.
surface1502.png - Girl's surprised pose.
surface1503.png - Girl's worried pose.
surface1504.png - Girl's sad/disappointed pose.
surface1505.png - Girl's smiling pose.
surface1506.png - Girl's contented pose.
surface1507.png - Girl's angry pose.
surface1508.png - Girl's thoughtful pose.
surface1509.png - Girl's bored pose.

surface10.png - Triangle's default pose with his eyes in place.
surface2001.png - his half-closed eye frame.
surface2002.png - his closed eye frame. These two frames make up his blinking animation.
surface2501.png - Triangle's embarrassed pose.
surface2502.png - Triangle's surprised pose.
surface2503.png - Triangle's worried pose.
surface2504.png - Triangle's sad/disappointed pose.
surface2505.png - Triangle's smiling pose.
surface2506.png - Triangle's contented pose.
surface2507.png - Triangle's angry pose.
surface2508.png - Triangle's thoughtful pose.
surface2509.png - Triangle's bored pose.

As you can see, each character has about ten poses each, with an image corresponding to each pose, and individual frames for animations within those poses. You don't have to do this many if you don't want to, and you don't have to do the same poses or the same expressions that I did! If you want to have three different angry poses, or a been-hit pose, or them flipping you off pose, or a crying pose, or a flirty pose, or whatever, you absolutely can! You have total freedom here to draw your characters doing whatever you want! This template is meant to be an example of how it works.

What if I want to give my characters MORE poses? Like a LOT more poses?

This is fairly simple. All you have to do is define each new pose in surfaces.txt in the number range you want. You don't HAVE to follow my guidelines here of only ten poses for each character, or Surfaces1-10 for the main character and Surfaces2-20 for the sidekick. In fact, you don't HAVE to make Surface10 for your sidekick character, although I really would just in case since some AYA coding assumes Surface10 as the sidekick character by default.

BUT if you want to make all the poses for your main character Surfaces100-200 and the ones for your second character Surfaces 300-400, you can! Just change the numbers in surfaces.txt, write down what they correspond to so you use the right ones in your scripting, and go to town. My note below about overlap still applies though - if your Surfaces in surfaces.txt are 100-200, make sure your filenames aren't. Read on for more details. But otherwise you should be fine.

Notice that the files all follow a specific naming scheme, apart from surface0 and surface10 which should be the default poses for your two characters. I highly recommend you keep to a scheme since it'll help you keep your files organized, especially if you're going to have a lot of them. Girl's eye frames, for example, are in the 1000-1100 range, while her mouth frames are from 1100-1200 and her body frames are 1500-1600. Triangle in the meantime is in the 2000s. You don't have to use the exact same number scheme I've set up, but I would recommend putting your images past 1000 anyway because it'll save you a headache in the long run. I get more into this in the surfaces.txt file included in the template.

This sounds complicated, what's the easy way???

The easy way is simply to follow my guidelines and save your images over my images. That way all the filenames will stay the same, and you won't have to fuss over them. This means you will be doing ten poses for each character, plus a few animation frames. This does unfortunately mean that if you want your second character to have talking frames, they will be missing a few (because Triangle doesn't have a mouth), but it's alright. I explain how to add them in surfaces.txt, and all you'll need to do is make two more images.

Tell me exactly why you want the image files past 1000.

The basic jist of it is this - you can't have an image file share a number with a defined surface in surfaces.txt. So if you have an image named surface50.png and you have a surface defined in surfaces.txt as Surface50, the files are going to overlap incorrectly and you will immediately see something's wrong. Pushing the image files back past 1000 makes it so you can define surfaces up to 999 in surfaces.txt, more than enough.

You could, admittedly, take a different tack and instead put all your image files below 1000 and define all your Surfaces in surfaces.txt above 1000, it's really a matter of preference. But for the sake of this template, I broke it up with 1-999 being reserved for surfaces.txt, and 1000+ for image files.

One more thing! How do I make the sidekick character invisible like you mentioned in the conceptualization stage?

This is very easy. Simply make all the images for the side character, ESPECIALLY Surface10.png, blank pngs. Done. I think you could just make them transparent, but if that doesn't work, just make it solid green or something and that should do it. Deleting the files entirely (except Surface10, which should be blank) should also work. Then later on in the scripting stage, give them no dialogue.

Drawing Your Images

I can't really tell you how to draw or anything here - that's on you. So you're just going to have to give it your best shot in that department. You can make your images as big or as small as you want - you don't have to keep them the same size as mine. You can also have your ghost cut off around the legs or chest, like this -

So you don't even have to do a full body shot if you don't want to! But there's not much point in getting too much into the hows of how to draw, exactly, since that's not what this walkthrough is for, so I'll just touch some on some other aspects. As I've mentioned above, you'll want to save all your images as transparent PNGs or, barring that, PNGs with a strange color in the background. AND MAKE SURE ALL YOUR IMAGES ARE THE SAME SIZE! So if your first pose for your main character is 450x450, make sure ALL your images for that character are 450x450. It will just save you a lot of pain in the long run if you do this, trust me okay?

Basically, draw yourself the pose you want. I'd start with your default pose, the one that your ghost will return to when idle and the one you'll see the most. You'll want to save the default for your main character as surface0, and the one for your side character as surface10. Make sure to keep your eyes and mouth on separate layers in your file, so you can easily turn them on or off.

Now, up there you saw that there were frames set aside for the blinking and talking animations. Take a good look at those frames.

Notice how you can see only the eyes and some of the background in each frame? These frames are overlaid over the bottom frame to create the illusion of movement in surfaces.txt. To create/replace these frames, you will need to do the same thing.

To do this, once you have your default pose finished, draw yourself two frames for the eyes - one half closed and one closed. Do the same for the mouth - one half open and one open.

Now, turn on all the layers so you see all your eye frames at once.

What you're going to want to do is select the area around your eyes so that all of your eye frames are inside.

Then turn off your eye frames. You should have a selection that's just the background color of your default frame.

Like so. Hit copy merged or copy in your program, either way, and paste it into a new layer. Turn off all your layers to see how it looks. You should have a small piece of your default background on a layer by itself.

Now, all you have to do is turn on your half-eye frames over this tiny background snip, save it as surface1001, and then repeat for your closed eye frames and surface1002. Then do the same thing for the mouth frames - select your background, copy it, paste it, then turn off and on your mouth frames as you need and save them as the needed files - surface1101 and surface1102.

You can use this basic method to do a lot of different little animations if you want. Just separate your moving pieces onto new layers and turn them off and on as you need. Do note that if your movement breaks your silhouette though that you'll need to use replace in surfaces.txt, but I get more into that in the file itself.

Help, this is too hard! I can't get it to look right!

That's okay! If worse comes to worse and you just can't get it to work, you can delete the eye and mouth frames entirely, leaving your ghost with only stationary poses. I'll explain more about that option in surfaces.txt when you get to it.

Alternately, how do I add more talking/blinking frames to my other poses?

As you probably guessed, it is essentially the same process as above! But make sure to read surfaces.txt carefully for how to code such a thing.

Once you've finished your default poses, the hardest part is over! From now on, all your images are one single, stationary image. So, draw yourself the pose you like and save it over one of the images. For example, save your angry pose over Girl's angry pose, 1507. Save your bored pose over Girl's bored pose, 1509. Do this until you've replaced all the base images for Girl, then do the same for Triangle, with your characters and poses as you see fit.

If you do decide to do different poses or expressions for each than what I have listed (getting hit for thoughtful, for example, or sleeping for bored, or superhappy instead of worried), then make a note of each one. You'll need to know which files are what for scripting.


Have you noticed that Girl and Triangle's images have a color in the top left corner?

This is because both Girl and Triangle have areas of pure white on them. Compare them, for example, to Charger and Hunter from the Hunter/Smoker ghost.

Because Charger and Hunter have no pure white on them, they don't need to have a dot in the top left corner. If YOUR characters DO have a lot of pure white on them, put a dot in the corner like so of some strange color. This will make it so they don't go transparent or look odd.

The reason you do this is because the top left pixel of any image (0,0 in xy coordinates) determines the transparent color of that image. So for example, if the top left pixel is blue, then all blue in your image will be transparent. If the pixel is white, all white will be transparent. You see what I'm getting at. A dot in the corner will take care of this for you. You can also shade down your pure RGB 255 white to RGB 254 instead.

PNA files

You may be wondering what the deal was with those pna files you deleted when we started. A PNA file is essentially an alpha channel for your image. It tells the program what is solid and what is transparent. What's the point, you may be wondering, when the program does that fine on its own without a pna?

Well, without a PNA, your line edges are going to look jaggedy. Here's an example.

Look at the details of Jockey here, particularly the edges around her feet, sweater, and the music notes. Let's add some PNA files.

You can see that the edges look a lot smoother. Now, if you don't care about your ghost having raggedy edges, then feel free to put this entire business out of your mind and move on to surfaces.txt. But if you want to have a smooth ghost, you'll want to make pna files for your images. But how to do so? It's very simple.

What you're going to want to do is create a silhouette of your image. Compare here the Girl on the left to the Girl on the right. It's a simple black and white silhouette of her. You can create this silhouette a variety of ways, like locking the transparent pixels on the layer and coloring it all white, then filling in the background as black, or selecting the image with the magic wand and filling it as white and the background as black, or using hue adjust to turn it white and fill the background as black. Whatever can get you this result is all that matters.

Once you have your silhouette, save it in your shell folder. You're going to want to rename it surface[number].pna. So, if you made a silhouette of surface1101.png, you'd want to save it as surface1101.pna. To change a file extension, turn on the option on your computer to see file extensions, then just rename your silhouette png to a pna. Your computer may warn you the file will become unusable, but ignore it. Once you reload your ghost, you should see the difference!

As for which files you want to make a pna file for, that's up to you. Anything that has a raggedy edge can be fixed with a pna file. Some files don't need them though, like your eye or mouth frames for the most part.

Once you've finished all your images, great! Reload your ghost via the Utilities - Reload Ghost option, or use the Developer Panel to Reload the Shell. You should see your images replace the template's! Of course, there's still the matter of surfaces.txt to attend to, so let's move on.

Ah, I almost forgot! There is a thumbnail.png within the shell folder. It'll show a thumbnail image of your ghost when the user hovers over the ghost in the "Choose Ghost" menu. Just make a little preview image for your ghost and save it over the thumbnail.png file.

<--Phase 1 - First Steps

Phase 2 - Surfaces.txt-->