SERIKO Coding

This page is mostly meant to be a sort of organized resource for SERIKO coding methods you'd use while filling out surfaces.txt. I already cover pretty much all of this in the annotated surfaces.txt file included with the template, but this page might be a little easier to read with the extra formatting and such. So if you've already finished your shell, you don't have to worry too much about this page! It's just some extra information for convenience's sake. You can go ahead to making a balloon or or doing clothes or coding your ghost if you like.

Much of the info on this page came from this Japanese resource breaking down the different SERIKO methods, and some bits from Disc-2 as well. More current and extra information not mentioned here can be found at the UKADOC project's surfaces.txt page. UKADOC and Disc 2 are also in Japanese, so you'll need to run it through Google Translate. Unless you can read Japanese, anyway.

As I mentioned on the surfaces.txt page, SERIKO coding basically puts together your individual png images in your shell directory into a functioning "pose". I talk about this a little in the surfaces.txt file, and on the page on clothing, but let's break it down.

When you look in surfaces.txt, you'll find a lot of things that look basically like this.

Surface0
{
[code]
}
Basically, surfaces.txt is broken into Surfaces, with a capital S. Each Surface is a single pose that can be called in ghost dialogue with the number associated with it. So Surface0 would be associated with the number 0, and you'd use 0 to call that pose in dialogue (I get into this more in the SakuraScript page). Surface14 would be called using the number 14, and you'd use \s[14] to call it in dialogue. Each Surface is a self-contained pose. In the template, you will see that Girl and Triangle each have ten Surfaces defined for them, but you can have as many or as few as you want for your ghost, depending.

Now, that vague [code] block in there can look very different depending on the complexity of any given Surface. It can only be a single line for a stationary single image, or it can be many many lines long with many different intervals set for a whole arrangement of different moving parts. It depends on what you want to do!

Elements

Let's start first with elements. Elements are a permanent, fixed image. You can think of an element as a "base" on which to layer things if you like. A line for an element would look like this.
Surfaces0
{
element0,overlay,surface0.png,0,0
}
Breaking down that line of code, we have...

element0

This says that this is an element numbered 0. If you have multiple elements, you'd want to number them sequentially. So you'd have element0, element1, element2, and so on. In practice, it'd look like
Surfaces0
{
element0,overlay,surface0.png,0,0
element1,overlay,surface1.png,0,0
element2,overlay,surface2.png,0,0
}
And so on.

overlay

Overlay is the drawing method we're using for this particular image. I'll get more into drawing methods in a second, as they're only really relevant when you're working with intervals.

surface0.png

This is the image file you want to use for this element. So this would be your base image.

0,0

This is the XY coordinate alignment of the image. If your image is smaller than your base image, you may have to adjust this. If all your images are the same size though, you won't ever have to adjust these two numbers (see, this is why I said to make all your images the same size).

Most SERIKO coding is formatted in this basic way. While most of the time you can use an element to define a base image, you don't necessarily have to. You can also just use an interval set to always, but elements seem a little less messy. They can be hard to apply animation methods to though, but it's something that'll probably become more clear to you as you explore your surfaces.txt animation options. Sometimes you just have to experiment.

Intervals

Intervals are the real building blocks of any Surface, and you're likely to see many of them in any given Surface, depending on its complexity. An Interval is basically an animation, although that word might be a little misleading. "Animation" in this context can mean a stationary image applied at different periods of time, or the removal of an image, or a lot of different things.

I guess you can kind of think of an interval as a process, a thing that takes anywhere from one to a dozen steps to complete. I've seen it described as a paragraph, with the code within it the sentences that make up the paragraph. Basically, intervals are extremely flexible, and you can do a LOT of different things with them.

An Interval is broken up into Patterns. You can think of Patterns as steps, or frames, or directions, or the sentences of a paragraph as I mentioned. The number of Patterns in an Interval depends on what you want that Interval to do.

A very simple Interval may only have one Pattern, like this.

20interval,always
20pattern0,182,0,overlay,0,0

Or it can have many Patterns, like this.

0interval,runonce
0pattern0,0,15,move,1,0
0pattern1,0,5,move,2,0
0pattern2,0,7,move,3,0
0pattern3,0,10,move,4,0
0pattern4,0,15,move,5,0

While certain things may change depending on your animation method, this basic format of an Interval stays largely the same.

20interval,always
20pattern0,182,0,overlay,0,0
Let's break this one down.

20interval

This says "this is interval number 20". Each Interval you define should have a different number. I can't remember the exact limit, but it seems unlikely anyone will reach it. Let's say you can define Intervals up to 128, if you like.

Intervals are layered on top of each other in order, so that means if you want your shell to go head, eyes, hair, then you'd want to make sure that your head interval is 20, your eyes interval is 21, and your hair interval is 22, so they layer properly. If you're going to have a lot of moving pieces, keep track of your intervals and layer them in order!

