Titlescreen with Horizontal Commands

yuushi · 2014-09-22T09:25:01+0900

Hello! I've been tinkering around with several scripts, but I can't seem to manage what I need. I'd like a title screen that looks like this: http://i.imgur.com/gHxYbep.png The game title should be roughly at the center of the screen while the window is at 600x480, and the font size slightly larger than the New Game/Continue/Quit text. For the NG/C/Q options, I'd like just a little bit of spacing between each option so, visually, the buttons are broken up and don't run into each other (easier on the eyes). Lastly, I'd like if the font were adjustable, but if that's too much trouble that's completely fine. I think a font like this ( http://imagizer.imageshack.us/a/img844/7641/ikvk.png ) might be nice, but since I can't recall the name of it I wouldn't put the onus of picking a nice font on the scripter -- I don't mind searching for a similar font myself so long as the script is editable. Hopefully that isn't too complicated! I suspect that I'm new at scripting is why I'm having so much trouble. If there's a pre-existing script that's simple enough to work with, or a simple way to do this, please do let me know.

● ARCHIVED · READ-ONLY

Started by yuushi Sep 22, 2014, 12:25 AM 9 posts View original ↗

yuushi

#1 Sep 22, 2014, 12:25 AM Source

Hello!

I've been tinkering around with several scripts, but I can't seem to manage what I need. I'd like a title screen that looks like this:

http://i.imgur.com/gHxYbep.png

The game title should be roughly at the center of the screen while the window is at 600x480, and the font size slightly larger than the New Game/Continue/Quit text. For the NG/C/Q options, I'd like just a little bit of spacing between each option so, visually, the buttons are broken up and don't run into each other (easier on the eyes).

Lastly, I'd like if the font were adjustable, but if that's too much trouble that's completely fine. I think a font like this ( http://imagizer.imageshack.us/a/img844/7641/ikvk.png ) might be nice, but since I can't recall the name of it I wouldn't put the onus of picking a nice font on the scripter -- I don't mind searching for a similar font myself so long as the script is editable.

Hopefully that isn't too complicated! I suspect that I'm new at scripting is why I'm having so much trouble. If there's a pre-existing script that's simple enough to work with, or a simple way to do this, please do let me know.

PencilCase27

#2 Sep 23, 2014, 11:52 AM Source

The title_goes_here is something you should add to the image yourself, this way you can customize your game title much better.

The rest is not really complicated (changing the layout of a window is pretty easy), but I am not sure if I know how you want it to look. Just try this script and tell me what adjustments you wish for.

Code:

class Window_TitleCommand < Window_Command  def initialize    super(0, 0)    update_placement    select_symbol(:continue) if continue_enabled    self.openness = 0    self.opacity = 0    open  end  def window_width    return 500  end  def window_height    return line_height + 24  end  def update_placement    self.x = (Graphics.width - width) / 2    self.y = (Graphics.height - height) / 2  end    def col_max    return 3  end    alias pc27_menu_window_draw_all_items draw_all_items  def draw_all_items    self.contents.font.name      = "Myriad"    self.contents.font.bold      = true    self.contents.font.italic    = true    pc27_menu_window_draw_all_items  endend

yuushi

#3 Sep 23, 2014, 08:03 PM Source

PencilCase27 said:
The title_goes_here is something you should add to the image yourself, this way you can customize your game title much better.

The rest is not really complicated (changing the layout of a window is pretty easy), but I am not sure if I know how you want it to look. Just try this script and tell me what adjustments you wish for.

[...]
Oh, thank you so much! This is pretty much perfect. I do have two issues I ran into while trying to edit the code slightly:

1.) The game commands are a little far apart, so I thought, for my purposes, I might try to move them a little closer together. For reference, this is what I had before (after moving the commands up closer to the title):

and here's what it looked like after changing def window_width return 500 from 500 to 400:

While this distance between options is more ideal for me compared to the defaults, it looks like the options are anchored to the right, so they aren't correctly centered. Is there a way to fix the centering issue or better alter the distance between options? If not, I can certainly live with this, but I thought it'd be worth asking.

2.) The second item isn't necessarily an issue (but it is why I made the mockup image brown, to better show what I'm referring to). Around each option is a little white box, white I know is retained from the default RPGVXA menu. At the default value (500) the white square is too large and looks a little strange without a window backing, as the text is left-aligned rather than centered. The problem is fixed if I set the value to 400, but there's the centering issue with the options.

I don't necessarily mind the white box so long as it looks the way it does in the second image (which is to say, no obvious left-aligned issues evident), but I was wondering if it might be possible to replace the white box with an icon/cursor? Something like this:

Thank you so much again for your time and help so far! Even this much is immensely helpful.
PencilCase27

#4 Sep 23, 2014, 08:59 PM Source

def update_placement
self.x = (Graphics.width - width) / 2
self.y = (Graphics.height - height) / 2
end

Thats the x and y position of the window. You can edit it by either adding/subtracting a value (-50 or something like this) or you can just set a number. Fiddle a lil bit around.

def draw_all_items
self.contents.font.name = "Myriad"
self.contents.font.bold = true
self.contents.font.italic = true
pc27_menu_window_draw_all_items
end

Here you can customize your font name, italic and bold.

For the icon, thats a little bit more complicated, I'll look into it tomorrow.
yuushi

#5 Sep 23, 2014, 09:22 PM Source

Thank you so much for the advice! For some reason (probably my inexperience) I thought the two values had to be the same. I managed to make it so the options have 150px on each side after playing with it a bit.

