Rework Event: Battle UI

[Justkentan]

Hi everybody

My rework should stick to the current design with all new required buttons and stuff included.

I designed new buttons for the menu. And so I added in the "FIGHT" window the buttons for Z-Moves, Mega-Evolution and a button for cancel the moves.

It would be nice if the attack moves has the color of it type. For example: water attacks are with a blue touch. Maybe we can add a "super effective", "not effective", etc... sign to the different attacks, depending on the enemys pokémon.

The information for boosts and effects could be with a hover on the blue information button near by the health bar by each pokémon.

The weather stats could be simply added as shown. Maybe as an extra animation for rain for example would be great.

You can see at the top left corner a little triangle. With this you can show or hide the battle log as seen below.

Important for the textbox is, that every time it arrives the health bars should be hidden imo.

Thats all I guess.

Do not hesitate to ask if you need more detail informations about my rework battle ui.

[Barbarylion]

Hey everyone ^^,

 

I created a Battle UI and im very proud x) since im kinda new to Photoshop and i spend a lot of time creating this :D.

I created a completely new Design but tried to stay as true to the classic design as possible .

Sooo i hope U will like it ^^

 

 

First Picture shows the Countdown/Timer for the Round (necessary for pvp)

 

1. Battle LOG

I placed the Battle LOG on the left because i think this is the best way and looks nice.

in think the battle log should be able to fade in and out so i created a button for it.

(Random Text xD as Example)

10/11. Scroll Buttons for Battle Log

 

2. The Weather should be on the top (seems logic for me xD)

A little Icon that shows how many turns left.

 

3. Field Status

My Idea is it to show field status only if u want to.

So I created a Button for each Side where u can fade in all Informations.

(2nd Picture)

 

4. Title, Names etc.

Here is written what is happening in the moment.

For Example: If u Select the Pokemon Button it says"choose" or if u choose Fight in 3v3 Battle it tell u the name of the chosen Pokemon.

 

5. Buttons

Here we have the classic Buttons wich are colored if u choose/hover them.

(redesigned :D )

 

6.Cancel Button

I placed it like this because i think it should be near to the other buttons.

 

7. Mega & Z- Buttons

These Buttons should be gray until they are usable, then they should be highlighted.

 

8. Boosts and Effects should stay classic at the HP bar of the Pokemon.

 

Big thx to Kad1r and Chroxler

 

 

(I want to mention Obviously on the Top right Box u have the option to select Pokemon, Attack, Items etc...) =)

Edited January 10, 2019 by BarbaryLion

[Johnnbread]

Well this is my entry for the Battle ui, I like the original battle ui so I based mine off of it and did improvements on it that was needed with mega, z-power, where 2s and 3s would look like, stat changes, and a battle log that is naturally closed but can be open with a tab on the side. I also attached an example of how big the ui will be with the log opened in game. I hope you enjoy my changes ;D .

[Lpeuvmya]

Hello, this is the interface I made.

I thought about keeping the visual personality that PRO already has and not changing the interface we already know so that it would be easy for developers to implement, so we would have this update as soon as possible. So based on that I did that, I hope you like it.

 

IMAGE 1 - Components of a battle

The first part is the basic idea you already have in PRO:

- Keep the PRO buttons "Fight", "Pokemon", "Items" and "Run".

- Keep the dialog field

- Keep the VS. and the players name

 

The second part is of additional effects and status:

- Each pokemon that is about a buff condition or debuff in the statuses, will have this information informed leaving the Pokémon Life Bar, I created as Internet Browser Guides, with colors to represent if it is a buff or a debuff. (Example: Darkrai used Nastly plot and his special attack increased by 2 times, a blue colored tab will pop up with the status increased). However, the "status guides" should always keep the order that is already in the PRO. Attack, Defense, Speed, Sp. Attack and Sp. Defense.

- The effects like disable and taunted will appear in "white" tabs

 

The third part is about the climate, the field and the log:

- The climate is simple will have in the upper right corner a dialog box informing the turns of the weather and some field effects like trick room

- For spikes and toxic spikes of the visual form that is already present in the PRO, being visualized only in the field below the pokemons

- The log would appear and indicate the turns, it will be responsible for the time the player has for pvps matches and is recorded in percentages how much each pokemon suffered damage and etc (I thought about the pokemon showdown log and I based it here )

 

