v18.1 How to adjust battle command buttons to be a single column?

[Stuns]

I've been trying to arrange the buttons as a single column but I just can't figure out the right combination of values to edit or something & I haven't been able to find any other threads that help me with this. I've tried editing button.x & button.y every way I can think of but I'm lost.
I've included a screenshot of the buttons & the section of code I'm assuming I need to edit from PokeBattle_SceneMenus.

#===============================================================================
# Command menu (Fight/Pokémon/Bag/Run)
#===============================================================================
class CommandMenuDisplay < BattleMenuBase
  # If true, displays graphics from Graphics/Pictures/Battle/overlay_command.png
  #     and Graphics/Pictures/Battle/cursor_command.png.
  # If false, just displays text and the command window over the graphic
  #     Graphics/Pictures/Battle/overlay_message.png. You will need to edit def
  #     pbShowWindow to make the graphic appear while the command menu is being
  #     displayed.
  USE_GRAPHICS = true
  # Lists of which button graphics to use in different situations/types of battle.
  MODES = [
     [0,2,1,3],   # 0 = Regular battle
     [0,2,1,9],   # 1 = Regular battle with "Cancel" instead of "Run"
     [0,2,1,4],   # 2 = Regular battle with "Call" instead of "Run"
     [5,7,6,3],   # 3 = Safari Zone
     [0,8,1,3]    # 4 = Bug Catching Contest
  ]

  def initialize(viewport,z)
    super(viewport)
    self.x = 0
    self.y = Graphics.height-96
    # Create message box (shows "What will X do?")
    @msgBox = Window_UnformattedTextPokemon.newWithSize("",
       self.x+16,self.y+2,220,Graphics.height-self.y,viewport)
    @msgBox.baseColor   = TEXT_BASE_COLOR
    @msgBox.shadowColor = TEXT_SHADOW_COLOR
    @msgBox.windowskin  = nil
    addSprite("msgBox",@msgBox)
    if USE_GRAPHICS
      # Create background graphic
      background = IconSprite.new(self.x,self.y,viewport)
      background.setBitmap("Graphics/Pictures/Battle/overlay_command")
      addSprite("background",background)
      # Create bitmaps
      @buttonBitmap = AnimatedBitmap.new(_INTL("Graphics/Pictures/Battle/cursor_command"))
      # Create action buttons
      @buttons = Array.new(4) do |i|   # 4 command options, therefore 4 buttons
        button = SpriteWrapper.new(viewport)
        button.bitmap = @buttonBitmap.bitmap
        button.x      = self.x+Graphics.width-276
        button.x      += (((i%2)==0) ? 0 : @buttonBitmap.width/2-4)
        button.y      = self.y+8
        button.y      += (((i/2)==0) ? 0 : BUTTON_HEIGHT-0)
        button.src_rect.width  = @buttonBitmap.width/2
        button.src_rect.height = BUTTON_HEIGHT
        addSprite("button_#{i}",button)
        next button
      end
    else
      # Create command window (shows Fight/Bag/Pokémon/Run)
      @cmdWindow = Window_CommandPokemon.newWithSize([],
         self.x+Graphics.width-240,self.y,240,Graphics.height-self.y,viewport)
      @cmdWindow.columns       = 2
      @cmdWindow.columnSpacing = 4
      @cmdWindow.ignore_input  = true
      addSprite("cmdWindow",@cmdWindow)
    end
    self.z = z
    refresh
  end

  def dispose
    super
    @buttonBitmap.dispose if @buttonBitmap
  end

  def z=(value)
    super
    @msgBox.z    += 1
    @cmdWindow.z += 1 if @cmdWindow
  end

  def setTexts(value)
    @msgBox.text = value[0]
    return if USE_GRAPHICS
    commands = []
    for i in 1..4
      commands.push(value[i]) if value[i] && value[i]!=nil
    end
    @cmdWindow.commands = commands
  end

  def refreshButtons
    return if !USE_GRAPHICS
    for i in 0...4
      button = @buttons[i]
      button.src_rect.x = (i==@index) ? @buttonBitmap.width/2 : 0
      button.src_rect.y = MODES[@mode][i]*BUTTON_HEIGHT
      button.z          = self.z + ((i==@index) ? 3 : 2)
    end
  end

  def refresh
    @msgBox.refresh
    @cmdWindow.refresh if @cmdWindow
    refreshButtons
  end
end

 

[ThatWelshOne_]

What have you tried so far?
I think the first thing to look at is this chunk of code:

@buttons = Array.new(4) do |i|   # 4 command options, therefore 4 buttons
  button = SpriteWrapper.new(viewport)
  button.bitmap = @buttonBitmap.bitmap
  button.x      = self.x+Graphics.width-276
  button.x      += (((i%2)==0) ? 0 : @buttonBitmap.width/2-4)
  button.y      = self.y+8
  button.y      += (((i/2)==0) ? 0 : BUTTON_HEIGHT-0)
  button.src_rect.width  = @buttonBitmap.width/2
  button.src_rect.height = BUTTON_HEIGHT
  addSprite("button_#{i}",button)
  next button
end

Since you want all of your buttons in a column, you can make it so that the x value of each button is the same. You'd then need to change the y values to have one column rather than two columns.

 

[Stuns]

What have you tried so far?
I think the first thing to look at is this chunk of code:

@buttons = Array.new(4) do |i|   # 4 command options, therefore 4 buttons
  button = SpriteWrapper.new(viewport)
  button.bitmap = @buttonBitmap.bitmap
  button.x      = self.x+Graphics.width-276
  button.x      += (((i%2)==0) ? 0 : @buttonBitmap.width/2-4)
  button.y      = self.y+8
  button.y      += (((i/2)==0) ? 0 : BUTTON_HEIGHT-0)
  button.src_rect.width  = @buttonBitmap.width/2
  button.src_rect.height = BUTTON_HEIGHT
  addSprite("button_#{i}",button)
  next button