always

This is the animation method used for this particular interval. In this case, it's "always", but there are many different ones. I'll get into them in a second.

20pattern0

This line says "this is frame number 0 of the interval numbered 20". So this is the first step in your process. Your second step would be 20pattern1, your third would be 20pattern2, and so on and so forth.

182

This is the number of your image file you are using for this pattern. So if this is an eye frame, you'd want to put the right number in here. This would be surface182.png, for example.

If you want to return to your base image, you'd replace the image number with -1. That will undo anything that pattern has done. So at the end of a blink, you might see 2pattern1,-1,10,overlay,0,0 for example, making sure that the last frame it ends on is the base default frame.

0

This is the delay on the frame. This mostly would come up in animation contexts - if you for example wanted a 5 second delay before this image appears, you'd put 5000 in here. If you want this image to appear instantly, you'd put 0. You'll probably have to experiment with timing for each of your frames to get the look you want.

overlay

This is the drawing method used for this particular frame. All your frames don't have to use the same drawing method! But more on that below.

0,0

And this is the same XY coordinate thing I mentioned above.

That's the basic format of an Interval! As we go along, I'll list examples of each thing, and you'll see how consistent it can be.

Animation Methods

Animation methods apply to Intervals, and mostly determine how often something will run.
0interval,sometimes
sometimes means that the animation defined in that Interval's Patterns will happen sometimes. Exactly how long "sometimes" is varies. You may want to experiment with it and see how often it gets called. You could use this for blinking, but I think the random tag looks better. But if there's any kind of thing you want to happen every now and then, like your ghost fidgeting, or looking around, or a butterfly going by, you could use sometimes for it.
0interval,rarely
rarely means that the animation will trigger rarely. As you can see, most Interval methods relate to time. Rarely is pretty rarely from what I recall. Again, you may have to experiment to see exactly how long rarely lasts.
0interval,random,4
random means an animation will trigger randomly. Note that this has an extra value - 4. That number means that the animation will trigger randomly every four seconds. You could change that number to whatever increment you want, so you could have random,8 or random,10 or random,3 to have the animation trigger every eight, ten, or three seconds. This is particularly good for blinking, I think.
0interval,always
always means the animation will loop forever. Essentially, it will always be happening. I use this primarily for interval stacking, but that's fairly complicated. I'll get into it in a bit.
0interval,runonce
runonce means that the animation will run once. This is useful for animations you only want to go through once, like someone getting hit, for example, or falling down, or falling asleep.
0interval,never
never means the animation won't be called, normally. This gets a lot more use than you might expect. You can use this with start and stop for interval stacking, as mentioned above. But just hang in there, I'll get to it in a second.
0interval,bind
bind is meant only for clothing. More on clothing on the clothes page.
0interval,talk,4
talk is for your talking frames. You see it also has a number following it! That number determines how many characters the ghost will read before moving onto the next talk frame. So in this case, your ghost will animate their mouth moving every four text characters.

Talk usually goes along with alternativestart, which is a Pattern drawing method, so I'll explain it here. Here's an example of a Talk frames setup.

1interval,talk,4
1pattern0,0,0,alternativestart,[2.3.4]

2interval,never
2pattern0,1102,10,overlay,0,0
2pattern1,1101,13,overlay,0,0
2pattern2,-1,10,overlay,0,0

3interval,never
3pattern0,1101,14,overlay,0,0
3pattern1,-1,10,overlay,0,0

4interval,never
4pattern0,1102,14,overlay,0,0
4pattern1,-1,10,overlay,0,0
Look at frame 1 of Interval 1 up there - you can see it has "alternativestart" in the method area, and then some numbers in brackets. Then below you can see there are three more intervals set to never - 2, 3, and 4. What alternativestart does is basically randomly call one of those listed intervals. So whenever 1interval is called (basically, every four characters in a text balloon), it will randomly run either 2interval, 3interval, or 4interval. You can add numbers to those brackets or take them away if you want, so you could do things like [2.3.4.5] or [2.3] or whatever.

Talk is meant for talk frames, but technically, you could do other things with it. Maybe every four characters in a balloon you want your character's eyes to pulse, or their diodes to flicker, or something like that. You can be creative with this.

Note that the three intervals up there are set to never. This is one of the uses of that method! Note also that their last frames always set the image to -1, to make sure the ghost goes back its default pose.

There is a counterpart to alternativestart called alternativestop, which will stop any of the intervals in the brackets as you can probably guess. I'm not entirely sure what use that would be though.