Also, I noticed I was incorrect in assuming the left-alignment was quasi-solved by shifting the commands closer together; it's not as noticeable with the two longer commands, but with "continue" it's evident:

Hopefully this isn't too much information or anything (let me know if it is); I thought I ought to be accurate in what I report.

In any case, take your time! Thank you for considering the cursor issue for me.
PencilCase27

#6 Sep 23, 2014, 11:29 PM Source

Spoiler
module PC27 module CustomTitle X_Offset = 0 Y_Offset = 0 Opacity = 0 Size = 48 # Text Size Width = 544 Font_Name = "VL Gothic" Bold = true Italic = true Shadow = true Outline = true Color = 2 # Text color (the same you use in messages) Out_Color = [0, 0, 0, 150] # Outline Color [red, blue, green, alpha] Icon_Index = 120 endendclass Window_TitleCommand < Window_Command def initialize super(0, 0) update_placement select_symbol:)continue) if continue_enabled self.openness = 0 self.opacity = PC27::CustomTitle::opacity open end def window_width return PC27::CustomTitle::Width end def line_height return PC27::CustomTitle::Size end def window_height return line_height + 2 * standard_padding end def update_placement self.x = PC27::CustomTitle::X_Offset + (Graphics.width - width) / 2 self.y = PC27::CustomTitle::Y_Offset + (Graphics.height - height) / 2 end def col_max return 3 end def spacing return 0 end alias pc27_title_window_draw_all_items draw_all_items def draw_all_items set_custom_options pc27_title_window_draw_all_items end def set_custom_options contents.font.size = PC27::CustomTitle::Size contents.font.name = PC27::CustomTitle::Font_Name contents.font.bold = PC27::CustomTitle::Bold contents.font.italic = PC27::CustomTitle::Italic contents.font.shadow = PC27::CustomTitle::Shadow contents.font.outline = PC27::CustomTitle::outline contents.font.out_color.set(*PC27::CustomTitle::out_Color) end def update_cursor refresh end def normal_color text_color(PC27::CustomTitle::Color) end def item_rect_for_text(index) rect = item_rect(index) rect.x += 36 rect.width -= 36 rect end def draw_item(index) x = 12 + @index * (contents_width / 3) y = (line_height - 24) * 0.5 change_color(normal_color, command_enabled?(index)) draw_text(item_rect_for_text(index), command_name(index), alignment) draw_icon(PC27::CustomTitle::Icon_Index, x, y) if index == @index endend
I added a module at the top to make configuration easier. I think this should be able to do everything you want. Have Fun!

And if there is still something missing, let me know.
yuushi

#7 Sep 24, 2014, 07:42 AM Source

PencilCase27 said:
[...]

I added a module at the top to make configuration easier. I think this should be able to do everything you want. Have Fun!

And if there is still something missing, let me know.
Thank you so much! The script is perfect. I'll add in a little #note at the top of it so I remember who to credit. Thank you so much again!! I hope you have a wonderful day.
kirahh

#8 Sep 12, 2021, 08:36 AM Source

it will

Roninator2

#9 Apr 16, 2023, 10:06 PM Source

Fixed script post

PencilCase27 Horizontal Title Commands

Ruby:

module PC27
  module CustomTitle
    X_Offset = 0
    Y_Offset = 0
    Opacity = 0
    Size = 48
    # Text Size
    Width = 544
    Font_Name = "VL Gothic"
    Bold = true
    Italic = true
    Shadow = true
    Outline = true
    Color = 2
    # Text color (the same you use in messages)
    Out_Color = [0, 0, 0, 150]
    # Outline Color [red, blue, green, alpha]
    Icon_Index = 120
  end
end
class Window_TitleCommand < Window_Command
  def initialize
    super(0, 0)
    update_placement
    select_symbol(:continue) if continue_enabled
    self.openness = 0
    self.opacity = PC27::CustomTitle::Opacity
    open
  end
  def window_width
    return PC27::CustomTitle::Width
  end
  def line_height
    return PC27::CustomTitle::Size
  end
  def window_height
    return line_height + 2 * standard_padding
  end
  def update_placement
    self.x = PC27::CustomTitle::X_Offset + (Graphics.width - width) / 2
    self.y = PC27::CustomTitle::Y_Offset + (Graphics.height - height) / 2
  end
  def col_max
    return 3
  end
  def spacing
    return 0
  end
  alias pc27_title_window_draw_all_items draw_all_items
  def draw_all_items
    set_custom_options
    pc27_title_window_draw_all_items
  end
  def set_custom_options
    contents.font.size = PC27::CustomTitle::Size
    contents.font.name = PC27::CustomTitle::Font_Name
    contents.font.bold = PC27::CustomTitle::Bold
    contents.font.italic = PC27::CustomTitle::Italic
    contents.font.shadow = PC27::CustomTitle::Shadow
    contents.font.outline = PC27::CustomTitle::Outline
    contents.font.out_color.set(*PC27::CustomTitle::Out_Color)
  end
  def update_cursor
    refresh
  end
  def normal_color
    text_color(PC27::CustomTitle::Color)
  end
  def item_rect_for_text(index)
    rect = item_rect(index)
    rect.x += 36
    rect.width -= 36
    rect
  end
  def draw_item(index)
    x = 12 + @index * (contents_width / 3)
    y = (line_height - 24) * 0.5
    change_color(normal_color, command_enabled?(index))
    draw_text(item_rect_for_text(index), command_name(index), alignment)
    draw_icon(PC27::CustomTitle::Icon_Index, x, y) if index == @index
  end
end