System Set Tutorial (RM2K3)

Breaking the System Set template down into its component parts, we can have a better understanding about how the components work, thus:

A: Size: 32×32. This is the window background. It can be a single color or gradients, or even an image.

B: Size: 32×32. This is the frame around the window (3 pixels wide) and the up and down arrows for scrolling through options. The arrows are 8×8 in size by default, but for the best results 10×8 is recommended with 2 pixels between each arrow.

C: Size: 32×32. 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 8×8 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: 16×16. This is the background color of the menu, used as "opacity".

F: Size: 16×16. 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 8×16 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: 16×16. 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 16×16 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. This can be anything, including an image, provided it’s 32×32 pixels.

However, a word of warning: it’s probably better to use a seamless background, otherwise the image can warp by stretching it, making it look totally weird and unappealing.

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 8×8 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 8×16, with a colon and blank square for the spacer.

And for the airship shadows, again they need to be 8×16. This is a two-frame animation representing when it’s close to the ground and when it’s farther from the ground.

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.) It doesn’t matter what color is used for the transparent background; I just prefer the orange color.