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

This thread pertains to v18.1 of Pokémon Essentials.

#### Stuns

##### Rookie
Member
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.

Ruby:
#===============================================================================
#===============================================================================
# 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.windowskin  = nil
if USE_GRAPHICS
# Create background graphic
background = IconSprite.new(self.x,self.y,viewport)
background.setBitmap("Graphics/Pictures/Battle/overlay_command")
# 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
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
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

#### Attachments

• current state.JPG
55.2 KB · Views: 18
Solution
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:
Ruby:
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!

#### ThatWelshOne_

##### Eevee User
Member
What have you tried so far?
I think the first thing to look at is this chunk of code:
Ruby:
@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
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

##### Rookie
Member
What have you tried so far?
I think the first thing to look at is this chunk of code:
Ruby:
@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
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_

##### Eevee User
Member
To have the x values be all the same, you could try commenting out this line:
Ruby:
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:
Ruby:
button.y      += (((i/2)==0) ? 0 : BUTTON_HEIGHT-0)
with this:
Ruby:
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.

Last edited:

#### Stuns

##### Rookie
Member
To have the x values be all the same, you could try commenting out this line:
Ruby:
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:
Ruby:
button.y      += (((i/2)==0) ? 0 : BUTTON_HEIGHT-0)
with this:
Ruby:
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.

#### Attachments

• current state.JPG
51.8 KB · Views: 7

#### ThatWelshOne_

##### Eevee User
Member
Ah yes, that was my mistake.
I think you could try this:
Ruby:
button.y      += i*(BUTTON_HEIGHT-0)

#### Stuns

##### Rookie
Member
Ah yes, that was my mistake.
I think you could try this:
Ruby:
button.y      += i*(BUTTON_HEIGHT-0)
Thanks that's amazing it's all in one column now! I also changed
Ruby:
button.x      += (((i%2)==0) ? 0 : @buttonBitmap.width/2-4)
to
Ruby:
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_

##### Eevee User
Member
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:
Ruby:
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

##### Rookie
Member
Ok, I think I've managed to solve the controls issue finally! To fix the controls I replaced this in Scene_Commands:
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:
Ruby:
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