IMAGE 2 - Choosing the Attack ( Z-Move e Mega Evolution

 

 

The first part is about Z-move and Mega evolution, I thought of elaborating them as a tape that appears from behind the UI as if it were a folded paper.

A pokemon can not have a Z-move and Mega then evolve the "ribbon" both for mega evolution and for the Z-move would be in the same location.

 

In the options to choose the attack would be elaborated in two stages that I will speak in the next image, however the attacks would be maintained in the same way that is in the PRO but distributed lying down.

 

And last but not least the button to go back to return to the previous menu.

 

IMAGE 3 - Choosing the Target

 

The last part would be the second stage to choose the desired target.

 

 

And that's it. Some more points - I worked with the gray background so that the development team can choose the fields at will - The items would work the same way we have today in the PRO, but organized in a lying way, in the same way that the attacks

[Kotzf]

I'm kotzf , I'm mobile user , I think some button is too small ,so i design bigger button for battle ui.

Any color.button.position u can change, I just provide more comfortable ui.

I know PRO minimum window size is 800*600 ,so i design this size for battle ui (battle log is open).

 

see my video

 

[spoiler=battle screen]

 

[spoiler=open battle log]

 

[spoiler=move]

back button can go back battle screen

 

 

[spoiler=mega stone / z-moe use & cancel]

 

[spoiler=pokemon]

 

[spoiler=item]

 

 

Some ui explain:

[spoiler=1v1]

1.Boost ,ex:+atk*1, -Spd*2... , up at the area.

2.This sign is remind both of player who was used mega stone or z-move (suggest from my friend ,if u don't want can be cancel )

3.HP & EXP bar & effects.

 

 

[spoiler=2v2]

 

Edited January 8, 2019 by kotzf

[Davan997]

Xin chào quản trị viên

Tôi là Anh Đỗ, đầu tiên tôi cảm thấy thiết kế của bạn quá đầy đủ và chi tiết, vì vậy tôi đã thiết kế lại nhưng dựa trên ý tưởng của bạn và tôi coi đây là phiên bản cải tiến hơn và thêm Move Z và Evolution Mega. Và tôi hy vọng bạn thấy thiết kế này. Và thiết kế này cũng rất dễ sử dụng cho người chơi trên điện thoại và trên PC :)

 

1) Chiến đấu

Tôi thấy rằng 2v2 không khác gì 3v3, ngoại trừ việc xóa 1 pokemon, vì vậy tôi quyết định chỉ thiết kế 3v3.

Tôi cũng đã thêm nút Quay lại và chờ đợi đối thủ và tăng điểm chỉ số cho Pokemon trong trận chiến diễn ra.

Hình ảnh đầu tiên tương đương với pokemon đầu tiên, vì vậy sẽ không có nút quay lại và bắt đầu từ pokemon thứ 2 và thứ 3 sẽ có nút quay lại.

Lý do tại sao tôi đặt Move Z và Evolution Mega trong 1 là vì tôi thấy rằng mọi pokemon trong trận chiến đều giữ một vật phẩm cố định trong trận chiến, vì vậy khi có một con Pokemon khổng lồ, nó sẽ hiển thị các nút tiến hóa cực lớn và đảo ngược khi di chuyển Z + loại. Và tôi cũng đã thêm một danh sách các lượt và thêm đếm ngược thời tiết

 

2) Chọn Pokemon

Tôi nghĩ rằng tôi nên xem vật phẩm của mình hiện tại khi chuyển Pokemon vì người dùng trong trận đấu có thể quên vật phẩm mà pokemon của họ đang sạc và mỗi lần họ nhập Pokemon On và xem lại, làm như vậy rất thuận tiện và thời gian tiêu thụ, vì vậy tôi đã thêm vật phẩm mà Pokémon ác sẽ xuất hiện bên dưới pokemon của chúng.

 

3) Mục

Tôi nghĩ sẽ tốt hơn cho người dùng khi thấy số lượng vật phẩm họ đang tham gia trong trận chiến sẽ tiết kiệm thời gian tìm kiếm của người chơi và các lớp trong các trận đấu cũng không cần phải thay đổi vì quá tốt.

[Aquacry]

 

UI when we select battle option, after selecting move, in a 2v2 or 3v3 battle, we can click opponent's pokemon to select. if attack can damage all opponent pokemons, there will be no selections [ i have not put attacks in this img ].

Move cancel option, in middle of 4 move blocks. Will be RED when opponent has not yet selected move, and b/w when opponent has selected move.

This UI also have MEGA and Z-MOVE buttons, when ready, Button will be colorful and when not ready, will be b/w. In the box showing pokemon's hp and name, in that i had not yet added exp and lvl, i not had much time :| but that can be placed just down to hp.

Status condition is being show in opponents pokemons. Weather is already been showed.

 

