Surfaces.txt

I mentioned in the last section that a Shell for your ghost is made up of two things - the images and surfaces.txt. What surfaces.txt does is tell the ghost what to do with each of the images you've just made. Essentially, your images are the pieces, and surfaces.txt is what will put them together.

Most of the details about setting up surfaces.txt are going to be in the file itself. Open up surfaces.txt in Notepad++ (if you haven't downloaded the template, you can read my annotated surfaces.txt here). You'll notice at the top of Notepad++ a number of menus, you're going to want to go to Language - C - C.

A good chunk of the file should turn green. You'll want to do this for most of the more intensive code files you'll be reading.

Read through the file carefully. Read through it multiple times if you have to. If you've just been replacing my images in the last step, there isn't much you're going to need to change in this file, but you should have an idea of how it works in case you do want to do your own thing with it someday.

I will however put some images here that may make it easier for you to visualize some of what I talk about in surfaces.txt. One of the early things I talk about are collisions on a ghost, which is where a ghost's hot spot is for your mouse. One way I recommended finding the right coordinates for your collision is by drawing a rectangle over the area. Here's an example with Smoker with rectangles drawn over her collision areas.

I can use these rectangles to find the coordinates I need to mark out her hotspots in the collision. All I have to do is point the cursor at the top left corner of the rectangle and write down the coordinates, and then at the bottom right corner and write down THOSE coordinates. I can then plug them in to surfaces.txt as instructed. If you don't know how to get the xy coordinates in your graphics program, you can open the image in MSPaint instead. You should be able to see the coordinates for your pointer in the bottom bar.

Once you have the coordinates, you can delete the rectangle frames or just make them invisible to get them out of the way. If you're going to make a balloon, this rectangle method will be invaluable, so keep it in mind.

Here are Girl and Triangle's collisions marked out with rectangles just to give you another point of reference.

If you go into these images and find the coordinates, you'll find they match up just so with the coordinates in surfaces.txt. To set up collisions for your ghost, you'll have to find the coordinates for whatever hotspot you have in mind! But honestly, it's not too hard I think.

It IS too hard!! What do I do????

If you absolutely can't figure out how to draw the rectangle, find the xy coordinates of the two corners, and put them into the collision bit of code in surfaces.txt, then you can delete the collision block of code entirely. This will make it so your ghost can't be pet or stroked or hit or whatever though, but if you are absolutely at your wits end, it is an option.

In surfaces.txt, I explain a lot of different Seriko functions. Seriko is a term used for the kind of coding that surfaces.txt uses, which isn't quite the same as any of the other files you'll be editing. Most beginner users don't have to pay it any mind, as all you'll need to do is follow the template and replace the right images, and most surfaces.txt coding will be done for you. Still, understanding how Seriko coding works can open many doors for you in terms of making your ghosts do unique things. At some point I'll do a more thorough page about exactly how Seriko code breaks down, but in the meantime, those curious can read this page called Ghost Documentation, a Japanese site that covers a lot of Seriko coding. Most of what I learned came from here. Unless you speak Japanese though you'll have to run it through Google translate, but I found it manageable enough. It's a very handy resource.

While working with surfaces.txt and your images, you'll probably want to have the Developer Panel open (from the first steps section if you recall) so you can easily reload your shell and test it to make sure everything works. Here is the Developer Panel again.

Reload is where you want to go to reload your shell, but we're also going to take a look at Surface Test. That will bring up a small window that looks like this.

You'll see three columns. On the left is the character in question. If you have your main character (0) highlighted, they will change their surface if you click something in the next column. Try clicking one of the second column numbers to see what I mean. Your secondary character is 1, and once you choose their number in the first column, you can also change their pose by selecting a different surface from the second column. The other numbers in the first column are "extra" slots you could say, undefined "characters" that can be called by using \p[number]. Charger in my HunterSmoker ghost for example is called using \p[3], and the Rabite and Eggplant are also called with \p. These p characters aren't real characters like 0 and 1 are, but with clever trickery you can make it very hard to tell for the user.

The second column are the surfaces that have been defined in Surfaces.txt. You should see a nice list up to twenty, just the number we defined. After that, you'll see another list of numbers with asterisks behind them - these are the actual png.files. You'll see if you choose one that's an eye frame or something.

Changing a pose with Surface Test is temporary, so don't worry. It's just a way to see how a Surface looks. Always test your surfaces this way! Especially if they have complicated animations of some sort.

The third column of the Surface Test window are the intervals defined for that surface. You saw some intervals in surfaces.txt. Because the only poses that had intervals defined were 0 and 10, you'll see that only 0 and 10 in the second column will have anything in the third. If you have unique animations set on certain intervals, you can test them via the third column.

Another thing that came up in surfaces.txt that might benefit from some pics is the section about Replace. Here's the shot of Smoker I used as an example for replace. See the rectangle I drew around her mouth?

Much like with finding collisions, you need to find the right coordinates for replace to work. If your mouth breaks the silhouette of your character at all, you'll need to use replace to animate it. Here are some examples with Smoker.


Because Smoker's cigarette sticks out of her mouth, it sometimes caused problems as you can see. Any kind of sideview like this where the mouth moves and changes the profile will need to use replace instead. And of course, any kind of shift of the profile will need it as well, such as moving an arm, moving a leg, hair blowing in the wind, that kind of thing.

ALWAYS make sure your top left pixel is either blank or a weird color if you're doing this, otherwise that pixel will flicker during animation. I've made this mistake a few times and it's v irritating, just avoid it if you can by making sure the top left pixel is empty.

Once you have surfaces.txt mostly under control, there's one last thing to deal with with your shell. You're going to want to fill out descript.txt. Open up the file and read through it. I've already left a lot of commentary in it to give you an idea of what you need to do, but the mentions of a menu may be confusing. The menu referred to in descript.txt is the right click menu, or this menu.

You can use descript.txt to customize the look of this menu for your shell. As described in the descript.txt commentary, you adjust colors by shifting the RGB values around. Play around with values and see what looks best. Please for the love of god try to make this readable. bbot actually did a whole series of posts about unreadable layouts on Tumblr, which while not the exact same thing as we're dealing with here, still applies when it comes to color choices. Don't do things like light-grey on light-grey. Use a contrast calculator.Your users will really appreciate it.

The mention of a menu background image may have intrigued you. Yes, you can set an image as your menu's background, but again, consider carefully the legibility of the text against whatever image that you choose. You can see in the shell folder that the template's images are just simple blocks of color, with the exception of the sidebar which has a few lines for variety. You can do anything you want with these images, so feel free to experiment by replacing them with different things. Just again, try to make it readable in the end.

Once you've filled out descript.txt, you are done with your shell! Finally! Test your ghost and see how the shell looks. Test your collision areas to make sure they work. You can also use the Development Panel to show you where the collision areas are if you really want to reconfirm.

Make a note of the poses and expressions you made for your ghost and what numbers they correspond to, for example, an angry main character pose is Surface7, a sad side character pose is Surface14. You will need these numbers to code your dialogue in Phase 4.

How do I make more shells for my ghost?

Basically, make a new folder under ghost\shell with your new shell's name (like... "cowboy" or "princess" or "congressman") and repeat this entire process again with your new shell.

While shell-making is complicated and time-consuming, it's still somewhat easier than actually coding up a whole ghost, so you'd be surprised how many (Japanese) sites out there offer alternate shells for existing ghosts by completely different artists. FLELE shells are a good example of this.

<--Phase 2 - Making Images

Phase 2 - SERIKO Coding-->