VX Ace official information
Content here is from the F1 help menu;
RPG Maker VX Ace -> Reference Material -> Resource Standards : Window Skins
Window skins are 128 x 128 images. You should normally use a 32-bit PNG file.
A
Window background 1. The 64 × 64 pattern is drawn by growing or shrinking to fit the actual window. Strictly speaking, it is two pixels smaller around the window. This is done to show a natural-looking window with rounded corners.
B
Window background 2. The 64 × 64 pattern is drawn tile style so as to cover background 1.
C
Window frames and arrows. Four corners that are 16 × 16 are drawn and the remaining frame (the sides) are drawn tile style at a 16-pixel thickness to match the window. Arrows are used as marks when scrolling window content.
D
The command cursor used to show items that are selected in windows. The two pixels on the periphery are expanded/contracted horizontally and vertically, and the rest is expanded/contracted evenly to fit the size of the cursor.
E
The pause sign used to show the waiting-for-button-press state in message windows. It animates based on four 16 × 16 patterns.
F
Text colors that can be used by control characters of the Show Text event command. You can place four rows of eight 8 × 8 images (colors) each.
Window Skin colouring
This is the default Window.png for RPG Maker VX Ace. You will notice that it has a grey background 1, not the blue background that appears in the game.
Within the Database (F9) under the System tab you can set the Window Color option by double clicking the Window Skin preview.
The Window Color dialogue will appear, this controls the colour of the Window Skin, it is the most basic way to modify the Window Skin.
The RGB values here are "additively" blended with background 1 of the Window Skin, this means the Red, Green and Blue numbers shown in the Window Color are added to the Red, Green and Blue numbers of the base image.
Values are -255 to +255.
The -34 Green value is added to the Window Skin (a subtractive blend of 34):
The +68 Blue value is added to the Window Skin:
With both values added we will see the familiar VX Ace default Window Skin colour:
Window composition
This is the default Window Skin with a chequered grid made up of 4x4 pixels. 4x4 is the smallest size that RPG Maker VX Ace will reference when compositing a Window Skin (The corners of the selection box).
Window Background
After tinting, background 1 is first stretched over the size of the window with a 2 pixel border on each size. EDIT: Correction! Tinting is done on backgound 1 in the database preview, however in-engine it is actually performed after background 2 is applied!
Background 2 is then tiled, repeating in both directions, across the same area. The tiling pattern starts at the top-left corner of background 1.
No special blending is done here, the background 2 is simply drawn over the top with its alpha channel.
The final part of the background is to apply the Window::back_opacity value (defaults to 192). Window::back_opacity will make the background semi-transparent and is a value from 0 to 255.
Window Frame
The frame of the Window Skin is applied after the background.
The corners are drawn first in the order of; top-left, top-right, bottom-left, bottom-right. The result of this draw order is that the bottom-right corner will always be above the bottom-left, which is always above the top-right, which is above the top-left. Top-left is always underneath the other corners.
The gaps between the corners (if there are any) will be filled with the edges. The edges are tiled to fill the gap.
The edges are drawn in the order top, left, right and bottom (bottom frame is always on top, top frame is always underneath).
Here is a demonstration of the tiling using an 8 pixel pattern;
Pattern used:
Window Transparency
The Window::Opacity value is applied at this point. The opacity value is from 0 to 255 and will fade out both the background and the frame.
Window Scroll Arrows
These are drawn at the sides of the frame to indicate that there is content scrollable in that direction.
They are drawn in the order bottom, right, left and top (Top is always on top, bottom is always at the bottom, right always under left).
There is a 4 pixel padding from the edge of the frame and the scroll arrow.
In this image I've added an 8x8 patten to show the 4 pixel offset from the frame edge.
Window Pause Sign
This is drawn when the Window is waiting for user-input. A Window will show the pause sign at the bottom-centre of the frame with no padding around it.
The 4 frame animation takes 1 second to complete. The animation loops A, B, C, D.
Window Contents
By default the contents of the window is within a 12 pixel padding.
The contents may over-hang this valid area. The contents origin is in reference to the to the top-left of this area.
Selection Box
The selection box is similar to the frame, however the corners are within a 4x4 boundary.
The corners are drawn top-left, top-right, bottom-left then bottom-right.
Unlike the frame, the edges are stretched rather than tiled.
You can see the stretch here:
Finally, the centre of the selection box is stretched.
The selection box pulses between ~127 to 255 and back to ~127 opacity over the duration of 1 second.
Contents Transparency
The transparency of the contents is controlled separately from opacity and back_opacity with the Window::contents_opacity value.
Window Animation
The animation for Window Skins is not very complex. When opening or closing the window, by default, will increase in size 48 pixels per frame.
The window itself stretches into view, including stretching the frame, with the contents hidden. The contents will appear when the window is fully open.
Text Colours
Text colours are selected from 0 to 31 from left to right, top to bottom.
System colours are as such;
Content here is from the F1 help menu;
RPG Maker VX Ace -> Reference Material -> Resource Standards : Window Skins
Window skins are 128 x 128 images. You should normally use a 32-bit PNG file.
A
Window background 1. The 64 × 64 pattern is drawn by growing or shrinking to fit the actual window. Strictly speaking, it is two pixels smaller around the window. This is done to show a natural-looking window with rounded corners.
B
Window background 2. The 64 × 64 pattern is drawn tile style so as to cover background 1.
C
Window frames and arrows. Four corners that are 16 × 16 are drawn and the remaining frame (the sides) are drawn tile style at a 16-pixel thickness to match the window. Arrows are used as marks when scrolling window content.
D
The command cursor used to show items that are selected in windows. The two pixels on the periphery are expanded/contracted horizontally and vertically, and the rest is expanded/contracted evenly to fit the size of the cursor.
E
The pause sign used to show the waiting-for-button-press state in message windows. It animates based on four 16 × 16 patterns.
F
Text colors that can be used by control characters of the Show Text event command. You can place four rows of eight 8 × 8 images (colors) each.
Window Skin colouring
This is the default Window.png for RPG Maker VX Ace. You will notice that it has a grey background 1, not the blue background that appears in the game.
Within the Database (F9) under the System tab you can set the Window Color option by double clicking the Window Skin preview.
The Window Color dialogue will appear, this controls the colour of the Window Skin, it is the most basic way to modify the Window Skin.
The RGB values here are "additively" blended with background 1 of the Window Skin, this means the Red, Green and Blue numbers shown in the Window Color are added to the Red, Green and Blue numbers of the base image.
Values are -255 to +255.
The -34 Green value is added to the Window Skin (a subtractive blend of 34):
The +68 Blue value is added to the Window Skin:
With both values added we will see the familiar VX Ace default Window Skin colour:
Window composition
This is the default Window Skin with a chequered grid made up of 4x4 pixels. 4x4 is the smallest size that RPG Maker VX Ace will reference when compositing a Window Skin (The corners of the selection box).
Window Background
After tinting, background 1 is first stretched over the size of the window with a 2 pixel border on each size. EDIT: Correction! Tinting is done on backgound 1 in the database preview, however in-engine it is actually performed after background 2 is applied!
Background 2 is then tiled, repeating in both directions, across the same area. The tiling pattern starts at the top-left corner of background 1.
No special blending is done here, the background 2 is simply drawn over the top with its alpha channel.
The final part of the background is to apply the Window::back_opacity value (defaults to 192). Window::back_opacity will make the background semi-transparent and is a value from 0 to 255.
Window Frame
The frame of the Window Skin is applied after the background.
The corners are drawn first in the order of; top-left, top-right, bottom-left, bottom-right. The result of this draw order is that the bottom-right corner will always be above the bottom-left, which is always above the top-right, which is above the top-left. Top-left is always underneath the other corners.
The gaps between the corners (if there are any) will be filled with the edges. The edges are tiled to fill the gap.
The edges are drawn in the order top, left, right and bottom (bottom frame is always on top, top frame is always underneath).
Here is a demonstration of the tiling using an 8 pixel pattern;
Window Transparency
The Window::Opacity value is applied at this point. The opacity value is from 0 to 255 and will fade out both the background and the frame.
Window Scroll Arrows
These are drawn at the sides of the frame to indicate that there is content scrollable in that direction.
They are drawn in the order bottom, right, left and top (Top is always on top, bottom is always at the bottom, right always under left).
There is a 4 pixel padding from the edge of the frame and the scroll arrow.
In this image I've added an 8x8 patten to show the 4 pixel offset from the frame edge.
Window Pause Sign
This is drawn when the Window is waiting for user-input. A Window will show the pause sign at the bottom-centre of the frame with no padding around it.
The 4 frame animation takes 1 second to complete. The animation loops A, B, C, D.
Window Contents
By default the contents of the window is within a 12 pixel padding.
The contents may over-hang this valid area. The contents origin is in reference to the to the top-left of this area.
Selection Box
The selection box is similar to the frame, however the corners are within a 4x4 boundary.
The corners are drawn top-left, top-right, bottom-left then bottom-right.
Unlike the frame, the edges are stretched rather than tiled.
Finally, the centre of the selection box is stretched.
The selection box pulses between ~127 to 255 and back to ~127 opacity over the duration of 1 second.
Contents Transparency
The transparency of the contents is controlled separately from opacity and back_opacity with the Window::contents_opacity value.
Window Animation
The animation for Window Skins is not very complex. When opening or closing the window, by default, will increase in size 48 pixels per frame.
The window itself stretches into view, including stretching the frame, with the contents hidden. The contents will appear when the window is fully open.
Text Colours
Text colours are selected from 0 to 31 from left to right, top to bottom.
System colours are as such;
Ruby:
def normal_color; text_color(0); end; # Normal
def system_color; text_color(16); end; # System
def crisis_color; text_color(17); end; # Crisis
def knockout_color; text_color(18); end; # Knock out
def gauge_back_color; text_color(19); end; # Gauge background
def hp_gauge_color1; text_color(20); end; # HP gauge 1
def hp_gauge_color2; text_color(21); end; # HP gauge 2
def mp_gauge_color1; text_color(22); end; # MP gauge 1
def mp_gauge_color2; text_color(23); end; # MP gauge 2
def mp_cost_color; text_color(23); end; # TP cost
def power_up_color; text_color(24); end; # Equipment power up
def power_down_color; text_color(25); end; # Equipment power down
def tp_gauge_color1; text_color(28); end; # TP gauge 1
def tp_gauge_color2; text_color(29); end; # TP gauge 2
def tp_cost_color; text_color(29); end; # TP cost