Jump to content

Rework Event: Battle UI


Eaty

Recommended Posts

Hello. I would like to introduce you my idea for Battle UI rework. I think I've met all requirements from the first post, so let's begin:

 

First of all I've decided to move the main menu to the bottom bar. We have more space now on the right side so we can add Mega Evolution and Z-Move buttons. Each button is active only if the right item is detected on Pokemon. On the left side I've added Battle Log and Battle Info tabs.

 

[spoiler=1 vs 1]1v1.thumb.png.5093bdf5864ffad935bcd0c8999f0d71.png

 

 

Moving main menu to the bottom gives also advantage for more items visible when backpack is opened. It can save time during scrolling through item list.

 

[spoiler=Items]items.thumb.png.c47ea40c65c4794f1958d8181ec600fe.png

 

 

Now, when we have hazards info on the left tab, we can change current mouse hover option. It could show stats changes and other effects active on each Pokemon, when you hover mouse on Pokemon's name.

 

[spoiler=Stats]1v1_stats.thumb.png.5f1007957cd8959ca115df29ba5ad779.png

 

 

Let's move to the 2v2 and 3v3 battles. It would be much easier if the game could show which Pokemon is currently attacking and which opponent's Pokemon should be hit by the move. The base plate of active Pokemon could be green and after choosing right move the opponent's plate is red.

 

[spoiler=2 vs 2]2v2.thumb.png.fd5b59b7ecfbca8ef81658adad4a44f8.png

 

 

[spoiler=3 vs 3]3v3_1.thumb.png.7e7bdc77ef9016fe8ac10b2fa61f5cfa.png

 

 

And about Z-Moves. After choosing Z-Move button instead of regular moves list it should show all Z-Moves available for Pokemon.

 

[spoiler=Z-Move]zmove_active.thumb.png.0872400866e0bef0b17347fd2b95efc6.png

 

 

[spoiler=Z-Move List]zmove_chooselist.thumb.png.3cbbcae3f08e14cdb7f1d53a19bf93b7.png

 

 

Hope you like my idea :)

  • Like 22

 

kyloteam.png.42f4a829325bc7fe87c9c8dfb99e1e71.png
Link to comment
Share on other sites

