Let's start by defining a collision area on the surface.

First, add the following to surfaces.txt.

surface0
{
}

This would mean something like, in these braces ({} braces) are settings for surface0.

This is not only for collisions; the animation and element settings that are covered later will also be written in this section.

If you write the following here, it will define a collision area.

surface0
{
collision0,117,71,185,130,Face
collision1,115,174,174,217,Bust
}

As shown above, write collision0, collision1, collision2, in order for each collision area.

Make sure that the numbers are unique within a single surface.

The maximum number of collisions per surface is 256.

The four numbers after that are coordinate specifications.

The sequence of coordinates is the upper left X and Y coordinates, then the lower right X and Y coordinates. The upper left corner of the surface image itself is 0,0.

The last string will be the name of the collision area to be used on the ghost side.

Note that you can set collision areas with the same name (names such as Face and Bust in the above example) multiple times. (For example, if you want to set a collision area with the name Hand, in most cases the areas will be separated for left and right hands. Therefore, the collision definition for Hand will also have to be split into two lines.)

Animation in ukagaka (called SERIKO) is expressed by drawing a series of still images.

Here is a brief introduction on how to set the timing of the animation execution, how each still image overlaps, etc.

Below is an example of making surface0 blink to illustrate animations.

surface0
{
animation0.interval,sometimes
animation0.pattern0,overlayfast,100,50,0,0
animation0.pattern1,overlayfast,101,50,0,0
animation0.pattern2,overlayfast,100,50,0,0
animation0.pattern3,overlay,-1,100,0,0

collision0,117,71,185,130,Face
collision1,115,174,174,217,Bust
}

To animate surface0.png, write surface0 like this, and define the animation content in the braces ({} braces) below it.

animation0.interval,sometimes

The line that starts with animation*.interval defines when the animation with that number will be executed.

The number after the word "animation" is the ID of the animation definition (the timing settings (interval), and subsequent "frame" settings (pattern, etc.))

Animation IDs can be any number and do not have to be sequential, but it is expected that animations with the same meaning will be given the same ID※.

The "sometimes" following animation0.interval is the content of the interval definition.

If sometimes is specified, as in the example, the animation will run on its own occasionally (With a chance of 1/2 per second).

In other words, you are specifying something like "the animation with ID 0 sometimes runs on its own".

See the section on animation intervals in "Shell Settings - surfaces.txt" for what other timing specifications are available.

This is followed by the definition of each still image (frame) that makes up the animation.

Write each pattern in order: pattern0, pattern1, pattern2, and so on. Pattern numbers cannot be omitted or duplicated.

Do not forget to put the ID (animation*) of the animation group at the beginning.

Also, the interval definition line and the series of pattern definition lines should be written consecutively, not in separate places.

animation0.pattern0,overlay,100,50,0,0

The overlay part specifies the drawing method.

Overlay is a drawing method that overlays an image on top of the original image.

Various other drawing methods are also available.

For details, see the section on surface drawing methods in "Shell Settings - surfaces.txt".

animation0.pattern0,overlayfast,100,50,0,0

The 100 part means that surface100 is what is drawn in this frame.

Basically, you can think of it as surface100.png.

If you specify 101, surface101.png is used.

A value of -1 will stop drawing the animation and reset the display to the base image (surface0 in the above example).

animation0.pattern0,overlayfast,100,50,0,0

The 50 part is the display time (unit: milliseconds).

Please specify the time until it switches to this frame.

Note that it is not the display time of the frame itself.

animation0.pattern0,overlayfast,100,50,0,0

The last 0,0 part is the display position of the frame (X coordinate, Y coordinate).

This specifies how much to shift the image from the original image's position.

Positive X values move towards the right direction, and positive Y values move downwards.

element is a mechanism for combining images made of multiple parts and treating them as a single surface.

For example, if all surfaces must be prepared as images such as surface0.png, then if you want to add more facial expressions to a character, you must prepare as many full-body images as there are facial expressions, even if the only difference is a slightly different mouth shape.

However, if it is possible to separate body parts and facial expression parts and composite them, then even if you want to add more facial expressions you will only need to prepare images with the different facial expressions. Thus, the overall shell size will be reduced considerably.

Furthermore, if the eye and mouth parts are separated, you can create expressions by combining different eyes and mouths without having to draw the full expression itself.

The following is an example of an element definition.

surface1
{
element0,overlay,body0.png,0,0
element1,overlay,face1.png,0,0
}

Now "face1.png" overlaid on top of "body0.png" is defined as surface1.

You can add as many parts as you want to overlap.

In this case, surface1.png is not necessary.

element0,overlay,body0.png,0,0

The number immediately following "element" is the ID (serial number) of the element on this surface.

IDs are sequential numbers starting from 0. The smaller the number, the lower (at the back of the screen) the part to be composited.

Note that a png image with a name like surface*.png is considered to be a part below element0.

element0,overlay,body0.png,0,0

The keyword that follows is the drawing method.

It is basically the same as in animation, but some methods that do not purely combine images, such as "start" and "move", cannot be used.

element0,overlay,body0.png,0,0

Specify the name of the file to be composited.

A png file with any name can be specified.

element0,overlay,body0.png,0,0

The last two numbers specify the composite position (X coordinate, Y coordinate).

This specifies how much the image should be shifted relative to the base image for compositing.

Positive X values move towards the right direction, and positive Y values move downwards.

By the way, in this example, unlike the previous collision area and animationsections, the elements are defined on surface1 instead of surface0.

Although we are only talking about examples, there is a reason for this※.

When considering only the behavior of the shell (ghost) itself, there is no problem with using elements on surfaces 0 and 10.