0interval,yen-e
yen-e is a method I've never really used, but I'll list it here anyway. What this basically does is run this interval whenever \e appears in Sakurascript. Given that almost all lines of dialogue end with \e, this means it'd run all the time. Maybe you could use it to clean up if you have a lot of animations going? I'm not really sure what the real application of it would be, but here it is. Here's an example.
27interval,yen-e
27pattern0,-2,0,overlay
What this would do is stop all animation whenever \e would come up. It does this by using -2 there for the filename. Neither of these things I've ever really used though.

And those are all the animation methods for Intervals I've used! There is another option for exclusive, but I don't really understand how it works, so I don't really feel qualified to talk about it here. It's mentioned in the SERIKO page I linked to at the beginning though.

Drawing Methods

Drawing methods apply to Patterns, and determine the appearance of the image for the most part, although they can also do other things.

3pattern0,1101,14,overlay,0,0
overlay you've already seen plenty of times now. Overlay basically overlays the designated image on your base. This is the one you'll see most often, I'll bet.
0pattern1,2002,5,overlayfast,0,0
overlayfast is very similar to overlay. I think the primary difference is in the opacity of the overlaid frame? I'm not entirely sure what the difference is, but you can experiment with overlay vs overlayfast and see which one looks better to you. I'm sure it has something to do with the transparency of either the base or the layered frame though.
21pattern1,0504,0,base,0,0
21pattern2,-1,800,base,0,0
base is a newer method I only figured out while doing the Gordon FLELE. Basically, what base does is change the base of your pose from one file to another, which has some limited application, but can come in handy. The best example is from Gordon - He was standing at a three-quarter view with one arm in front of him and one arm behind him. Moving the arm in front of him was easy, it just required layering that arm above all the others. Moving the arm BEHIND him was harder, because his body was the base frame and you can't move things behind that. To get it to work, I would use base to temporarily change the base to his back arm (504), then change it back after it had moved. Note the second frame uses -1 to revert back to his original base frame, and that its delay is 800, meaning 800ms would go by before it reverts back using -1.
0pattern0,0,15,move,1,0
0pattern1,0,5,move,2,0
0pattern2,0,7,move,3,0
0pattern3,0,10,move,4,0
0pattern4,0,15,move,5,0

move will move the frame on the desktop, without requiring changing the image. So it'll basically slide your ghost in a direction. In this example, you can see there are five frames, each set to move, and that the XY coordinate changes with each. The X value goes up - Hunter in this case slides backwards five pixels over the course of five frames. You can change the Y value too to have the image move vertically (0,9 for example) and use negative numbers to make them move other ways, like -5,0. You can also change both values to move both horizontally and vertically.

A handy use for move is to have things bob in place without having to make new frames.

21pattern0,0,0,stop,20

21pattern0,0,0,start,23
start and stop are similar methods that work in similar ways, so I'll do both at once. What start and stop do is basically start or stop a designated interval, listed at the end there. So the first line would stop interval number 20, and the second line would start interval 23.

The basic format of a start/stop line is pattern,0,0,start/stop,[interval number].

What you'd normally do is put start/stop within another interval to call a separate one. For example -

21pattern1,171,0,overlay,0,0
21pattern2,170,0,overlay,0,0
21pattern3,0,0,stop,20
21pattern4,198,0,overlay,0,0
In the middle of this animation, this would stop all animation in Interval 20.

The primary use for start/stop I've found is interval stacking, as I mentioned above. What interval stacking does is basically allow me to set-up many moving parts on a simple base that I can then call individually in dialogue using \i[#] tags (see SakuraScript). Hunter's ears are a good example.

//Ears back
20interval,always
20pattern0,182,0,overlay,0,0

//Ears neutral
21interval,never
21pattern0,0,0,stop,20
21pattern0,172,0,overlay,0,0

First, I set up her base image as an element, with no ears. I then set up an interval for her default ears and set it to always. I then set up different intervals, all set to never, with her different ear poses. Then within each of those never intervals, I have a line to stop her default ear interval. So basically when 21interval is called, it stops her default ear interval, thus removing that image, and then overlays instead the lowered ears image. And without a -1 tag, the ears will stay.

This can be used for a lot of different things, like ears, tails, eyebrows, arms, hands, legs, wings, whatever you like. It can condense a lot of possible poses into one Surface.

2pattern0,708,13,replace,0,72
If you can't overlay your frame smoothly over your base, like if your talking frames break your silhouette, then you'll need to use replace instead. What replace does is replace the designated portion of the base image with your new frame.

If you're replacing the entire image, then you probably won't have to change 0,0 at the end, as usual, BUT if you're using replace for a smaller change, like talk frames for example, that you don't want to interfere with other animations, then you'll need to be more precise.

I have some examples of more closely cut images for replace on the surfaces.txt page, but you can see in the example that it's not 0,0 but 0,72. Basically meaning that the image will replace at 72 pixels from the top on the y axis. Finding the exact coordinates of your image you'll need is touched on in the annotated surfaces.txt and in the page on it, so I won't get too much more into it here. It will probably take you a bit of trial and error.