Hello guys (:

Please open the spoiler and click on the images to view them.

 

[spoiler=1v1_first impression]

android_battle_ui_1v1_v2_clean.jpg

The first picture is 1v1 clean version. This means it doesn't contain info boxes and effect boxes.

android_battle_ui_1v1_v2.jpg

The 2nd picture include those boxes I've mentioned. When opening the Battle Information the sprites should resize to fit the battle field.

The Info boxes for moves and stats are ONLY seen when you hover on it PC player. Mobile user can press the i-con for move information. For stat information mobile player can double click the name.

android_battle_ui_1v1_v2_leftv.jpg

Here you can see the screen for people who prefer the menu on the left side. Can be achieved through the settings toggle on the top left side.

If you would like to chat , you might use the settings which are on the bottom side at the battle information box.

 

 

 

[spoiler=Menu_UI_switching_and_items]

team_switch.jpg

Here you can see the UI when you want to switch out the current Pokémon which is placed in a slightly green box. For 2v2 and 3v3 there will be obviously 3 green boxes to indicate which Pokémon are active fighting. Defeated Pokémon are shown with a red overlay.

 

item_menu.jpg

Here you can see the UI for using ITEMS. There is a quick pick( Last used item) and 3 categories which are like tabs. The first category has all HP and status items. The 2nd has Pokéballs. And the 3rd has battle items such as X-Attack pills or whatever they are called.

 

 

 

[spoiler=2v2 and 3v3]

android_battle_ui_2v2_withbatt.jpg

Here you see 2v2 with the battle information. So the sprites are smaller.

android_battle_ui_2v2_without_.jpg

Here 2v2 without battle information. Sprites are slightly bigger.

android_battle_ui_3v3_battle_l.jpg

Here 3v3 with the battle information. Sprites slightly smaller.

android_battle_ui_3v3_without_.jpg

Here 3v3 without battle information and the sprites are resized again.

 

 

 

[spoiler=Z_move and mega_stone]

Depending on the pokemons item these icons should be clickable and you will be asked to use Z-move or Mega Evo. You can cancel it or press ok.

*Important* For normal moves you won't be asked.

Also the name of the Z move will be in the dialog box top right corner!!! Not in the actual former move. Since the longest Z - Move name has 25letters.

 

megastone_menu.jpg

zmove_menu.jpg

 

 

Everything done so far is using the mobile first approach.

Which means that I designed it for mobile devices( 360x640).

The reason for that is that it is easier to scale later on since all Elements are already implemented. #responsive

Most Icons and Elements were done by me. I can provide you with further support and also adjust the design to your liking.

 

Here you can see how it would look on a mobile device.

[spoiler=mobile device]

1v1_clean_htc_one%403x.jpg

3v3_clean_htc_one%403x.jpg

3v3_with_all_info_htc_one%403x.jpg

 

 

 

I appreciate feedback and I am willing to make changes if necessary. Please hit me up on my DMs if you have suggestions.

Edited by Natryu
  • Like 5
Natryu-signiture.png

Link to comment
Share on other sites

BattleUIDemo.thumb.png.e2ed0f7c26426e16c035341d13711e95.pngBattleUIDemo2v3_1.thumb.png.8d4315b6351f9bc1bcecf6b507acb0bc.png

 

This is my battle UI. I decided to just include everything in one screenshot, so some things might not make sense from a battle perspective but I did this to show all of the visual aspects like buttons, chat log, effects and their turn count, statuses, and stat boosts. I put 3 Dedenne on one side and 2 Whimsicott on the other to show that there is room for double and triple battles. I put check marks for mega evolution and Z-moves, clicking the checkbox for Z-moves should change the appropriate moves to their appropriate Z-move. The Cancel button is used to undo any moves for example, if you are pvping and you pick a move but decide to change your mind before your opponent picks their move. I chose not to include a scroll bar for the chat log because I don't know PRO's capabilities and saving the entire battle log might be resource intensive so I set it up so that the battle log clears and resumes at the top when it runs out of room. I believe the entry hazard display should remain as it is, and should be visible if you hover over your team's HP bar. The current items page in the battle UI should also remain as it is. Weather icons now have a turn number indicator for simplicity, as I didn't want to clutter up the battle window with too many words. Room turn count is also displayed next to weather. Stat changes are color coded under the XP bar and effects like Taunt and Poison/Paralysis/Burn/Sleep are shown as well.

 

Also this battle UI is not a full-screen UI, just a slightly more rectangular version of the current one but it could be full screen. There could be an option in settings to make battle UI as fullscreen.

Edited by Whimsicott
whimsicott1.png

Link to comment
Share on other sites

Welp, here is my design, i cant computer draw so...ye...i had to draw it on paper

This is battle UI without battle log shown and then with battle log shown, the mega button and z-move button switch places when the pokemon is using one (mega becomes zmove if pokemon has z-crystal, zmove becomes mega if pokemon has mega stone)

if the pokemon has no mega pr z-move, move selection will be the usual 4 buttons.

(edit) z-move selectiom aded

 

This is the battle log up close, u can see that, at the bottom, it shows what setup and screen are present on which side (you = your side, oppo is opponents side) and the top shows turns and is scrollable, allowing you to keep track of moves

(edit) (screen-turns added)

 

hp bar and percentage

 

In 2v2 (UI and hp bars)

 

3v3 UI and hp bars (arrows to swap pokemon possition below)

 

during 2v2 and 3v3, pokemon u want to attack must be clicked/tapped

 

During 2v2 or 3v3, yellow floor below pokemon indicates that that is the pokemon you are instructing

 

when pokemon is taunted and when weather and rooms are active

 

dialogue below and move cancelation, stat changes

and this shld be the end of my presentation, gl to all

20190113_151028.jpg.d006c27c22b8eae6c563dbc22b9ed365.jpg

20190113_151100.jpg.cbc7ec848ff6b163bb175370bc95aec1.jpg

20190113_151201.thumb.jpg.727ea3c164fe965a827cb57d0098eafc.jpg

20190113_152016.thumb.jpg.f990855d548fcfe6c284d3cf26052d9c.jpg

20190113_152544.jpg.ffc45a4db91af10ca78027861697a597.jpg

20190113_152602.jpg.a088b05a71e67cb4a993ac0847bb2ec4.jpg

20190113_152954.thumb.jpg.fa291859953f1051b00469ab8633af70.jpg

20190113_160444.jpg.3b7658e443afaa781258c43b584466e1.jpg

20190113_160459.jpg.d1a8285c1ba59df460561ac13c4d22a4.jpg

20190113_161143.jpg.d0ebac9fc95a4c9648d8cf6046d3d7e6.jpg

20190113_161159.jpg.bc5c2df396737958ad2a0c86f00f2538.jpg

20190113_161312.jpg.918e5ecd6b4b47f5fe60b840e48d3054.jpg

20190113_161322.jpg.85efabe623ff3f1c8a5d9d53bac93bc3.jpg

20190113_161301.jpg.3f3ad7b24ab11184a488f340ef678d00.jpg

20190113_161329.jpg.d37de390eb8f9c8dc68d347cadbbda88.jpg

20190113_161445.jpg.88085ac7f28434db12d3b3d2dd29b19c.jpg

20190113_162448.jpg.766cfcbbec91897bca6b6d0288e3f6fe.jpg

20190113_163003.jpg.d5e6520875ef9451711055f89620294a.jpg

Edited by Shadow2054
  • Like 6
Link to comment
Share on other sites

Hello everyone! This is my work for the Battle UI Rework and I hope that you will like it. First of all I want to apologize for the big upcoming post. I have made a completely new Battle UI as you will see below and I have made a lot of changes compared with the current Battle UI and I think that these changes could help a lot everyone. Also, I'm thinking that this Battle UI shouldn't be used only for PvP and it could work as well at normal battles with wild Pokémon, NPCs, Bosses, etc. I will explain every thought that I had above each image, while I was working on this Battle UI, even the obvious things, in order to avoid leaving any possible questions unanswered.

 

So let's begin!

 

Generall Idea: My idea was to create a Battle UI a bit similar to Pokémon's 3rd-5th Generation video games. Then I thought that it would be completely different with the current Battle UI and people either wouldn't like it at all or they couldn't get used to it and to enjoy it. So I tried to combined them a bit, if anyone can say so. Also, I made bigger buttons, in order to help mobile users, as I know that a lot of people use the Android version of the game and they keep complaining that the buttons are too small and they missclick a lot. I play the game in my PC, but I have played a bit in my mobile phone, too and the buttons where a bit small and in my opinion they weren't practical. The buttons where a bit small to me, not only in the fight, but generally in the game and imagine that my mobile phone has a screen of 5,5 inches. Ok, it's a game in the phone and no one expects to have big buttons, but they should be a bit bigger than they are now. I wanted my Battle UI to have big buttons enough, to be clear and distinct, to be understandable, and to have as much space as it can be between everything, that appears in it.

 

Here is a first look at my work...

 

Screenshot_29.thumb.png.f2eec972d933bfdce9a1bf33a9bc1fae.png

 

Main Menu: This is how the Battle UI's main menu would look like, when we are in the start of the fight. You can see that there is a countdown in the right bottom corner near the "Run" button. This is like the countdown that the current PvP Battle UI has, but this one that I used, shows the minutes and the seconds that have left for our move. In my opinion this is better than just showing a bar that ends as the time passes. I placed it down in the menu section, because in my opinion our eyes will mostly check in this section, as we have to choose an action that we want to do, to use the move, the item and the Pokémon that we want and I think that it's the best place there in order to check it easier and not to check the one moment in the menu section and the other at the top, where it is right now in the current Battle UI. This countdown is the same for us and for our opponent. Also, I have made two references in the anime, in the main buttons with Red's bag appearing in the "Bag" button and Ash appearing in the "Run" button, where he runs to escape from the fight. I hope that there is no problem with copyrights as I found these pictures in Google.

 

So the fight starts...

 

Screenshot_30.thumb.png.bdb6e9a58166fa6161918c6af2d6b102.png

 

Fight Menu: When someone presses the "Fight" button, this menu appears, where it contains the moveset of the first Pokémon of his/her squad, the "Mega Evolution" and "Z-Move" buttons, again the countdown in the same position as it was in the main menu and a "Cancel" button, which if it is pressed, we go back to the main manu. About the moves, the first move is Flamethrower, the second is Fly, the third is Earthquake and the fourth is Crunch. The moves have all the information that someone needs. They have the type's name in order to be recognizable easily, in case that someone doesn't remember the move's type and also the have an outline of type's color just for looking cool. They have the power's, accuracy's, PP's and category's information, too. If we hover over the moves, it should appear a window with the move's description. The buttons for Mega Evolution and Z-Move can't be pressed if a Pokémon doesn't hold a Mega Stone or a Z-Crystal, respectively, or if it is Mega Evolved and these buttons should be like this:

 

Screenshot_36.png.bcea173d120ff3562b4b7a10bc93c859.png

 

Also, if a Pokémon doesn't know four moves and for example it knows only three, the last of its moves should be like this:

 

Screenshot_37.png.6560268902604986afd135ba000555b0.png

 

Here, is a better example:

 

Screenshot_54.thumb.png.f02cc93dea2e5106d7b5e0175d0a828e.png

 

In 2v2 or 3v3 battles, we have to choose in which Pokémon we want to use our moves. So, I thought something like this...

 

Screenshot_38.thumb.png.27aaa7082750fba1cb1622a95af8e03f.png

 

This appears in the menu section when we have chosen a move to use against our opponent's Pokémon, but we haven't chosen which Pokémon we want to attack. As you see the terrain of each Pokémon is transparent.

 

Screenshot_39.thumb.png.249622592b8c81be8051131e89b8ffbe.png

 

When we hover our cursor over the Pokémon, that we want to attack, that Pokémon's terrain will not be transparent anymore and it will be as it is in the battle screen. This indicates which Pokémon we are about to attack. Now if we press that Pokémon, the selected move will be used against it. As you see the rest Pokémon's terrains are transparent, because our cursor isn't above them. So now we are ready to use a move against opponent's Gardevoir and if we press Gardevoir, our selected move will be used against it.

 

Now, let's press the "Cancel" button and then the "Bag" button to check our bag...

 

Screenshot_31.thumb.png.bf0ded9fe2b5b74095a8c5abfb3b68a0.png

 

Bag Menu: Here as you can see the bag menu contains all of our Poké Ball and our medicines. I would like that all of these items, to be in alphabetical order. In this picture the first item in our bag is Poké Ball, the second is Great Ball, the third is Ultra Ball and so on, and in the below line the Potion is the sixth item, the Max Potion is the seventh item and so on. If we hover over the items, it should appear a window with the item's description. Near the items, there is a scroll down bar with arrows on its edges, in case that someone wants to use them to scroll down. Again there is the "Cancel" button and the countdown and there is a "Search" section, where we can type as many letters we want in order to find the item that we want, in case we have a lot of items in our bag. For example, if someone types "Premi", the Premier Ball should appear if he/she has any. Also, I would like to share an idea about finding an item. An item should appear even though when someone types its letters with not the correct order. For example, if someone types "abll" in the "Search" section, all the items that have the letters "a", "b", "l" and "l" in their names should appear, regardless of their order in the item's name. This should be implemented in the Pokémon storage too, while some people doesn't know how to type correctly a Pokémon's name and they have to find it among all of the Pokémon that he/she has. Also, in the Pokémon storage should be implemented that you can type "." (dot) or " " (space), because for example you can't find Mime Jr., unless you search it among all of your Pokémon. Also, we have to know which Pokémon we are using, while we search our items in our bag. This can be shown by the terrain of that Pokémon. If it isn't transparent, then it is the Pokémon that we are using right now and for example we can give it a Max Potion, if it needs it.

 

Let's press the "Cancel" button again and now let's press the "Pokémon" button to check our Pokémon...

 

Screenshot_32.thumb.png.025b1e08eb7fd7600338fb9d196c6773.png

 

Pokémon Menu: As you can see here we have again the countdown and the "Cancel" button. Except these we have our Pokémon squad with the very left Pokémon to be the first of our squad and the very right Pokémon to be the sixth of our squad. Furthermore, a fainted Pokémon should be transparent as this Ferrothorn with the "fainted" status above its head, too. Here, there are some status conditions above each affected Pokémon's head and below of the Pokémon that is Mega Evolved or it has used a Z-Move, there is the Mega Evolution's symbol and it shows which Pokémon we have Mega Evolved in this fight and the Z-Move's symbol and it shows which Pokémon used a Z-Move in this fight, respectively. Also, here we can check each of our Pokémon's HP.

 

Now that the explanation of each menu has ended, let's explain what we see in the batle screen...

 

Screenshot_40.thumb.png.e93e1397db9e7d1cf68274e518c02ecd.png

 

Battle Screen: I am thinking that when the fight is about to start, the battle screen that shows the Pokémon, the HP/Level bars and the backgrounds fade in, then the first Pokémon with its HP/Level bar appears (first two for 2v2 or first three for 3v3) and after that we can make any action that we want. The Pokémon that appear in the fight at first, are our first three Pokémon. As you can see in the image we have Charizard, Mega Gengar and Tyranitar. Charizard is the first Pokémon in our squad, Mega Gengar is the second and Tyranitar is the third one, that was sent out in the place of a fainted Ferrothorn. Our opponent's first Pokémon is Charizard, the second Pokémon is Mega Gengar and the third one is Gardevoir. In addition, you can see that our third Poké Ball at the top, to the left of our name is transparent and that is because our third Pokémon fainted (Ferrothorn) and in its place we sent out Tyranitar. So, the very left Poké Ball is our first Poké Ball and the very right is our sixth Poké Ball. For our opponent, the very left Poké Ball is his/her first Poké Ball and the very right is his/her sixth Poké Ball. I did it this way, cause I think it helps a lot, as it's like reading a text. Also, if a trainer doesn't have a Pokémon to send out in the place of a fainted Pokémon, the fainted Pokémon should be transparent like Gardevoir in the image above. In case, that we battle for example, a swarm of Ariados (2v2 or 3v3 battle), then the fainted Pokémon would be transparent like the Gardevoir in the image above, or it would be removed from the field. I didn't design a 2v2 battle, because it's the same with a 3v3 battle. Moreover, the status conditions, Mega Evolution's symbol and Z-Move's symbol should be near each Pokémon's name in order to know which Pokémon has a status condition, or it is Mega Evolved or it has used a Z-Move. By the way, the order of the status condition and the Mega Evolution's or the Z-Move's symbol should be like this: First Gengar has been Mega Evolved and after that Gengar fall asleep. So, the symbol that is nearest to each Pokémon's name is the one that happened first. Also, the name of each Mega Evolved Pokémon should be changed to the mega one, such as "Gengar" to be changed to "Mega Gengar". I think that it would be perfect, if there would be an indication of how much HP does a Pokémon have, like "HP: 284/350". This helps us knowing how much damage deals, a move from our opponent's Pokémon to a specific Pokémon of our squad. With this change if we take damage from a certain opponent's Pokémon move, then we may know how much the same move will deal the next time the same two Pokémon fight again, unless there were stats or something that changed the move's power. Now you can see that appears the weather's symbol in the battle screen, which in this case is Sandstorm's symbol. Something else about battle screen, is that we have to know which Pokémon we use each time. We can understand it from the terrain below of each Pokémon. The unselected Pokémon's terrain is transparent and it shows us that we don't use that Pokémon and we use the one that its terrain isn't transparent. We really don't care which Pokémon our opponent is using each time and that's why there isn't any transparent terrain below of his/her Pokémon. We check at the Battle's Log, which Pokémon he/she uses. Also, if we own a Pokémon that our opponent owns, too, a Poké Ball should be appear near the Level Bar and if we don't own it, then that place should be blank. If a trainer doesn't have complete squad (six Pokémon), then his/her squad near his/her name, should be like this:

 

Screenshot_41.thumb.png.de2718e43af23b222481ef7bd7eade46.png

 

As you see there are five Poké Balls in the Player's 2 squad, instead of six, as he/she doesn't have complete squad.

 

Now what is going on when our opponent's turn arrives?

 

Screenshot_42.thumb.png.38ed2e674082bdd2edb8bb8cccbc6b07.png

 

Waiting For Opponent: This message appears, when the opponent's turn arrives. And when our opponent makes his/her move this message disappeares and we are redirected to the main menu, where we are ready to make our next move.

 

Something else that you may have noticed, is that I don't have the battle's information about the weather's/trick room's turns, the buffs, some status conditions such as "flinched", the entry hazards and some kind of battle log. This is why it is hidden and it is revealed with this button:

 

Screenshot_43.png.b65a3db921597db0876badb4d2013b8a.png

 

It is hidden, because it may covers enough space and this can be annoying. If someone presses it, it opens and it is like this:

 

Screenshot_44.thumb.png.eb56297b5a0642deafae0d1fbd6fa9de.png

 

Now let's discuss a bit about this window...

 

Battle's Information/Buffs, Status Conditions and Entry Hazards/Battle's Log: Here as you can see there are all the information about the battle such as the time that counts down (I wanted to place it in this section, too, because someone might be busy, while he/she tries to find something in this window and he/she didn't look at the countdown that there is in the main menu, in the fight menu, in the bag menu and in the Pokémon menu), the weather and the room effects and how many turns have passed. If there isn't any weather or any room effect in the field, then in the place of weather and room effect, should appear this: "Weather: None." and "Room Effect: None.". Also, here there is a buffs/status conditions/entry hazards section with a scroll down bar, where it shows for each player his/her Pokémon's buffs/status conditions (if there is any) and if any of his/her Pokémon is affected by any entry hazard. Furthermore, there is a battle's log, in which we can see everything that took place in this fight. Check the examples of battle's information, of buffs/status conditions/entry hazards and of battle's log:

 

Screenshot_55.thumb.png.11b8aada2f0e07dfaa0a02c020868f53.png

 

Time shows how much time has left for our move and also there are how many turns have passed from the weather and room effects.

 

Screenshot_56.thumb.png.f05a1dd8f3a44d73c0afbe00c4dff05a.png

 

Here we see the buffs, the status conditions and the entry hazards that affect each Pokémon. In status conditions's section there should be only the status conditions that don't have a specific symbol, in order to be recognizable such as "Sleep" that has this symbol:

 

Screenshot_45.png.486c08bb7e16e0b5263db596e64b482a.png

 

So in this section there should be only the status conditions like "Taunted", "Flinched", etc. and not the major status conditions such as "Burned", "Frozen", etc. The major status conditions are shown in the battle screen and we can recognize them easily. Namely, there should be only status conditions that affect mobility like "Wrapped", that affect move execution or move effects like "Confused", the move-based status conditions like "Dig", the shield status conditions like "Reflect", the sword status conditions like "Focus Energy", those status conditions that affect the use of items like "Embargo", the HP-related status condtions like "Leech Seed", the visibility-related status conditions like "Miracle Eye" and finally the miscellaneous status conditions like "Gastro Acid". Also, among these status conditions there should be only one sleep-related status condition like "Sleepless". In the entry hazard's section we see that there is an entry hazard with its symbol, that affects each Pokémon. Let's check a better example of how this section is:

 

Screenshot_53.thumb.png.9c4035c88d32b06e5054b2f95a8e1155.png

 

And now we check the last section of this window...

 

Screenshot_57.thumb.png.806663398ed7ddb74b3634493f27b21a.png

 

Now we have a Battle's Log with a scroll down bar, where there is what exactly and when happened in this fight from start to finish. The "Mins:Secs" indicates the real-life time. For example, if we started a fight at 16:57, in the start of the fight there should be this time (16:57). I didn't know if you wanted to check some new sentences and that's why I sticked to some classic sentences and I added some new things that the current battle log doesn't have. I think that you may wanted to see a place for battle log and not some kind of battle log with some sentences of mine, but if you want something like this I can work on it.

 

Now what happens if someone missclicks an action and wants to correct this mistake? I think that this can be very helpful...

 

Screenshot_46.thumb.png.2c045a98adfdafcc1fe0a66fed320d84.png

 

This question should be appeared after every action that we take, because a lot of people have missclicked a button or they have regreted about their choice of a move/item/switch Pokémon. I think that this will be very helpful to all of us. But this can also make the game very slow, so I recommend to use it only in "Mega Evolution" and "Z-Move" buttons that can be used only once per battle. So if we wanted to mega evolve Gengar to Mega Gengar, then that message should appear.

 

Now I will show you how the Battle UI would look in game...

 

Screenshot_34.png.314d79966fa8610426cbac901a5672b6.png

 

Screenshot_35.png.8030d07920d06742155e823572ed1e03.png

 

Screenshot_52.png.9c2e40f44c2568c1e709e8b9c79c2dc3.png

 

Screenshot_33.png.83a9b90790e15a043580adf293f1a2d3.png

 

Screenshot_49.png.53c70587a8e165580a5eb5acb1732e11.png

 

Screenshot_47.png.52c1cc0404bc2956fefc67a1eb587269.png

 

Screenshot_48.png.dd72aa992e0fc25d0557b90d1ef3a945.png

 

Screenshot_50.png.f9e14830d2235afb627817b9dcf419f9.png

 

Screenshot_51.png.b21e1aff5e6fbfacb4acaddf6f6ca14f.png

 

So this is my Battle UI! I hope that you like it. I did my best in order to give you a Battle UI that everyone will enjoy!. I think that I haven't forgot anything and that I have covered everything about the Battle UI rework. If there is something that you don't understand, feel free to ask me. Also, in case that my Battle UI is chosen, if the developers want to know anything about my work such as my sources, the dimensions of the objects or more, of course you can ask me. Of course I can design some backgrounds for the battle screen, add some items that the game doesn't have right now, such as the rest Poké Balls and more! If you want anything, like I said before, don't hesitate to contact with me. I hope that the stuff will love it and the developers will not have problem to materialize it!

 

Credits go to Bulbapedia, because I used a lot of stuff from there and of course to Google!

Edited by Drojal
  • Like 3
Link to comment
Share on other sites

The one and only mian thing for - Enough space for 2v2 and 3v3 fights.

- Buttons for Megas, Z-Moves and Cancel a move. We need to implement the battle screen. This is our old or current battle screen in pro https://pokemonrevolution.net/forum/index.php?attachments/img_20190114_104820-jpg.61979/&hash=0ce6bfc0b7e38e85b6aec52b357d8cf2 IF we extended the screen. https://pokemonrevolution.net/forum/index.php?attachments/img_20190114_105734-jpg.61983/&hash=0ce6bfc0b7e38e85b6aec52b357d8cf2 The full screen will be fit for 2v2 or 3v3 battles. If w increase the screen size in pro increases it willingly be like. https://pokemonrevolution.net/forum/index.php?attachments/cutpaste_2019-01-14_11-16-47-131-jpg.61986/&hash=0ce6bfc0b7e38e85b6aec52b357d8cf2 But we need an update like in the battle the first Pokemon appears then we select move and then second poke appers we select move and third poke appears we select move after enemy also selected moves the battle starts. This the idea I got I got any other I post and I want pro members and staff to see my battle UI. AND I AM SORRY I GOT THE IDEA TODAY BUT DUE TO TODAY'S SERVERS OFFLINE I HAV USED SCREENSHOTS OF OTHERS FROM GOOGLE

Link to comment
Share on other sites

Hello! Everyone! This is my version of the Battle UI.

 

I made it simple as possible so it should be new players friendly, or at least I hope!

 

 

The first image is called "Battle", pretty self explanatory, it has 2v2, 3v3 fights. The number 1,2,3 represents 1v1, 2v2, 3v3 positions.

 

 

The second image is called Battle UI. Pokedex is encyclopedia about Pokemons information. Now! instead of that, it's a Battle UI showing information of an actual pokemon battle! If Trainers used Pokedex mid fight. Pokeballs on the right side to represents Players Pokemons. The left black bar is supposed to be "Shifting" when during Triple Battles, Players can shift around pokemons to avoid damage or change positions. The Right Black bar is supposed to be "Cancel". If the Player accidentally press a button, that they don't want, they can use the cancel their previous action. In the middle there's a yellow diamond shape between your four moves. The yellow diamond is the "Z-Move". While the top of the Pokedex there's your name vs opponent and weather icons knowing right away, in what kind of battle your into.

 

Next is the Battle Log/Items, by pressing the Info button, Two tabs will appear, the left is Battle Log, while the right is items/pokemon party. You have the usual Fight, Pokemon, Items, and Run Away. In order to switch pokemons, you do the exact same thing what we do now, press the Pokemon button to pull up your Pokemon Party and pick a Pokemon to switch, same thing with items. The Battle Log will display turn counter and moves displayed, so you don't forget and as well status effects when applied. There's also scroll bar on the right side of both tabs, so if you missing something, you can go back and look. The last big! Just incase if you can't find it! The Mega Evo icon is placed between of the other buttons.

 

PS: I'm sorry! If the images are too big! I never really done this before.

Battle.png.ee8ddb615e859233821dde8d8f616cab.png

1550451010_BattleUI.thumb.png.20d1965b6a084d453a0dadd2b6918651.png

1595941110_Battleitem.thumb.png.179962cbca12e20b7d35a10813fcbd1c.png

Link to comment
Share on other sites

3v3_battle informationPRO_Battle_UI_3v3.thumb.jpg.080d4e49b5e5b08c9f3a447e6bea70f8.jpg

 

 

Description: On the left you can see the battle information screen which can be opened by clicking on the plus icon ( minus icon if active). The screen includes information about room effects and buffs. The effects show the remaining turns. So basically it counts downwards( 3,2,1,0). Below you can see the battle log.

Next to the players name you can see your Avatar and the PVP rating. Below the team preview you can see the field hazards and the weather condition.

Mega Evolution should be triggered by clicking on the icon. You will then be asked if you are sure. You can cancel then or even afterwards if the opponent is still deciding for his move. Clicking on the Mega stone = yes.

 

[spoiler=Team Switch and stat info]PRO_Battle_UI_3v3_team_statusinfo.thumb.jpg.ee916ad7415d72548ca9f99c1f80b5b8.jpg

 

Description: The switch works with DRAG and DROP. The active pokemons are those with the green icon behind them. You will ask if you chose the correct Pokemon for the incoming switch and you can press OK or Cancel.

Stat information can be shown if you hover over a pokemon Name. It will show HP in % and ONLY buffs which made changes. So if you have no boost in ATK, the ATK change will not appear. I have placed ALL possible changes into this "bubble". Obviously most of them will not be triggered at the same time. Just to showcase what is possible.

[spoiler=Item usage]PRO_Battle_UI_3v3_item.thumb.jpg.d0855295398a22a9cacd475fdc2dba32.jpg

 

Description: I hope the Item menu is self explained. Only new thing are the categories: HP/Status heal items; Pokéballs and Battle items such as X-attack. And the feature last used item should be added for convenience .

[spoiler=Z-move usage]PRO_Battle_UI_3v3collapsed_and_zmove.thumb.jpg.0d4de525cd0eaaa66340467022c8d5d0.jpg

 

Description: Here is the Z-Stone placed where the Mega Stone would be. Depending on your choice, since you can't have both in one team. Same dialog function.

Important is. A NORMAL move, will not trigger a question where you have to press OK... You will just use it.

If you have not a Z or Mega Stone the box will be replaced with OK.

 

If you hover over a move it will show description of it as well information about Z-move. On mobile hover=press longer.

 

 

__________

Hello guys. Here is my second submission.

 

Quick info: Blue background should have around 90% opacity...

 

Nevertheless. I hope you like it. Vote it up and dm me feedback if you want. Criticism is welcomed.

Edited by Natryu
  • Like 11
Natryu-signiture.png

Link to comment
Share on other sites

Okay... First of all I wanna thank you for putting a big event like this.

Now following all your want,I came up with this battle UI

And I actually try to make more MODERN and HANDY

Its a demo and after winning I will give you the full version of battle UI

Thank you

 

u2i.thumb.png.6d1b112e3e5561df33cc700af2fbc4d6.png

u3i.thumb.png.c0ffe1b34ede53f169c33c7dbed53e2b.png

u4i.thumb.png.768b037bbee66d239c880c9ef88b89f1.png

  • Like 1
Link to comment
Share on other sites

Hello Admins and Devs. I have come up with a new UI that i think might work out. Since the images were so large in data, I wasn't able to put it in the forms, so i decided to put them into a google sites and therefore, anyone who has the web address can look at my ideas. I will put that on and hope Admins and devs can see it. If you can't, please reach out to me int he forums and I'll try and fix things up. Thank you! I'm sorry. I know the rules were that I have to put it in here, but the forums just said the image was too big and I can't post the image on here. I did the google sites by force. Sorry for the inconvenience.

 

My Ideas for the UI. Click on this to go!

 

and if the link does't work, I guess copy and pasting works too...

 

https://sites.google.com/view/pro-battle-ui-by-randomopkid

 

Thank you for considering and I hope I was a little help. Thanks!

Link to comment
Share on other sites

Guest
This topic is now closed to further replies.
×
×
  • Create New...