Changing the layout of the Pokegear buttons?

[ppooookkkkkkk]

I'm trying to make my Visua and Smart Poké-Pocket scripts,

I've used Pokegear script as a bait, I've managed to add the commands but I want to change the whole layout. This wouldn't have been difficult if the Pokégear didn't managed to automatically align all commands like a menu, so any help?

I've provided an example of what I want.

 

[Maruno]

The Pokégear uses the standard command list class Window_CommandPokemon. You know what else uses that? The commands in battle, and conveniently those commands are arranged in a 2x2 grid which is roughly what you want here. Therefore you can look to see what makes it multi-column and try it out for yourself.

Throw this line into the mix and see what happens:

@sprites["command_window"].columns=3

The next part, of course, is the placement of each button, but that's fairly simple. You can come up with a few calculations to decide each button's coordinates depending on its index number (i). Remember that options go across first and then down, in typewriter style.

That's the simple solution. It'd require a slight redesign, though, such that there are the same number of buttons in each row (ignoring the last row) - currently your second row has only 2 buttons in it.



The more complicated solution is to forego using Window_CommandPokemon and instead make a custom command list yourself. Once again, there are existing examples to help you. The party screen is basically a 2x3 grid of buttons, but there are one or two extra buttons at the bottom which makes its navigational layout unconventional, and thus it requires a custom navigation system. Have a look at def pbChangeSelection in PokemonParty and you'll see a bunch of calculations which decide how to move the cursor when you press a direction key - you can do the same here. All you need to do is change a value (the currently selected index) depending on the key pressed.

This approach will let you have any layout you want, but on the downside, you'll have to design the navigation for it yourself. Again, you'll have to reposition the buttons as well.

 

[ppooookkkkkkk]

Thank you very much, my teacher used to say that you can only learn from experts which you are in rgss

 

[ppooookkkkkkk]

The Pokégear uses the standard command list class Window_CommandPokemon. You know what else uses that? The commands in battle, and conveniently those commands are arranged in a 2x2 grid which is roughly what you want here. Therefore you can look to see what makes it multi-column and try it out for yourself.

Throw this line into the mix and see what happens:

@sprites["command_window"].columns=3

The next part, of course, is the placement of each button, but that's fairly simple. You can come up with a few calculations to decide each button's coordinates depending on its index number (i). Remember that options go across first and then down, in typewriter style.

That's the simple solution. It'd require a slight redesign, though, such that there are the same number of buttons in each row (ignoring the last row) - currently your second row has only 2 buttons in it.



The more complicated solution is to forego using Window_CommandPokemon and instead make a custom command list yourself. Once again, there are existing examples to help you. The party screen is basically a 2x3 grid of buttons, but there are one or two extra buttons at the bottom which makes its navigational layout unconventional, and thus it requires a custom navigation system. Have a look at def pbChangeSelection in PokemonParty and you'll see a bunch of calculations which decide how to move the cursor when you press a direction key - you can do the same here. All you need to do is change a value (the currently selected index) depending on the key pressed.

This approach will let you have any layout you want, but on the downside, you'll have to design the navigation for it yourself. Again, you'll have to reposition the buttons as well.

I have added the column lines but how do I change the command co-ordinates as they depend on the index number? another thing when I add the column line my Pokégear command selection is done from only Left And right buttons which should be from both up down and left right. Thx for the help btw.

 

[Maruno]

The commands are arranged in the following order:

0   1   2
3   4   5
6   7   8
9...

These numbers are what i is in the following code:

    for i in 0...commands.length
      x=118
      y=196 - (commands.length*24) + (i*48)
      @sprites["button#{i}"]=PokegearButton.new(x,y,commands[i],i,@viewport)
      @sprites["button#{i}"].selected=(i==@sprites["command_window"].index)
      @sprites["button#{i}"].update
    end

Of course, you'll need to completely remake the x= and y= lines to use more appropriate calculations. This will involve use of %3 and /3 respectively.

 

[ppooookkkkkkk]

The commands are arranged in the following order:

0   1   2
3   4   5
6   7   8
9...

These numbers are what i is in the following code:

    for i in 0...commands.length
      x=118
      y=196 - (commands.length*24) + (i*48)
      @sprites["button#{i}"]=PokegearButton.new(x,y,commands[i],i,@viewport)
      @sprites["button#{i}"].selected=(i==@sprites["command_window"].index)
      @sprites["button#{i}"].update
    end

Of course, you'll need to completely remake the x= and y= lines to use more appropriate calculations. This will involve use of %3 and /3 respectively.

I've adjusted them in columns, the only thing left for me to do is adjust them in rows to but I can't understand how?

else I've got in my hands.

Here's the changes I've made:
[/code]These numbers are what i is in the following code:

    for i in 0...commands.length
      x=118 - (commands.length*24) + (i*48)
      y=196 
      @sprites["button#{i}"]=PokegearButton.new(x,y,commands[i],i,@viewport)
      @sprites["button#{i}"].selected=(i==@sprites["command_window"].index)
      @sprites["button#{i}"].update
    end

This would raise much progress in my game!

 

[Maruno]

Here's a start:

x = 24 + 158*(i%3)
y = 36 + 104*(i/3)

 

[ppooookkkkkkk]

Here's a start:

x = 24 + 158*(i%3)
y = 36 + 104*(i/3)

Looks good, thank you very much! now it's up to me to fix the design issues!