Clothing

Alright, I really have to sit down and just write this up. Now, if your ghost moves around or animates a lot, then this section won't be of much use to you. Feel free to move on. However, if your ghost is almost entirely stationary, or if you're doing something like a FLELE shell, then hopefully this page will be helpful.

Clothing is basically what it sounds like... they're accessories you can put on or take off your ghost as you please, set up in their own special section in the right-click menu. From a technical standpoint, clothing basically layers a new image on top of your base one. So if you had a ribbon as a bit of clothing, it would basically just layer a ribbon image over your base. This is why clothing is a bad idea if your ghost is going to move around a lot, or basically at all - the clothing will NOT move with your ghost. Also, I'm pretty sure that any animations your ghost will have, like blinking or talking, will also overlap over any clothing item you have. So, if you had a pair of glasses for example, the blink frames will clip over it whenever your ghost blinks.
I actually just did a check on this, and it looks like you CAN have glasses and such layered over animations, provided you set up your intervals far enough along in the files. OR maybe SSP updated enough to compensate for the issue, or maybe it was just my old computer, or whatever. I'm not sure. BUT overlaying clothing over a blinking animation is a doable thing! Maybe also talking but I'd have to check.

Clothing is usually little accessories or doodads, but that's not all it can be. I've seen shells where there was a naked base and the clothing was all done via the clothing menu, so you can change outfits on the fly. I've also seen ones where the clothing item can change almost the entire base image to a different pose or outfit. So you could potentially do a lot with this feature, if you're creative. But you do have to plan ahead accordingly.

Clothing is only available if you're using SSP, so users using Materia or CROW to run their ghosts will be out of luck. I estimate the odds of anyone reading this using anything other than SSP to be incredibly, incredibly low, however.

Before we start, you'll want to make the images you'll be using for your clothing. These will be set up as surface[number].png files in your shell directory just like the other pieces of your ghost. You might want to set aside a certain span of numbers for clothes just to keep them organized, like putting all clothing items in the surfaces3000-4000 range, or something like that. Here are some bits of clothing from my Jockey FLELE shell for example.

As you can see, they're just images overlaid onto the base. You will DEFINITELY want to make pna files for clothing. More on pna files in the making images section.

Now, coding for clothes is going to require two files in your shell folder this time - surfaces.txt and descript.txt. You may have briefly glanced at descript.txt while doing early set-up for your ghost, and if you weren't messing with the menu too much, you probably didn't pay much attention. Well, now descript.txt is going to be much more important!

surfaces.txt

But first let's start with surfaces.txt. As with your shell in general, surfaces.txt takes the pieces of your shell and tells the ghost how to put them together. General shell coding is referred to as SERIKO, but clothing coding is referred to as MAYUNA. If you've looked at surfaces.txt before, you know that a Surface generally looks something like this.

Surface0
{
element0,overlay,surface0000.png,0,0

//Blink
0interval,random,4
0pattern0,-1,10,overlay,0,0
0pattern1,0102,5,overlayfast,0,0
0pattern2,0101,10,overlayfast,0,0
0pattern3,-1,3,overlay,0,0
}
With added intervals for whatever animations or things you may have set for that Surface. As a quick reminder, an interval is an animation, and a pattern is the frames that go into that animation. In the example above, you can see 0interval, meaning "this interval is number 0", and below that, you can see 0pattern1, meaning "this is frame number 1 in interval 0", 0pattern2 meaning "this is frame 2 in interval 0", and so forth.