We can see weather effecs, ofc

And Attacks like stealth rock, their effects will be shown when we put mouse over pokemon or just hold on ( in android ).

"S" sign shows that a pokemon is shiny :P

 

 

 

This UI is shown when you click on bag button, and have blank portion on right side; which will be used to place item blocks, and a scroller.

 

 

This is shown when we click Pokeball button, to switch pokemon, in this three pokemons are left, so after choosing one of them, we can click one of our three present pokemon to switch with.

Run button, always works , as to run ofc. this will also be b/w in a trainer/gym/pvp battle [ just except wild ].

 

Battle log, can be in a specific channel, or a message from system, only visible to user.

OR, left side can be extended and a battle log can be made there. Though, i have one more idea, what about a battle chat? [ not that one which already exists ] , in between two users [ if pvp ] ? if want to add, the extended part for battle log, 3/5th part can be for battle log. 2/5th part of that could be used for battle chat [ when user vs user ], this could be useful though, when two persons battling can talk!

 

I hope you like, or at least get an idea!

Edited January 8, 2019 by diljitsandhu

[Fcbruno]

When the battle begins:

* Boost and damage status are shown near respective pokémon.

 

When you click on respective pokémon, appears a window with options (attack, change pokémon, use mega stone/ z move - only available if trainer got item and cancel).

If you pass mouse on left top screen, you can see how many turns will happening climatic modifiers.

Traps (stealth rock, spikes and toxic spikes) will have your respective icons colored when used.

For items, would be great a new bag window opened when you click for this option.

When a move is used, appears instantly information on middle screen.

 

 

I'm not a good image editor, but's +- my idea! =)

[Pdpdgpd]

[Jiyose]

Hello everyone. Here is my gift for the Pokemon Revolution Online community. I hope you enjoy.

 

Who I am: I am Jiyose. I am a Web Developer student and a pokemon fan. I started playing Pokemon Revolution Online about a year ago and since then I started loving this game.

 

About the old Pokemon Revolution Battle UI: Its true PROs old battle UI is outdated, its not mobile friendly and doesnt have many elements needed for the new pokemon updates like z-moves, 3v3 battles etc. But it has some great elements that I used in my new Battle UI project like the hover functionaly that help showing hazards.

 

About the new Battle UI: I made this project in photoshop. It took me almost 3 weeks studying, thinking and building the concept that in my opinion will help to improve the game. You need to know that this project is just a concept and each element can be changed, added and withdawn for example the pokemon HP bars could be replaced for better ones.

 

Thinking out of the box: As a Web Developer I applied the Mobile First concept to the new Battle UI, turning the buttons big and add cool effects. I based the design on the various pokemon games.

 

Requirements for the new Battle UI:

- Enough space for 2v2 and 3v3 fights. (The screen is big enough to accommodate 2v2 and 3v3 fight)

- Buttons for Megas, Z-Moves and Cancel a move.(The cancel buttom is located in almost every screen and the MegaEvo/Z-move buttom is located on MoveSet screen. Two different buttons are not required for MegaEvo/Z-move just one is enough)

- Some kind of battle log should be included as well. (A simple battle log was added)

- Every current element (items, run away, moves, switch Pokemon) should be included obviously.(checked)

- An option to show boost and effects (SPD x 1,5, Paralyzed, Taunted etc.) would be great. (I used the hover idea old PRO Battle UI to build this funcionality, just hold the mouse over the pokemon HP bar)

- Weather and room effects as well as their turn count. (There is enough space on the screen to settle the weather and room effects as well as Hazards and Terrain)

 

 

 

 

Simples and Powerful transition effects: The ideia behind this project was separating the Battle Interface, the Bag Interface and the Pokemon Interface. To do so, I thought of transitions effects like fade in/out, sweep to the right/left/bottom/top, grow and blinking.

 

New features: In-battle move description, Last used item buttom and Emotes

 

About the Action Buttons: I tried many arrangement and I have found the horizontal layout the best for mobile user and it allows more space to accommodate a 3v3 battle. It is not necessary that the buttons keep rectangular, but they need to be big since they are the most used elements in battle.

 

About the Items Screen Interface: Basing on the last pokemon games, I separated the item menu in categories, so the users can search for the desired item faster.

 

About the Team Screen Interface: It has the same "Item Screen Interface" idea, All 6 pokemon are shown in 2 colunms.

 

Some gifs to clarify the idea:

 

 

 

https://imgur.com/a/qEzz0ve

 

 

https://imgur.com/a/zTNtubH

 

Sorry for the bad english ;)