A battle

The battle UI is what you see in battle. There are two main parts to it: the bar across the bottom where commands/messages appear, and the information panels for each Pokémon in battle (otherwise known as "boxes").

For backgrounds in battle, see Battle platforms. There is also a forum thread for battle UI submissions:

We are only having a single design for the battle UI, not a choice of several styles.

Submissions are open![]

The submission period is now open for information panels. You can put your designs on this page, or in the forum thread, or in the /vp/ thread.

The deadline is Monday 3rd November, 11:59pm GMT.

Information panels[]

Battle UI helpful

Useful graphics

The information panel displays various pieces of information about the Pokémon it is related to:

  • Name
  • Level
  • Gender ♂♀
  • HP (a bar and numbers)
  • Status (poisoned/paralysed/etc.)
  • Experience bar (player's Pokémon only)
  • Capture ball (shows the species has already been owned; opponent wild Pokémon only)
  • Shininess star (optional)

The information panel comes in several forms:

  • Player's Pokémon in single battles
  • Opponent's Pokémon in single battles - shows the same information as the player's panel, minus HP numbers and Experience bar
  • Player's Pokémon in double battles - typically excludes HP numbers and is shorter to allow two panels to fit into the space provided
  • Opponent's Pokémon in double battles - typically identical to the opponent's panel in single battles

You should ideally design all three (possibly four) versions of the panel when you design it. You should also ideally provide two views of each of them: one with no information, and one filled with as much (space-filling) information as possible (i.e. long name, level 100, 3-digit HP and total HP, status problem, shiny, gender, etc.).

An information panel should be designed to look exactly how it will look in-game. This means that it should use the correct font for the Pokémon's name, and potentially the correct font for HP and Level numbers too (although HP and Level numbers could be displayed as pictures of the digits rather than text). The "useful graphics" on the right contains (amongst other things) space-filling text for the name/level/HP (the WWWWWWWWWWWW and 3-digit HP and Level numbers) - if the information box can accommodate those, it can accommodate anything.

The most important aspect to consider when designing an information panel is height. This is because each side has two information panels in double battles, and space is very limited. The default graphics manage this by having the HP numbers on a "line" all to themselves, so that when they are removed for double battles, the entire line can also be removed to make the panel shorter. It also removes the Exp bar.

Feel free to add your information panel designs below. Please do not delete any images!

If you have any suggestions on how to use or improve the information panel (e.g. display more information), please leave a comment below.

Bottom bar[]

There are three different things that the bottom bar does:

  • Show Fight/Pokémon/Bag/Run commands
  • Show a Pokémon's moves to choose from
  • Show messages

There has not yet been any progress made in redesigning the bottom bar. It is commonly assumed that it will wait until the information panels are designed, at which point the bar's design will be made to match it. However, there is nothing to stop you from having a go anyway.