Modifying Main Menu Elements/Backgrounds

[Dalhan 2]

G'day!

 

I'm attempting to move the main menu elements around and remove the window skin background/border elements, as well as add custom background images. I've not done much scripting with RGSS3 and I'm not sure what I should be looking at in terms of arranging the text fields, character selections (and what is displayed about each player). 

 

If there is a tutorial based on modifying the menu panel, that would be awesome, or a script that allowed easy manipulation, or even some one willing to just guide me through the process that'd be great too!

 

As a general guide for what I'm looking for, players will be displayed horizontally with their information stacked under the portrait. I have an example here, though it's not the exact layout we're going for! But it's close enough. 

 

Example

 

Thanks in advance for any help provided!

[+ TBWCS 953]

For you to understand how the menu works, I suggest you read a bit of the help file. This is because all of the RGSS3 functions are inside the Help File for the scripter to understand or make it as a guide. However, I will give a bit of advice how to achieve what you want:

 

First off, you need to learn about column max or col_max in the script. The col_max changes the displayed columns. As you may have noticed, col_max for the menu items is 1. This displays only one Column. So you will see your menu as:

 

• Item
• Skills
• Equip
• Status
• Save
• Game End

if you changed the col_max to 2 it would turn your menu horizontally by twos.

 

If you are looking for a tutorial, then DiamondAndPlatinum3's Horizontal Commands is for you.

[Dalhan 2]

Interesting. I assume col_max is just a reference for all boxed off sections? As there are some columns which expand the entire width of the frame (which would be a row, not a column)?

[+ TBWCS 953]

Window_Selectable holds the col_max.

  #--------------------------------------------------------------------------
  # * Get Digit Count
  #--------------------------------------------------------------------------
  def col_max
    return 1
  end

So when the thing you are going to change is somewhat deals with only the menu, you can actually make a modification of the col_max on that class. Some cscenes also borrow the col_max on the Window_Selectable, so you have to see to it which part you are going to modify

[Dalhan 2]

While I'm going through the helpfiles/video tutes, do you happen to know how to assign images as backgrounds? I figured out theres a window spitesheet, so removing the standard background is as hard as setting those pixels to transparent. I'm hoping to use a frame-sized image for certain windows. 

[+ TBWCS 953]

You can reference to my script: 

http://infinitytears.wordpress.com/2014/01/24/kyrie-engine-random-menu-background/

 

I did it by random, but you can just make a static one.

 

Or you can do it:

class Scene_Menu < Scene_MenuBase
  #--------------------------------------------------------------------------
  # * Start Processing
  #--------------------------------------------------------------------------
  alias dalhan_background_start start
  def start
    dalhan_background_start() #Calls the Original Method
    create_dalhan_background
  end
  
  def create_dalhan_background
    @dalhan_plane = Plane.new
    @dalhan_plane.bitmap = Cache.parallax("Mountains1")
  end
  
  def dispose_dalhan_background
    @dalhan_plane.bitmap.dispose
    @dalhan_plane.dispose
  end
  
  def return_scene
    SceneManager.return
    dispose_dalhan_background
  end
  
end

Edited February 27, 2014 by SoulpourVII

[Dalhan 2]

Are there any really basic main-menu modification guides? 

Edited February 28, 2014 by Dalhan

[+ TBWCS 953]

Well, if you want to modify the main menu, you can go to your help file and learn the RGSS3 there. The way I learned it was reading through the codes though. As to I know what happens and what runs inside the menu.

[Dalhan 2]

I've Managed to get this far with the code below. My issue at the moment is that the "Window_Status" panel flies off screen. It's been pushed off because of the MenuCommand Window. The code I put in at the bottom to move it back get's the error I tapped onto the image. 

 

    Graphics.resize_screen(640, 480)

class Window_MenuCommand < Window_Command
  def initialize
    super(0,0)
    refresh
    select_last
  end
  
  def window_width
    return 640
  end
  
  def col_max
    return 6
  end
  
  def visible_line_number
    return 1
  end
end

class Window_MenuStatus < Window_Selectable
  def initialize
    super(0, 40, 640, 400)
    @pending_index = -1
    refresh
  end
  
end

[+ TBWCS 953]