end

Since you want all of your buttons in a column, you can make it so that the x value of each button is the same. You'd then need to change the y values to have one column rather than two columns.

The only thing I tried that I thought actually achieved something was setting "button.x += (((i%2)==0)" to "button.x += (((i%1)==0)" & "button.y += (((i/2)==0)" to "button.y += (((i/4)==0)."

Ultimately I got stuck here and couldn't find how to separate the buttons downwards into a column. I just tried removing the "+" in "button.x += (((i%2)==0)" and changing some stuff but nah I'm still lost. How would I go about making the x value of each button the same and set the y value to be one column?

 

[ThatWelshOne_]

To have the x values be all the same, you could try commenting out this line:

button.x      += (((i%2)==0) ? 0 : @buttonBitmap.width/2-4)

Put a hash (#) at the beginning of a line to comment it out. The code should turn green if you're using the script editor in RPG Maker XP.
To get one column, you could replace this line:

button.y      += (((i/2)==0) ? 0 : BUTTON_HEIGHT-0)

with this:

button.y      += ((i==0) ? 0 : BUTTON_HEIGHT-0)

I'm not entirely sure about that, but give it a go and see what happens.

As an aside, when you see something like i%2 in Ruby, this is what's called a modulo (or modulus, I forget which). It's basically a way to get the remainder when you divide one number by another. In this case, you're looking at the remainder when i is divided by 2. Since i ranges from 0 to 3 (inclusive), the following happens: 0%2 (0 divided by 2) is 0 (no remainder); 1%2 has a remainder of 1; 2%2 has a remainder of 0; 3%2 has a remainder of 1. Then, with this bit of code (((i%2)==0) ? 0 : @buttonBitmap.width/2-4), we're asking "is the remainder when dividing i by 2 equal to 0? If yes, add 0 to the x-position of the current button. Otherwise, increase the x-position of the current button by @buttonBitmap.width/2-4." This makes the buttons appear in two columns.
FYI, i%1 will always be 0 and, in this case, i/4 will also always be 0.
My maths is a bit rusty, so someone correct me if I'm wrong.

 

[Stuns]

To have the x values be all the same, you could try commenting out this line:

button.x      += (((i%2)==0) ? 0 : @buttonBitmap.width/2-4)

Put a hash (#) at the beginning of a line to comment it out. The code should turn green if you're using the script editor in RPG Maker XP.
To get one column, you could replace this line:

button.y      += (((i/2)==0) ? 0 : BUTTON_HEIGHT-0)

with this:

button.y      += ((i==0) ? 0 : BUTTON_HEIGHT-0)

I'm not entirely sure about that, but give it a go and see what happens.

As an aside, when you see something like i%2 in Ruby, this is what's called a modulo (or modulus, I forget which). It's basically a way to get the remainder when you divide one number by another. In this case, you're looking at the remainder when i is divided by 2. Since i ranges from 0 to 3 (inclusive), the following happens: 0%2 (0 divided by 2) is 0 (no remainder); 1%2 has a remainder of 1; 2%2 has a remainder of 0; 3%2 has a remainder of 1. Then, with this bit of code (((i%2)==0) ? 0 : @buttonBitmap.width/2-4), we're asking "is the remainder when dividing i by 2 equal to 0? If yes, add 0 to the x-position of the current button. Otherwise, increase the x-position of the current button by @buttonBitmap.width/2-4." This makes the buttons appear in two columns.
FYI, i%1 will always be 0 and, in this case, i/4 will also always be 0.
My maths is a bit rusty, so someone correct me if I'm wrong.

Thanks, this does give me one column however it's only 2 buttons high with the other 2 buttons overlapping them.

 

[ThatWelshOne_]

Ah yes, that was my mistake.
I think you could try this:

button.y      += i*(BUTTON_HEIGHT-0)

 

[Stuns]

Ah yes, that was my mistake.
I think you could try this:

button.y      += i*(BUTTON_HEIGHT-0)

Thanks that's amazing it's all in one column now! I also changed

button.x      += (((i%2)==0) ? 0 : @buttonBitmap.width/2-4)

to

button.x      += ((i==8) ? 0 : @buttonBitmap.width/2)

Idk how good it is but it looks like it moved all the buttons to the side like I wanted. Later I'll just have to figure out how to change the controls for the menu so that I don't still have to push DOWN, RIGHT, UP, LEFT life it's still a 2x2 grid of buttons. I appreciate the help.

 

[ThatWelshOne_]

That's great! Your new code is redundant, though, since i will never be equal to 8, which is what i==8 is assessing. You could just replace that line with:

button.x      += @buttonBitmap.width/2

This achieves the same thing.
For the controls, that's a good question. I don't know myself, so I'd be very interested in the answer as well!

 

[Stuns]

Ok, I think I've managed to solve the controls issue finally! To fix the controls I replaced this in Scene_Commands:

if Input.trigger?(Input::LEFT)
        cw.index -= 0 if (cw.index&1)==1
      elsif Input.trigger?(Input::RIGHT)
        cw.index += 0 if (cw.index&1)==0
      elsif Input.trigger?(Input::UP)
        cw.index -= 2 if (cw.index&2)==2
      elsif Input.trigger?(Input::DOWN)
        cw.index += 2 if (cw.index&2)==0
      end

with this:

if Input.trigger?(Input::DOWN)
        if cw.index >= 3
          cw.index = 0 #if (cw.index&2)==2
        else
          cw.index += 1
        end
      elsif Input.trigger?(Input::UP)
        if cw.index == 0
          cw.index = 3 #if (cw.index&2)==0
        else
          cw.index -= 1
        end
      end