In the surfaces.txt file, I talk about the various SERIKO functions you may use for intervals like always, stop, runonce, random, and the like. There are four SERIKO things used for clothing (and only for clothing, as far as I've seen... maybe someone can find some other creative use for it someday?), which are bind, add, reduce, and insert. Bind is for intervals, and add/reduce/insert are for patterns.

bind - Overlays the clothing image on the base image. This is only used for clothing items, as far as I know.
add - Overlays the clothing image on the base image, adding that image to the base's general surface. What this is handy for is if your clothing is in two pieces. For example, let's say you have a piece of clothing that replaces the body with a suit, but you also want to add a tophat. You'd set up the suit first in your pattern with replace, then use add to add the tophat to the base.
reduce - Removes the overlaid image's area from the base image. Basically, picture making a square clothing image over your ghost's chest. When you set it to reduce, that item of clothing will make a square hole in the base image's chest you can see through! I have no idea what you'd even use this for, honestly.
insert - This one gets complicated. This is basically used to stack clothing so they layer properly... so if you had an apron that needed to go over your ghost's body, but under your ghost's arm, you'd use insert to do that. I think. I haven't really experimented with this myself, so I'm not really sure exactly how you'd get it to work.

So let's add a simple bit of clothing to a surface. It'd look something like...

Surface0
{
element0,overlay,surface0000.png,0,0

//Clothing item
910interval,bind
910pattern0,400,0,add,0,0

}
Now, breaking this down, we have...

910interval,bind

This sets up an interval with the number 910 using bind. After that...

910pattern0,400,0,add,0,0

We have the pattern of the interval. You can see it goes 910pattern0 - basically saying, "this is frame 0 of interval 910".

After that, we have 400 - this is the filename of the image you'll be using for this bit of clothing. So if you saved your ribbon as surface400.png, you would put 400 here.

After that, there's a zero. I remember looking to try and find what this number meant before without much luck, but for many Japanese shells it's set to 2, and in English ones it's set to 0. It doesn't seem to make much difference either way. So just pick one.

After that, we have the animation method you're using. As mentioned above, for clothing items you have add, reduce, and insert.

After that, there's 0,0, which are the XY coordinates for your image. If your clothing image is smaller than your base image for some reason, you'll want to put the right coordinates here for where you want your frame to go. The easy way around this is to just make all your images the same size. If you do that, then you'll never have to change 0,0 to anything else.

For a simple single overlaid clothing image, that's all there is to it! However, while I think it's actually impossible for clothing to be animated, that doesn't mean that all your clothing items can only have one frame. Here's the example I mentioned in the add section above.

//Suit and Hat
164interval,bind
164pattern0,replace,7601,0,0,103
164pattern1,add,7603,0,0,0 //(hat)

Here you can see the interval gets set up with bind, then the first frame (164pattern0) uses replace to replace part of the base image with surface7601.png. Then the second frame (164pattern1) uses add to add the tophat, surface7603.png. So if your clothing has multiple parts, you can use add to put them all together.

So now that you know how to format a clothing item line, you're going to want to add that clothing item to all the surfaces where it'd apply. There is even a shortcut to do that! You can apply certain things to multiple surfaces at once. Here's an example from my Jockey FLELE shell.

surface0,surface1,surface6,surface7,surface8,surface25,surface35,surface45,surface46,surface55
{
collision0, 98,66,120,93,stop_button1
collision2, 56, 62,93,102,play_button
collision3,130, 167,145,195,k_window
collision4, 101,111,132,167,menu
collision5, 66,200,128,223,clear_button
collision6, 58, 44,111, 58,stroke_p

//Headphones
910interval,bind
910pattern0,00400,0,add,0,0

//Hair Ribbons
901interval,bind
901pattern0,0401,0,add,0,0

//Axe
903interval,bind
903pattern0,0402,0,add,0,0
}

And so on. As you can see, this set of collisions and binds applies to all the surfaces listed at the top there. So instead of copypasting the same bit of code into each surface, I can just put it here once and then apply it to all those surfaces at once. This is ideal for clothing, as mentioned, or collisions. Keep in mind that this shortcut only works if your ghost is mostly stationary. If you add a clothing bind to a totally different pose, your piece of clothing is going to be way off because that's not the pose it was meant for.

You can however use this basic method multiple times to apply collisions or clothing binds to different sets of poses, provided you change the values appropriately. So if you have five poses with your character sitting down, and five with them standing up, you could use this shortcut method to apply the same proper collisions across the five sitting down poses, then make a new shortcut set to apply a new set of collisions to the five standing up poses. So it'd be something like surface0,surface1,surface2,surface3 {sitting down values} then surface10,surface12,surface13,surface14 {standing up values} if that makes sense. The poses still have to be relatively similar to each other in each set though, especially so when clothing is involved.

If you're applying a lot of values to a lot of sequential Surfaces, you might want to use surface.append instead. See the page on SERIKO coding for details.

Advanced User Note

I came across this while reading up on MAYUNA to write this page, but you can actually combine animation methods for a given interval. It'd look something like this.

0interval0, bind+always

Which means that an animation would always run once the clothing item is put on the ghost. Or

0interval0, bind+random,5

Meaning that the animation would run randomly ever 5ms when the clothing item was put on. You could even combine three at once.

0interval0, bind+runonce+random,5

Meaning when the clothing was on, there'd be a random chance it'd do the specified animation once. I'm pretty sure this only applies to bind, and I'm not entirely sure what the application of it would be, but I'm making a note of it anyway.

Anyway, once you have surfaces.txt all set-up, write down the interval numbers you gave all your clothing items and what they go to. For example, for Jockey up there, I'd write down 910, 904, and 903, since those were the numbers I gave the intervals for her clothing. We're going to need that information for descript.txt!

descript.txt

Descript.txt determines how the right-click menu looks on your ghost. There's not too much need to mess with it aside from aesthetic reasons unless you're setting up clothing. Descript.txt will set up the clothing tab for your ghost, including sections of clothing, whether clothing starts on or off, whether clothing can overlap with other clothing, and a lot of different things.

I left a snip of dress-up code in the descript.txt of the template, but I'm gonna try and break it down a little further. Most clothing items are going to be split into groups, or categories. Ribbons, for example, or weapons, or ice creams, or headphones, or t-shirts, or things that go on the face, or whatever. Generally, the dress-up items you made will probably fall into some kind of category. This is good for organizational purposes, of course, but there are two settings you can have for groups of clothing that you'll want to think about.

mustselect - One of the items in this clothing group must be selected. If you have a different variety of hands holding items, for example, you'd want that group to be under mustselect, because otherwise your ghost will be missing a hand. Likewise, if you have a naked base you're layering clothing on, you'd want one clothing group under mustselect, so your ghost isn't naked. Or maybe you have a head as your base and have different bodies as clothing items - you'll want the bodies to be under mustselect, otherwise you'll just have a head if one isn't chosen. One item from this clothing group will always be on.
multiple - Multiple items in this clothing group can be applied at once. This is probably the most common one you'll be using. So if you had ribbons, glasses, and makeup in one group (like "Face"), you could put all of them on your ghost at once if you want.

If you don't use either of these, then the clothing group will go to the default setting, where if you pick Clothing A in one group, Clothing B in that group will turn off.

A clothing group can only consist of one item if you want! So if you just have one pair of glasses, you can make that its own group.

So, now that you've thought about which groups you want to make, let's start. If you look in the template, you'll see where dress-up coding starts, but if you're just editing a vanilla descript.txt file, you can stick this at the end.

//Clothing Name Category
sakura.bindgroup910.name,Headphones,Heartshape
sakura.bindgroup910.default,0
Using Jockey again as an example here. Let's break down what's happening.

sakura.bindgroup910.name

As you may recall from other pages, sakura is used to refer to the main character of your ghost. When you do your second character, you'd use kero instead. After that, we have bindgroup. Basically, you're going to want the interval number from your surfaces.txt file here for this bit of clothing. In this example, the interval I gave this bit of clothing for Jockey in surfaces.txt was 910. So here, I write bindgroup910. If you had a pair of glasses under 804, you'd write bindgroup804, and so on.
After that, we have name, basically saying "this is the name for this bind".

Next after that, we have "Headphones,Heartshape". This is basically Group - Item. So I have a group for headphones, called "Headphones", and the name of this particular pair of headphones is "Heartshape". When you look in the dress-up tab, you'll see "Headphones - Heartshape" in the menu as an option.

sakura.bindgroup910.default,0

After that, we have this line here. It is very similiar to the above - sakura.bindgroup910, meaning this applies to the same clothing item of the main character's. After that, we have default. Altogether, this basically says "this is this piece of clothing's default state". What this line does is determine whether or not the piece of clothing is ON or OFF when you first load up your shell. 0 is off, 1 is on. If you have a mustselect group of clothing, you'll definitely want to make sure that at least one of those items is set to 1.

And that's the basic format of it! Basically replace the bindgroup number with your clothing's number, give each one the right Category/Name, decide whether it starts on or off, and rinse and repeat.

sakura.bindgroup901.name,Hairbands,Blue Ribbons
sakura.bindgroup901.default,0
sakura.bindgroup903.name,Hand,Axe
sakura.bindgroup903.default,0
sakura.bindgroup913.name,Friends,Hunter
sakura.bindgroup913.default,0
sakura.bindgroup906.name,Friends,Smoker
sakura.bindgroup906.default,0
sakura.bindgroup907.name,Hand,Empty
sakura.bindgroup907.default,1
As you can see, once you get the hang of it, you can just copy paste away. You don't even have to list the bindgroups in order! Although it will probably help you organizationally to do so. You can see here that the last one, "Hand,Empty", has been set to 1, meaning ON. Jockey's hand is a mustselect group, so she has to start with one of those hands on when you first load your shell.

Anyway, add in all your clothing items following this basic format. Next, we're going to arrange the menu. We'll use Jockey as an example again.

//Menu Arrangement
sakura.menuitem0,910
sakura.menuitem1,911
sakura.menuitem2,-
sakura.menuitem3,901
sakura.menuitem4,909
sakura.menuitem5,902
sakura.menuitem6,-
sakura.menuitem7,912
sakura.menuitem8,900
The first part, sakura.menuitem[number] should be fairly self-explanatory - it's the number of the item on the menu for your main character. So menuitem0 is the first thing in the menu, menuitem1 is the second, menuitem2 is the third, and so on and so forth. After that, we have a number. It's the same number you used for your bindgroup just a second ago! So here we have sakura.menuitem0,910 which corresponds to bindgroup910 above: Headphones,Heartshape. Change 910 to whatever the bindgroup number is for whatever you want your first item of clothing to be. As you can see, while the menuitems have to be in order, they can link to bindgroups in different orders. So it goes 910, 911, 901, 909, and it's fine. Organize your clothing items the way that looks most pleasing to you!

Now, you probably noticed those hyphens for menuitem2 and menuitem6. What that does is add a horizontal break, like your standard hr tag.


Like so. Adding a hyphen between your groups makes them look nice and neat and organized. In practice, Jockey's clothing menu looks like this -

So you can see the nice breaks between each category, and how each category looks. Add in all your clothing items as menu items, organize them, space them, what have you.

Once you have that done, we have just a bit more code to go. We're going to define the properties of the groups I mentioned at the beginning. It'll only take a second.

//Layering options
sakura.bindoption0.group,Guns,multiple
sakura.bindoption1.group,Friends,multiple
sakura.bindoption2.group,Hand,mustselect
Now here's where your group names become important. By now this format must seem a bit familiar - we have sakura for the main character, and bindoption.group. Bindoption.group here is basically saying "here is the special property for this bind group of the main character's". You'll want to number them sequentially for however many special groups you want to make.

After that, we have a word. In the example, we have three - Guns, Friends, and Hand. This word would be the first word you set for bindgroup. For "Headphones,Heartshape", the word you'll want is Headphones for example.

After that, we have the tag specifying the group's property. As I explained above, you can have multiple (meaning you can have more than one item in this group on at once) or mustselect (meaning one item in this group must always be on).

You ONLY have to specify a property for a group if it needs it! If your group of items isn't a multiple group or a mustselect group, then you do not need to add it here! You ONLY need to add groups with these special requirements. If none of your groups need these special tags, then you don't even have to do this at all!

And with that, you're mostly done with descript.txt! If you have separate, unique dress-up items for your second character, you'd repeat the above steps but replace sakura with kero. But it'd be the same thing, essentially. Save your file, reload your shell, check out your right click menu and see how your clothing items look. Test them out, layer them, adjust them, and enjoy them!

<--Phase 2 - SERIKO Coding

Phase 3 - Balloons-->