The first one we'll focus on is the System Set, which is located in the System folder; this is used for the main menus and windows/text boxes.
Image Size: 160x80.
The basic System layout looks like this:
Once "filled in", this will determine how the messages appear, including text colors, in text boxes and menus; in other words, the main interface.
Breaking the template down into its component parts, we can have a better understanding about how the components work, thus:
A: Size: 32x32. This is the window background. It can be a single color or gradients, or even an image.
B: Size: 32x32. This is the frame around the window (3 pixels wide) and the up and down arrows for scrolling through options. The arrows are 8x8 in size by default, but for the best results 10x8 is recommended with 2 pixels between each arrow.
C: Size: 32x32. These two are the patterns used for the command cursor. If they are two different patterns, the cursor will flash rather than be static if they are both the same.
D: These are the four animated arrows used in shops. Each is 8x8 in size, comprising four frames each. The first row is for stat increases, the second is for unequippable items, the third is for stat decreases, and the fourth is when an item is already equipped.
E: Size: 16x16. This is the background color of the menu, used as "opacity".
F: Size: 16x16. This is the letter shadow color, displayed "behind" the letters to give it a shadow effect.
G: These are the numbers used for timers. There are twelve in total, each one 8x16 in size and comprising a set of two numbers, with the last one a colon (or other separator). It's important to note that, except for the colon, there are two numbers in each square spaced 1 pixel apart.
H: Size: 16x16. These are the two shadows for airships, which are displayed on the map whenever an airship is used as a vehicle.
The last two rows are for the twenty basic colors used in the game. Each is 16x16 in size. The first four are the "system" colors, where:
- 0: The default text color.
- 1: The stats default color.
- 2: The color for when stats increase.
- 3: The color for when stats decrease or when commands are unavailable.
- 4: The color for when HP or SP decrease.
So now that we know what each of the components are, let's create an example System Set. I've used Character Maker 1999 for this because it makes it much easier to edit.
The first thing we need to do is create the window background (A).For this tutorial, I created a simple blue gradient background. This will now be the background for all windows.
For the next part, let's create a simple gold border, including gold arrows (B). The white color (default is orange) must be consistent throughout the template, as this will be used to determine transparency. For the cursor command windows (C), they are set to two different background colors, but they can also be the same background colors with slightly different border colors to give that "flashing" effect.
The next part to modify is the shop cursors (D). Again, I've opted for a goldish and silvery look. As a quick reminder, the top row is for increased stats, the second is unequippable items, the third is for decreased stats, and the fourth is for items already equipped. When purchasing items from shops, the animation will cycle through the animation (frames). These can be any images, provided each individual frame is 8x8 pixels and they are consistent; it will look weird if animations jump from one image to another not in sequence.
For this next part, the penultimate, it's a simple matter of filling in two squares - the window opacity color (E) and the letter shadow color (F) - with a single color. The opacity color is usually the same as the background color in the first window of C. The shadow color is usually set to black but can be any color as long as it matches the color scheme.
The final part is where we add the numbers for the timers (G) and the airship shadows (H). Each individual number needs to be 8x16, with a colon and blank square for the spacer.
The final step is to fill in the white background to the default orange. This will be the transparency color when importing this System Set. (This could have been done earlier, but because we were creating gold lettering and borders, white makes it much easier to work with until the final product.)