replace doesn't play well with other animations in my experience. It will override other intervals, regardless of how well you layer it. So you may have to do a bit of tinkering to get this to work the way you want.

As mentioned, you don't have to replace the whole image. You can, for animations like being hit or falling down or things like that, but you can also replace small pieces of it. You can use it with clothing for example to change the body or head. You can use this in a few different ways.

There are a few clothing specific drawing methods I talk about on the clothing page, but those are all the drawing methods I've used! There are a few others like interpolate and asis but I haven't experimented with them, so I can't say too much about them.

That should cover the basics of SERIKO coding, but there are a few other tidbits I might as well mention that can go into Surfaces.txt that might come in handy.

Extras

The first one is surface.append. I talk about it in surfaces.txt, but I'll talk about it again here for easy reference. Surface.append basically allows you to apply the same values to a lot of surfaces at once. This is primarily useful for collisions and maybe clothing, depending. For collisions/clothing though, your ghost should stay mostly stationary, otherwise the values won't be correct. This is only a shortcut under certain circumstances.

surface.append500-590
{
[whatever collisions/intervals/binds you want to set]
}
This would append these values to all Surfaces between 500 and 590. There are a few ways you can refine this, however.

surface.append500-590,205

This would append the code to Surface500 to Surface590, as well as Surface205. You can add individual surfaces using commas like this, or multiple ranges at once like 500-590,205-215,400-450 all on one line.

surface.append500-590,205,!507-509

This appends the values to Surfaces 500 through 590, Surface205, BUT it will skip Surfaces507 through 509. You can use ![number range] to exclude Surfaces you don't want the values to apply to.

You can also have multiple surface.appends, so you can have one set for your main character and one for your sidekick character, or one set just for a certain group of poses, and one for another, and so on.

You'll want to make sure you put surface.append at the end of surfaces.txt, since it can't apply all the values until the surfaces are already defined. In the template it's at the beginning, but just cut and paste it back down to the bottom.

sakura.surface.alias
{
6666,[1229,1230,1231,1235]
}

kero.surface.alias
{
6667,[1228,1232,1233]
6668,[1228,1232,1233,1234]
}

sakura.surface.alias (or kero.surface.alias for the sidekick character) basically groups together a bunch of Surfaces under one number or value. In this example, Surfaces 1229, 1230, 1231, and 1235, are all being grouped together under the value "6666". So then when I write dialogue and I call that value with \s[6666], it will randomly pick one of these four surfaces. One way you might use this would be for petting reactions, like with a FLELE. FLELEs always go "..." when you pet them, but you can group together a bunch of different reactions for petting under one group like this that they'll choose randomly from.

You can also use a word to define the alias, so you could put "creepy,[1229,1230,1231,1235]" and then you could call any of these random surfaces in dialogue with \s[creepy]. So if you have a bad head for numbers, you could assign word aliases to all your poses... happy, sad, scared, mad, what have you. I'd be careful getting too crazy with this though, I feel like it could backfire on you at some point.

sakura.cursor
{
mouseup0,Head,system:hand
mousedown0,Head,system:finger
mouseup1,Face,system:hand
mousedown1,Face,system:grip
}
If you messed with the default Emily ghost at all, you may have noticed that when your cursor was over her chest, it changed to a sort of gripping hand instead of a pointer finger. "How do I do that?" you may wonder. Setting up sakura.cursor is how!

What this does is change the mouse cursor. You can see it's split into mouseup and mousedown, and it uses the names you gave your collisions in surfaces.txt. So for example when the mouse is hovering over Girl's head, it uses the system cursor that looks like a hand. When you click and hold, it looks like a finger. Likewise, when you hover your mouse over Girl's face, it looks like a hand, and when you click down, it looks like a gripping hand. You can keep adding unique cursors for all your collisions by sequentially numbering them, like mouseup/down2, mouseup/down3, and so on.

The system cursors you can use for this are "arrow", "cross", "no", "hand", "grip", "finger", "wait", "text", "move", and "help". You can probably guess at what they look like. Feel free to use whatever cursor you think would best match your collision.

To set this up for the secondary character, just change sakura to kero, as usual. You can just stick this at the end of your surfaces.txt file if it's not there already.

sakura.tooltips
{
Head,This is Girl's head.
Face,This is Girl's face.
}
Maybe you'd like a tooltip to pop up when your user is hovering over a hitbox on your ghost. In that case you'd use sakura.tooltips. It works much the same as above!

Basically put the name of your collision first, then what you want the tooltip to say. It may be handy for warning your users about punching your ghost or something, or for silly reasons, I dunno. It's up to you!

Like above, replace sakura with kero for the secondary character.

And that should about cover it I think! Feel free to move on.

<--Phase 2 - Surfaces.txt

Phase 2 - Clothing-->