That's because you removed the Window_MenuStatus. Try removing this block for a second:

class Window_MenuStatus < Window_Selectable
  def initialize
    super(0, 40, 640, 400)
    @pending_index = -1
    refresh
  end
  
end

what do you think is the method that you've missed here? That is where you'll start.

[Dalhan 2]

Oh wait, am i supposed to call Scene_Menu? I get the feeling I need to arrange the 'Menu Scene' to get the Character Status Window to come back. It's not actually removed, just pushed off the screen to the right. Sorta like what happens when you make to many columns. 

[+ TBWCS 953]

Okay, so basically, you need to change a few on your Window_MenuCommand. Since you're using a different size, do this:

Graphics.resize_screen(640, 480)
#==============================================================================
# ** Window_MenuCommand
#------------------------------------------------------------------------------
#  This command window appears on the menu screen.
#==============================================================================
class Window_MenuCommand < Window_Command
  
  #--------------------------------------------------------------------------
  # * Get Maximum Column
  # Maximum column to be shown in the command.
  #--------------------------------------------------------------------------  
  def col_max
    return 6
  end

  #--------------------------------------------------------------------------
  # * Get Window Width
  # Width of the window should be the same with the resized screen's width.
  #--------------------------------------------------------------------------
  def window_width
    return 640
  end
  
  #--------------------------------------------------------------------------
  # * Get Window Height
  # Height of the window depends on the height the developer wants.
  #--------------------------------------------------------------------------  
  def window_height
    return 90
  end
  
  #--------------------------------------------------------------------------
  # * Get Number of Lines to Show
  # The visible line number should be equal to the item max.
  #--------------------------------------------------------------------------
  def visible_line_number
    item_max
  end

end

then on your Window_MenuStatus, do this:

#==============================================================================
# ** Window_MenuStatus
#------------------------------------------------------------------------------
#  This window displays party member status on the menu screen.
#==============================================================================

class Window_MenuStatus < Window_Selectable
  
  #--------------------------------------------------------------------------
  # * Object Initialization
  #--------------------------------------------------------------------------
  def initialize(x, y)
    super(x - 640, y + 90, window_width, window_height)
    @pending_index = -1
    refresh
  end
  
  #--------------------------------------------------------------------------
  # * Get Window Height
  #--------------------------------------------------------------------------
  def window_height
    Graphics.height - 138
  end
  
  #--------------------------------------------------------------------------
  # * Get Window Height
  #--------------------------------------------------------------------------
  def window_width
    Graphics.width
  end  
  
  #--------------------------------------------------------------------------
  # * Get Item Height
  # The selecting cursor's height is also changed.
  #--------------------------------------------------------------------------
  def item_height
    (height - standard_padding - 24) / 3
  end
  
end

put those snippet together in a new script section below Materials above Main. You tampered a lot on the Window_MenuStatus

 

There would surely be an error on the code you made because you can't select a skill, do a formation or equip properly.

[Dalhan 2]

Aaaaaah! The modifiers on the x and y. That's why the window was shoved off to the side. Seems so obvious one some one points it out. The dude in the video even mentioned that, so I added x = 0, y = 40 and it didn't work. Should of tried different modifiers >_<  

  def initialize(x, y)
    super(x - 640, y + 90, window_width, window_height)
    @pending_index = -1
    refresh
  end

Thank you for your help so far. I'm going to tinker with the status menu and the col_max function. Wish me luck!

[+ TBWCS 953]

It's basically the cartesian plane, to be exact. Treat the window as x and y. The reason why I used x - 640 is because we need to decrease the location of the X. y + 90 that is because we need to lower down the status menu. The lower part of the plane is the positive side.

[Dalhan 2]

This topic may need to be moved to scripts help at this rate

 

I've managed to stack all the players vertically using columns. The issue I face now are the stats (HP, MP, Etc)

 

Are there any examples of   def draw_actor_hp being used? I've tried poking around in other menu changing scripts, but they're a margin above me comprehension (for now > )

[+ TBWCS 953]

I have a script that changes the draw gauge, actor and names.

 

This one was the requested first script: http://www.rpgmakervxace.net/topic/22115-hp-mp-tp-icon-naming/

 

and this one the upgraded one:

 

