WINDOW SKINS DISSECTED

This article inspects the window skin format used by RPG Maker series since VX, and can be used as an aid in creating your own window skins.
For MV and MZ the window skin image is 1.5x bigger in both directions but otherwise works the same.

Here is an example of a complete window skin - the default window skin can be found in your img/system folder of a new project (or graphics/system in the RTP)


Visually, it splits into four quarters.

Left Side: The window background

The top-left quarter is scaled in both directions, and colourized with the window colour.
- So it should be low complexity like a gradient which can be scaled without too many artifacts.
The bottom-left quarter is tiled and overlaid on top.
- So it should be a tilable pattern to avoid seams where it repeats.
- It should be partly transparent (via alpha channel / mask) if you want the other image to show through.
- Some image editing software has filters to make patterns tileable
- You can also make an image tileable by making it 1/4 size and mirroring to create the other quarters (whether this looks good or bad depends on the content)

Top right: window frame and cursors

This section is divided in 9, as illustrated by this image:


For MV/MZ you'll want to set your grid size to 12 pixels for editing this section, or 8 pixels for VX/VXA.
The corners (magenta in illustration) are copied exactly as drawn to make the corners of the window.
The edges (yellow in illustation) are stretched lengthways to make the window's border.
The arrows (cyan in illustration) are used to indicate when a window is scrollable.

Margin and Padding

The window background is smaller than the window by a value called the margin.
If you want your window frame to have rounded corners, the amount of transparent space you can have is equal to the margin (otherwise the background will show outside the frame)

For MV and MZ, the margin is 4 pixels (by default).
For VX Ace it is 2 pixels.

The padding is the amount of space around the window contents.
If you draw a thick window frame, it could touch or even overlap the contents.

For MV, the default padding is 18 pixels
For MZ and VX Ace it is 12 pixels
The padding can be adjusted with scripting, but you should consider the defaults when making a window skin for general use.

The contents are drawn atop the frame, so the unsafe area that overlaps contents can be used to decorate the background with attention given to contrast.

Bottom Right: Cursor, "Pause Sign" and Colors

The bottom right quarter is subdivided again:
The upper left quarter is used to make the cursor sprite
The upper right quarter is used for the "pause sign" displayed when a message window is waiting for the player to press OK to continue.
The lower half is divided into 32 squares of color.

Cursor

The cursor is scaled to fit the item being highlighted in a similar way to the window frame:


- The corners are copied exactly
- The edges are streched in one direction
- The big square in the center is stretched in both directions

The thickness of the edges is 2 pixels for VX/VXA, and 4 pixels for MV/MZ
By default, the cursor will blink / fade in and out. This can be turned off with scripting.

Pause Sign

The pause sign is animated with four frames:


You can make this any shape you like, the sprite is centered horizontally in the window and the bottom is flush with the bottom of the window (therefore it overlaps with the window frame)

Colors

There are 32 colors available in the window skin - the first 16 can be fairly freely used, while some of the second 16 are reserved for system. While you can set them as you like, the color of UI components will change at the same time.



The reserved colors are in the same place in all versions, but are simply not reserved where an older version did not have that feature (no time gauges before MZ, no TP in VX, etc)

Gauges are drawn as a gradient between two colors. If both colors are the same, the gauge will appear as a solid color.

If in doubt, use a similar color to the default windowskin, but from your palette.

And finally.. a template

If it is useful to you, you can draw your skin as a new layer on the template, then delete the template layer.

For MV/MZ

For VX/VXA