Foreground... In short, it is the one displayed between the background and the message layer, like a person's standing pose etc. It is possible to display it by overlapping layers up to three by the standard in KAG(But, it is possible to display more by customizing Config.tjs).

　The foreground uses the technique of masking or color key to cut out and to display the image in the shape of a person etc. In KAG, both the method of displaying the foreground with the mask and a color key may include transparency information and alpha channel in the image itself as TLG5/TLG6 image, ERI or PNG format. It can be transmitted by using the image-specific method if possible.

　The color key is the one that marks the part that should become transparent with one specific color, and the colored part becomes transparent.
　This is different for different image formats, like in the case of full-colored and the case of 256 colors and 16 colors.

　In the case of full-colors, a 「Transparent(No Color)」 part is painted as the Color Key. Magenta - (r,g,b)=(255,0,255) is commonly used and True Green - (r,g,b)=(0,255,0) is a color that is never used.
　But then, what if you want to express Green and Magenta? It is possible, but KAG treats it as a different color; (r,g,b)=(254,0,255) and (r,g,b)=(0,254,0).

　In the 256 color image and 16 color image, one of the palette indexused is 「Transparent shade」. The part painted out with this palette index becomes transparent.

　In KAG, it is possible to display the foreground by preparing something, which is called a mask image. This allows to clip the foreground image according to the mask image.

　The Mask image is an image of 256-level grayscale of the same size as the foreground image, and brightness defines the "Opacity" as it is. In other words, parts of brightness 0 is "completely opaque" and parts of brightness 255 is "completely transparent". Half transparency level is about 128 brightness. The part where the foreground image should be displayed is white colored, and transparent part is denoted by black color.
　Please save the mask image with the grayscale of 256-level (256 color image). It is not normally displayed when saving it with full-color and 16 colors.
　On the one hand, the foreground image maintains color information, whereas the mask image maintains opacity. So, the foreground image is called the main image.



　The mask image is saved with the filename of the main image with the suffix '_ m' added to it. For example, if the main image is 'hogehoge.png' the mask image becomes 'hogehoge_m.png'. This format by which the main image and the mask image is seperated is called the 'Main/Mask separation format'.

　The advantage to use the mask image is to be able to specify opacity freely when the foreground is overlapped, and it can also overlap the main image's edge, if the mask image and the main image are appropriately processed.

　For this, please prepare a suitable image, according to the format mentioned above. First of all, the display method of the foreground image using the color key...

[image storage="bg0" page=fore layer=base]
[wait time=200]
*start|Start
[cm]
[image layer=0 page=fore storage="as" visible=true key=0xff00ff left=340 top=100]
Hello.

　The bold part displays the foreground image. The image tag(explained here: → Display background) is used. This is the tag to read images. The foreground layer 0 is specified for the image display.
　There is also an attribute named 'key'. The key attribute specifies the transparent color. The transparent color is specified by the hexadecimal format 0xRRGGBB, in which the part painted with RR (red), GG (green) and BB (blue) is made transparent as the transparent color. For instance, the color key of (r,g,b) = (255,0,255) makes the color key=0xff00ff, in which magenta is the transparent color. If you specify key=255, palette index indicated by the 255 will be the color key. For more information, please refer to the Tags reference.

　storage="as" is an instruction(command) that reads the image, named 'as'. It isn't any problem, if you don't specify an extension. In this case, it automatically looks for a readable image-format among files of the name 'as' and reads the file, if it is found.

　The foreground layer is not displayed by default in KAG, visible=true specifies to KAG that the layer should be visible.

　'left=340 top=100' specifies the left and the top position of the foreground layer. When using the image tag, you can specify the display position for the foreground layer.



　Moreover, it becomes the following if the mask image is used:

[image storage="bg0" page=fore layer=base]
[wait time=200]
*start|Start
[cm]
[image layer=0 page=fore storage="asm" visible=true left=340 top=100]
Hello.

　Notice that there is no need for key attribute here.
　In the case of this example, 'asm_m' will be loaded as the mask image for the main image, named 'asm'.

　It will display the same effect, if PNG image with alpha channel information is used alone, without any need for a color key or a mask.