http://www.rpgmakervxace.net/topic/22119-soul-engine-ace-basic-menu-plus/

[Dalhan 2]

On the home stretch I think! Just putting all the elements in the right place. Theres just a few tidbits I could use direction with.

 

First thing is opacity. How do make use of self.opacity = 0 with each of the windows (As in make their background/border hit 0)

 

Second is the spacing that exists between basically everything. How do I modify the padding? It's sort of not balanced; you can see the dude on the far right is falling off the screen, but everyone else has heaps of room. Except the selector doesn't have the right dimensions. 

 

[+ TBWCS 953]

for the status, check out this code:

  #--------------------------------------------------------------------------
  # * Get Item Height
  # The selecting cursor's height is also changed.
  #--------------------------------------------------------------------------
  def item_height
    (height - standard_padding - 24) / 3
  end

change the values so you can adjust the padding.

 

For the opacity, add self.opacity = 0 on the object initializations...or basically on def initialize.

 

e.g.

class Window_MenuStatus < Window_Selectable
  
  #--------------------------------------------------------------------------
  # * Object Initialization
  #--------------------------------------------------------------------------
  def initialize(x, y)
    super(x - 640, y + 90, window_width, window_height)
    @pending_index = -1
    refresh
    self.opacity = 0
  end

end

[Dalhan 2]

The little selector (white/grey) box appears to always have about 30 pixels spacing between each selection. Is this something we're not able to modify, as I just noticed it's standard on all horizontal selections. It looks a little tacky cutting through the MP/HP pools like that :S 

 

What's it referred to as? Selector?

 

 

 

Edit: Hold up. I literally just found it. Haha.

Edited February 28, 2014 by Dalhan

[+ TBWCS 953]

That's the best thing about making the menu isn't it? It's quite fun

 

Here's a random thing I made awhile ago as I was answering your question.

 

 

 

# -=-=--=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=
# VXA Face Menu Command
# Version 1.0
# ** Soulpour777
# -=-=--=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=
# Description: Instead of using different graphics in order to display the
# menu for the skill, equipment and formation selection, the menu now only
# uses faces, allowing the Status Menu a bit more used rather than seeing
# the character's status on the menu itself.
# -=-=--=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=

#==============================================================================
# ** Window_MenuCommand
#------------------------------------------------------------------------------
#  This command window appears on the menu screen.
#==============================================================================

class Window_MenuCommand < Window_Command
  #--------------------------------------------------------------------------
  # * Get Maximum Column
  # Maximum column to be shown in the command.
  #--------------------------------------------------------------------------  
  def col_max
    return 7
  end
  
  #--------------------------------------------------------------------------
  # * Get Window Width
  # Width of the window should be the same with the resized screen's width.
  #--------------------------------------------------------------------------
  def window_width
    Graphics.width
  end
  
  #--------------------------------------------------------------------------
  # * Get Window Height
  # Height of the window depends on the height the developer wants.
  #--------------------------------------------------------------------------  
  def window_height
    return 50
  end
  
  #--------------------------------------------------------------------------
  # * Get Number of Lines to Show
  # The visible line number should be equal to the item max.
  #--------------------------------------------------------------------------
  def visible_line_number
    item_max
  end

end

class Window_Base < Window
  #--------------------------------------------------------------------------
  # * Draw Actor Face Graphic
  #--------------------------------------------------------------------------
  def draw_actor_face(actor, x, y, enabled = true)
    draw_face(actor.face_name, actor.face_index, x, y, enabled)
  end  
  #--------------------------------------------------------------------------
  # * Draw Class
  #--------------------------------------------------------------------------
  def draw_actor_class(actor, x, y, width = 112) end;

  #--------------------------------------------------------------------------
  # * Draw HP
  #--------------------------------------------------------------------------
  def draw_actor_hp(actor, x, y, width = 124) end;
  #--------------------------------------------------------------------------
  # * Draw MP
  #--------------------------------------------------------------------------
  def draw_actor_mp(actor, x, y, width = 124) end;

  #--------------------------------------------------------------------------
  # * Draw Simple Status
  #--------------------------------------------------------------------------
  def draw_actor_simple_status(actor, x, y) end;

end

