System Graphics - Part 2

System 2 is the "Battle Menu Set", used in battles to determine the cursor for targeting enemies and allies. It also displays the ATB bar and the numbers for HP and MP display in gauge type battles (set in the "Battle Layout" options of the Database).

All In Gold

This was the first I ever created (or re-created would be more accurate). The numbers on the gauge aren't really that clear, but I kept it as is for posterity.

System2 Template

This is a "default" template for creating your own System2 designs. The image size is 8x96.

This template shows the component elements of the above template.

1: The three-frame animation sequence for the left arrow.

2: The three-frame animation sequence for the down arrow.

3: The numbers for displaying HP and SP values.

A, B and C are the frames for the HP, SP and ATB bars respectively.

D: This is usually kept blank (although I'm not entirely sure what this is used for).

E: These five blocks are for the gauge colors, displayed when the "Battle Layout" is set to "Gauge".

F: This is the gauge for the ATB, which you'll note has two bars instead of one.

Adding Window Text Effects

Using the built-in RGSS/2 script, we can add some cool effects for enhancing or beautifying text, if used properly. These include a shadow effect and outlined text. Both of these scripts should work in both RMXP and RMVX, although I think there's an added font feature in RMVX for creating shadow effects without script.)

Shadow Effect

Add the following to Window_Base:

#---------------------------------------------------
# * Draw Shadow
#     x    : draw spot x-coordinate
#     y    : draw spot y-coordinate
#     w    : width
#     h    : height
#     text : text to display
#----------------------------------------------------
def draw_shadow(x, y, w, h, text)
  # Display shadow/shadow color
  self.contents.font.color = Color.new(200, 200, 200, 205)
  self.contents.draw_text(x + 4, y + 4, w, h, text, 1)
  # Display normal color text
  self.contents.font.color = system_color
  self.contents.draw_text(x, y, w, h, text, 1)
end

This will set up the "define procedure" to place it in windows. As an example, in Window_Steps, replacing this line:

self.contents.draw_text(4, 0, 120, 32, "Step Count")

with this line:

draw_shadow(4, 0, 120, 32, "Step Count")

will result in "Step Count" having a whitish-grey shadow.

Outline Effect

This routine will give the text an outline, which might be used for main headings.

Add the following to Window_Base:

#--------------------------------------------------
# * Draw Outline
#     x    : draw spot x-coordinate
#     y    : draw spot y-coordinate
#     w    : width
#     h    : height
#     text : text to display
#---------------------------------------------------
def draw_outline(x, y, w, h, text)
  self.contents.draw_text(x + 1, y * 32 + 1, w, h, text, 1)
  self.contents.draw_text(x - 1, y * 32 + 1, w, h, text, 1)
  self.contents.draw_text(x + 1, y * 32 - 1, w, h, text, 1)
  self.contents.draw_text(x - 1, y * 32 - 1, w, h, text, 1)
  self.contents.font.color = Color.new(250, 250, 250, 255)
  self.contents.draw_text(x, y * 32, w, h, text, 1)
end

Then, as an example, in Window_Steps, replace this line:

self.contents.draw_text(4, 0, 120, 32, "Step Count")

with this line:

draw_outline(4, 0, 120, 32, "Step Count")

In the Status Menu, the "Step Count" will now have an outlined effect.

Simple Font Draw

As the title suggests, this is a simple routine for redefining fonts, such as name, size, bold, italic, etc. Although this was written in RMXP, it should also work in RMVX. The default format for manipulating fonts is:

self.contents.font.name = "Font Name"
self.contents.font.size = 22

and so on.

But there is a way to merge the different properties into one procedure by adding the following to Window_Base:

#-------------------------------------------
# * Draw font status
#     bold    : Bold on/off
#     italic  : Italic on/off
#     size    : Font size
#     color   : Font color
#-------------------------------------------
def draw_font(bold, italic, size, color)
  # Check bold on/off
  case bold
  when 0
    self.contents.font.bold = false
  when 1
    self.contents.font.bold = true
  end
  # Check italic on/off
  case italic
  when 0
    self.contents.font.italic = false
  when 1
    self.contents.font.italic = true
  end
  # Change Color
  case color
  when 0
    self.contents.font.color = system_color
  when 1
    self.contents.font.color = normal_color
  when 2
    self.contents.font.color = Color.new(255, 255, 255, 255)
  end
  # Font size
  self.contents.font.size = size
end

Whenever fonts need to be "drawn", something like this would be called in RGSS when the font and its properties are called:

draw_font(1, 0, 22, 1)

This would result in bold 22-size font, set at the default "System Color" (also predefined in the Window_Base).

Other properties can easily be added using the same method. Anything predefined in this way is used as a template for all windows, including the Status and menu screens.

System Set - Tutorial Part 1 (RM2K3)

System graphics, in the System folder, are used for the Main and Battle menus. These are some I created (modified) a while ago. They are free to use for any RM2K3 game.

System Sets

Here are two basic system sets I created using the templates below.

Gold Frame

This system set sports a gold frame on a black background that gives it a royalty feel.

Parchment

This system set has a parchment background to give games an archaic look and feel.

System Templates

Here are some basic templates to enable you to make your own custom system sets.

This is the basic System layout that determines how the messages appears, including text colors. System sets (imported in the System folder) are for the main interface. The image size is 160x80.


Breaking the template down into its component parts, we can have a better understanding about how the components work.

A: Size: 32x32. This is the background color of the window.

B: Size: 32x32. This is the frame around the window and up and down arrows for scrolling through options. The arrows are 8x8 in size.

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).

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.