#==============================================================================
# ** Window_Selectable
#------------------------------------------------------------------------------
#  This window class contains cursor movement and scroll functions.
#==============================================================================

class Window_Selectable < Window_Base
  #--------------------------------------------------------------------------
  # * Get Spacing for Items Arranged Side by Side
  #--------------------------------------------------------------------------
  def spacing
    return 0
  end
end

#==============================================================================
# ** Window_MenuStatus
#------------------------------------------------------------------------------
#  This window displays party member status on the menu screen.
#==============================================================================

class Window_MenuStatus < Window_Selectable
  
  #--------------------------------------------------------------------------
  # * Object Initialization
  #--------------------------------------------------------------------------
  def initialize(x, y)
    super(x - Graphics.width, y, window_width, window_height + 92)
    @pending_index = -1
    refresh
  end
  
  #--------------------------------------------------------------------------
  # * Get Window Height
  #--------------------------------------------------------------------------
  def window_height
    Graphics.height - 138
  end
  
  def col_max
    return 4
  end
  
  #--------------------------------------------------------------------------
  # * Draw Item
  #--------------------------------------------------------------------------
  def draw_item(index)
    actor = $game_party.members[index]
    enabled = $game_party.battle_members.include?(actor)
    rect = item_rect(index)
    draw_item_background(index)    
    draw_actor_face(actor, rect.x + 1, rect.y + 1, enabled)
    draw_actor_simple_status(actor, rect.x + 108, rect.y + line_height / 2)
  end  
  
  #--------------------------------------------------------------------------
  # * Get Window Height
  #--------------------------------------------------------------------------
  def window_width
    Graphics.width
  end  
  
  #--------------------------------------------------------------------------
  # * Get Item Height
  # The selecting cursor's height is also changed.
  #--------------------------------------------------------------------------
  def item_height
    (height - standard_padding - 24) / 3
  end
  
end

#==============================================================================
# ** Scene_Menu
#------------------------------------------------------------------------------
#  This class performs the menu screen processing.
#==============================================================================

class Scene_Menu < Scene_MenuBase
  #--------------------------------------------------------------------------
  # * Start Processing
  #--------------------------------------------------------------------------
  def start
    super
    create_command_window
    create_status_window
  end
  #--------------------------------------------------------------------------
  # * Create Command Window
  #--------------------------------------------------------------------------
  alias soul_rend_face_only_create_command_window create_command_window
  def create_command_window
    soul_rend_face_only_create_command_window
    @command_window.y = 366
  end
end
 

 

 

[Dalhan 2]

That's awesome. I've only just managed to align the text/bars. About to modify the text sizes and adjust the gauge bar heights. Not sure if I've seen anything for them yet, but I'm sure it's possible to adjust. 

 

Looking further down the road, I'm hoping to have the top bar with the Window_Commands to pan across and which ever window you're currently in, will be displayed. 

 

 

Items__Skills __Status.....Status_Items __Skills

[_________________]....[_________________]

[______Skills_______]....[______Items_______]

[_________________]....[_________________]

[_________________]....[_________________]

 

 

Just as an example above. From my understanding so far, each window is it's own scene. So I'd probably have to create a header which has all the selection options in it and then have it instanced in every different menu scene? The goal would be instead of having to manually select each item in the header, you just pan across and it'll update accordingly. The bonus here, is I know how to manipulate and move the other scenes around now 

[+ TBWCS 953]

If you want them displayed instantly on the same exact scene, if it was me who'd do it, I would just dup the methods from each scene and call it on the Menu_Command. That way you can expand the window and view those panels on the same scene without going to its own scene

[Dalhan 2]

 

 

I would just dup the methods from each scene and call it on the Menu_Command.

 

I had a sneaky suspicion that would be the best route. Have a new window made and ran while on that particular selection and then disposed of once you go to the next. I've seen some private games with the same effect. While doing that sort of thing is probably a day or two off, do you happen to know of any open examples of it being done? 

[+ TBWCS 953]

Hmm, I've never seen a menu that does it yet. Probably because doing the Scene to Scene is much easier anyways. If you want to make something like this, the best route is to look at the methods and duplicate them.

[Dalhan 2]

Say I wanted to replace the words of each item in the command_window with an icon. How do I go about doing that?