• Welcome to Pokemon Revolution Online. You're currently visiting as a guest. Sign up or log in to access the whole forum and start discussions!

Rework Event: Battle UI

Chaoseth7

Youngster
Joined
Nov 12, 2017
Messages
10
Total likes
2
Hello,

Attached is a storyboard pdf of my version of the battle UI. The overall file size was too large for upload so I had to separate it into 3 files (part 1, part 2 and part 3) so I wouldn't end up with an unnecessarily long post of images. There is a text box on the bottom right of each slide within the pdf's with a brief explanation.


V/R,
Chaos
 

Attachments

Last edited:

McSchitter

Rookie Trainer
Donator
Joined
Nov 1, 2017
Messages
196
Total likes
41
Age
23
I have three pictures that show how the UI changes based on having a Mega, Z-move, or if an action is already selected. I forgot to add one for a Mon that has neither Z or Mega but I think that would be pretty obvious. I did not know if a transparent or dark blend looked better so some UI's have one or the other for comparison. I was not sure if PRO wants megas and z-moves to have a button style like how volt switch works currently or the checkbox like showdown so I just went with the showdown version but both work like that. Lastly, keeping the UI the same size regardless of 1v1, 2v2, or 3v3 is good because texts for the rain, screens, etc can go further down without impedence because even with a better font size the UI much like in showdown will have text behind that milotic shown on the far left if you have enough turn based effects in play but since most battles are 1v1 this allows more space for those texts in that format despite leaving a lot of open background. Hope these look appealing in one way or another.
1546277244472.png

1546277563407.png

1546277591513.png


Just spent yesterday learning as much about Unity as I could and here is a draft of what I was going for, probably would also be smart of me to add dropdown bars for the items and chat for mobile space enhancements. Run button is on current draft but forgot to take a fresh snippit.

BattleUI.JPG
 
Last edited:

FIzZO

Newbie Trainer
Joined
Aug 2, 2015
Messages
39
Total likes
7
Well first of all i'm not an artist, I made this in MS Paint so yeah.
I figured the idea behind this post is to provide you with ideas and not the actual UI because staff can make better UI than me.
With that being said Lets begin

This is how my UI looks


1. Everything is pretty self explanatory, 3v3 battle, HP bar has two marks at 75% and 25% respectively to gauge damage easily hp color changes at 50%.
2. Top right is the digital timer (bar sucks) changes color to yellow at 20s and red at 10s.
3. Below that is opponents pokemon team, background changes to red when fainted.
4. I've added Field status tab with a drop down button which shows entry hazards, screens, and other field status either side.
5. Battle status at bottom left corner that shows current weather, no of turns, and other status like trick room, magic and wonder room which can be opened and closed.


6. Bottom left is the battle logs again with expand and drop down button (yes the yellow/black thing is scroller xD).


7. I've kept Fight UI bottom right. Following tab opens when u click on Fight


8. Here u can select poke > then choose a attack ( also a button for z-move/Mega evolution ) > then choose a target > option to cancel move.




9. After you click bag item following tab opens


10. Click on any of the options following tab opens, each different for battle items, pokeballs, medicine (I've only shown one)


Sorry for my bad English.

Thank you for reading, hope you like it.
 
Last edited:

Yellovv

Newbie Trainer
PRO Member
Joined
Jan 23, 2018
Messages
95
Total likes
45
Age
22
My UI devided into 4 big part:

PART 1: Actions tab
1546281859636.png
-let's start with "main tab". It's the beginning tab where the battle start:
New:
actions tab.png
. Old:
1546282487105.png
I keep and rework the old sprites to make people get used to with it much easier than using the new ones. I removed the useless empty space to make those buttons bigger. The new "X" button at the top help you to disconect from battles, that mean it will work as same as logout but you don't realy have to do that.

- Next will be the fight tab when you click the "Fight" button:
New:
actions tab.png
Holding Mega stone:
actions tab.png
Holding Z-Move:
actions tab.png

Old:
1546283258514.png

I replaced
1546283377759.png
by the "cancel" button which will save a lot of spaces for every actions tab. When you click the cancel button you will be send to the main tab and cancel everything you haven't finished yet. That also mean this button will work as a "cancel move" button too. After select a move, mega evol or z-move, that button should be flashy like this
light.png
. I don't know how to make it or what is that calling so I will leave it to you.
1546446991631.png
This allow you to know which pokemon you are picking move at ( kinda useful for 2vs2 or 3vs3 ) and it also replace the empty space on it if pokemon are not holding mega or z.



- Items tab:

Option 1:
actions tab.png
Option 2:
actions tab.png
. Old:
1546284075031.png




- Switch pokemon tab:

New:
actions tab.png
. Old:
1546284208658.png

As we have a bigger tab, choosing pokemon should give more info on the selecting pokemon.
-
PART 2: Main window
My main window have 2 parts, 1vs1 and 2vs2. And I won't make 3vs3 due to a very simple reason "It's such an stupid mode". 3vs3 cause a lots of work (for the staff, not for me), lots of bug and no one want to play. I can still add the 3v3 battle UI realy quick if you actually want it.
- 1vs1:
main window.png

2vs2:
main window.png


Old:
1546285492944.png


- Hazards keep the same as before because ppl already get used to with it and it take no places. So there are no reason for me to making new one for that.
- I don't really know what make weather bugged in PRO so I will put the turns counting for it in the battle log instead of showing on screen and keep it as before.
- One more thing I want you to add is when clicking on the opponent's name, it will sending command to inspect that person, so we can easily get more info on OP like rating, guild... ( Making Inspect only work on same location make no sense since U can use reborn bot to do that )
PART 3: Team preview
1546286473395.png

- The first pokemon showed as "Revealed pokemon"
- Second is "Fainted Pokemon"
- 3,4,5 showed as "Unrevealed Pokemon" (Incase u want to keep NPC pokemon Unrevealed)
- 6 is an " Empty slot"
- This tab can be minimize by clicking that bottom button to save screen places if u don't really need it
- If you pointing the mouse over the health bar, it will show a screen with that pokemon info like names, moves used, health in % ... ( just suggestion, I don't have UI for that)
- If you cliking on the revealed pokemons, it will open pokedex with that pokemon's name on searching. ( just suggestion)
PART 4: Battle log
1546287042872.png

Why I want to have battle log on game chat instead of making it on battle screen?
1. It will save alots of hard work because game chat is a thing that you already have.
2. It save spaces on screen.
3. It's allow you to chat with opponent throught the log like Showdown.
- So, let's explain more on how this thing will work:
Basically, when u start a PvP battle, the system will creat and send you and also your opponent to a private channel. All the logs for that battle will be send to that channel. That mean you can also invite your friends to that channel as spectator throught the given room ID. Ofc they can only see the log and be able to chat there only. But it's just the first part of spectating, It's up to you for developing more on this amazing feature.
+ This PvP channel can't be closed like "Local" channel
+ You are force to leave the current pvp's room if you logout or enter any battle.
+ You can Ignore OP by clicking ignore them if you don't like they chatting in logs.
+ PvE logs can be work the same as this except you can't leave the given room ID.
+ It will need some rework on this chat but still better than making new one.


I'm still new to photoshop and this is my first time making a project on this.

My PSD file Download: DROPBOX
I have so much things and ideas to say but I can't tell it in just 1 post cuz this is a really long post so I might keep edited this post with change logs if I found any news or make any changes.

Changelog:
- 1/1/2019:

+ remake the "Cancel" button to make it look better:
Old:
1546350421264.png
. New:
1546350441014.png



+ Lower the mega button opacity:, it's have a better look now:
1546350570183.png



+ Added PvP timer to the main window:
1546350846502.png



+ And some small changes.

+ Remake the "Choose pokemon tab"
actions tab.png



+ Some small edits on Option 1:
actions tab.png
Option 2:
actions tab.png
.


+ Added
actions tab.png
on the fight tab, which let you know which pokemon you are playing at 2vs2 or 3vs3 and it also replace mega and z-move button when pokemon is not holding that.


+ Remake the z-move button
actions tab.png
 
Last edited:

UnscarreD

Newbie Trainer
Joined
Mar 11, 2018
Messages
41
Total likes
37
Hi all fellow trainers!

First of all I have to say that this is not exactly a NEW battle UI:
its just a "rework" of our actual (beloved) battle UI with just the add ons u asked for

the main reason is that it matches the theme of others UIs of the game,
but also because im a nostalgic and i like to copy-paste a lot on paint xD

I chose old school buttons bc -as said above- im a nostalgic
[vertical layout allows android users to reach all buttons with the thumb while holding the device]

btns.png

the only differences in the fight menu (First Image) are:

-buttons for Mega and Z moves (that should "turn on" when available)


mgbtns1.png
zmv.png

- "Fight" button that turns to "Cancel" when the menu is opened

-The name of the attacker displayed above its moves (needed for 2vs2 and 3vs3)
in order to make enough space for it i did the battle timer round

Battletimer.png

ui1.png


2nd image shows a 2vs2 fight
in the image we can see the "Current Turn" infos > info.png
- displayed where the moves are in the fight menu -
clicking on "Current Turn" will change it to "Battle Log"

In Current Turn we can see current wheater with its turn count: Rain - 3

The "Status" infos tells the actives stats boosts, handicaps and conditions

Ascending for Boostscharts.pngDecreasing for Handicaps

in the exaple we have a sleeping (since 1 turn) Kyogre, a full swords dance Groudon, Lugia used calm mind once and Ho-oh cursed 3 times

at the bottom we have a "dimensions" info that works like "weathers" and tells if any room is triggered
/ > Normal
Trick Room > Twisted - x
Magic Room > Magic - x
Wonder Room > Wonder - x
where Xs are the turn counts

ui2.png


Finally we have a 3vs3 battle and here is displayed the "Battle Log" > log.png
It records and shows all the battle events - we can tell that Raikou thunderbolted Moltres at the start of the battle

Both Battle Log and Current Turn menus requires a side scroll to navigate the infos
*I've wrote Dogs but someone calls them Cats*

ui3.png


I did the status icons that should be used mainly in Current Turn:
Status.png

Red frame = Damage
Background = type of the move
White background = not specific move
statusmoves.png

Here's an example of stacking multiple statuses in battle (imo volatile statuses can be displayed only in Current Turn: there is no need to show them like normal statuses -as I did-)

statusexample1.png

statusexample2.png

the only thing missing is the window that shows entry hazards bc imo it already works fine


-


Very well done works here - i just enjoy to partecipate hoping the appearance will not change TOO MUCH
because i like it as simple and clean as it is :)

Lucky New Year to everyone!​
 

Attachments

Last edited:

H2OAlkana

Newbie Trainer
Donator
Joined
Jul 25, 2017
Messages
41
Total likes
13
Age
23
Location
Indonesia
Hello Fellow Pokemon Trainer.
Im Really bad with introduction and English is not my First Language *tehee
So Let Get to Explanation of my Battle UI XD
1.png
This is the 1 v 1 battle. there is 4 icon Fight,Run,Pokemon and Item. Pokemon and item in the left, fight and run in the right. just like the original battle ui after u click one of icon i will open menu like pokemon, item or move. on the bottom there is a new 4 button. mega button, z move button, and validate button. mega button for mega evolution, z move for making move be z move, and validate to validate action what u gonna take.

1. Example validate button : if u want to use false swipe and u click false swipe then validate button (accept and cancel) will usable (the color will be black if not click move after click it will be green and red) after that there is a message "are u sure use false swipe?" use green accept button for yes, and red for no.
"Make sure make option feature to disable validate button for hunting in wild pokes so we dont have a time for validate every action we do" :v

2. Example for mega button : if u want to mega evo just click the mega button and choose move what u gonna use. then pokemon will mega evolution and use move (ofc after validate action)

3. Example for Z move : just click Z move button and ur move is gonna change to z move if there is a Z move in ur movepool and validate :)

- For health bar and status. im taking example from pokemon showdown that really nice and informative. all status will appear below health bar.
- For toxic spikes,spikes and stealth rock its above pokemon health bar
- For weather and room. i really likes icon in original battle UI. just add more icon for trick room and wonder room and a little bit explanation.

i decided to split 4 icon to make it more enjoyable in android *imo so we can use our 2 mother finger to select hehe :)
615669-452059-dungeon-hunter-5-smartphone-gaming-ios-games-on-ios-apple-iphone-youtube.png

and now 3 vs 3 battle ui * sorry i dont make 2vs2 but it will almost same like 3vs3
HERE
2.png

almost same like 1v1 but i decided to make it after we choose we move we gonna choose our enemy like

4.png

After choose move then validate u can choose enemy *sorry i copied the picture. the icon like we switch pokemon but in the right side. then validate ur action :)
last is log. Did u see triangle on the bottom?. its log, touch the triangle and it will open like this
6.png

There will be scroll icon too.
I think that the end of my explanation. hehe
*now everyone will now im poor XD
HOPE U LIKE IT (u must like it*evil grin)
IM EBONCANDLE SEE YA
(If u ask show the item or show the z move)
3.png

5.png


GOOD LUCK EVERYONE o/
And Happy New Year​
 

KieferCringe

Youngster
Donator
Joined
May 13, 2018
Messages
9
Total likes
3
Hello this is my UI. Everything that was asked for is in the UI. If there is anything I missed be sure to tell me and I will add it on. If anyone also has any tips to maybe improve it more than be sure to let me know. The white that you see is for the background/Overworld. Also, when you've selected a move, there is room in the box when all moves dissapear to press cancel. I Hope you enjoy.
 

Attachments

SandSurfer

Youngster
PRO Member
Joined
Dec 31, 2017
Messages
18
Total likes
7
Age
18
Hi guys, I hope everyone is enjoying the Holiday season!! So0o0o with two days of tweaking, here's what I came up with. I do have tons of questions(like ease in animations, opacity changes, mouse hover, camera movement etc.) but yeah I guess those would be discussed if ever this design was picked. Vectored assets used here are in the attached Pdfs including the switch button for 3v3 and also some optional interface. Everything is made from scratch and is editable except for the bg and the sprites(I just took them from the internet)

option1.jpg


This one shows the mega button bring activated while the battle log is toggled hide. SORRY NOT SORRY Im not confident with making .gifs so ill upload the two frames here. The "5" "8" blinking means sunny day in 5 or 8 turns btw.
mega on.jpg


MEGA ON!!!
mega off.jpg


Last one is the bag interface with the battle HUD OPTION2
option2.jpg


AAAAAAAAND there you have it XD GGWP2018.

PS

Notice that title on top of playername? Those are gained by doing insane quest like specific bug catching, using mono dragon team to beat a boss or catching 100 ratatas. Who knows? Completing all of them and maybe gain the title PokemonMaster? ;wink;
 

Attachments

PokeDood

Youngster
Joined
Sep 6, 2016
Messages
6
Total likes
1
In near future there will be a significant PVP update. My full concentration is set on this right now, which is why there will probably less updates in the next time. For this PRO needs a new Battle UI, because the current one is missing a few features.
There are already staff members who work on it, but as their specialty lies in other areas, I want to give everyone the possibility to participate. That's why I make a small event out of it. Everyone is allowed to create a new Battle UI and the Battle UI that will be taken over will be royally rewarded. The one gets a non-tradable shiny of your choice. The nature can be chosen, the IVs and ability will be generated randomly. The Pokemon must be catchable by everyone.

The following things have to be added in the new Battle UI:
- Enough space for 2v2 and 3v3 fights.
- Buttons for Megas, Z-Moves and Cancel a move.
- Some kind of battle log should be included as well.
- Every current element (items, run away, moves, switch Pokemon) should be included obviously.
- An option to show boost and effects (SPD x 1,5, Paralyzed, Taunted etc.) would be great.
- Weather and room effects as well as their turn count.

You do not have to stick to the current design. You can change it completely, even make it full screen mode. That is completely up to you.

Please note, that if we take non of the submitted designs, there will be no winner at all.

You have 30 days (Janurary 15th, 11:59 PM GMT+0) to submit a battle UI. The time might be extended if there's no usable design till then.

This post will be unlocked in 2 weeks on December 30th, please post your battle UIs in here. Do not make any unrelated posts here.
Please only post the final UI in here. The winner has to submit the final design, all UI elements and has to give PRO the permission to use it.
Good luck to every participant.

https://cdn.discordapp.com/attachments/409617491682131968/527482238011572226/image0.jpg
https://cdn.discordapp.com/attachments/409617491682131968/527482238011572224/image1.jpg
https://cdn.discordapp.com/attachments/409617491682131968/527481660648718356/image0.jpg

https://cdn.discordapp.com/attachments/409617491682131968/527481660028092426/image1.jpg
Above are the components. The bottom row are the icons where as the top row is a short animation when the mouse is hovered above the icon. Sadly, does not apply to mobile players :PiplupCry:

https://cdn.discordapp.com/attachments/409617491682131968/527479148562874398/image0.jpg
https://cdn.discordapp.com/attachments/409617491682131968/527479147593859083/image1.jpg

Sorry about the low quality work due to exams and trips.
 

GDarch

Rookie Trainer
PRO Member
Donator
Joined
May 1, 2018
Messages
142
Total likes
19
Location
France
Hello, I'm not an artist but I hope the UI I propose here will help to design the final UI.

ui2.PNG


First, I imagined a window like the one above when the fight begins. It offers a team preview with the username of the players fighting each other. The 2 icones on the bottom right corner are designed to host pictures of the command "Run" and "Fight".

ui3.PNG


This is the basic screen for 1 vs 1 fight. On the top left corner it shows how many turns have been played and a picture of the current weather on the field (with the turns).
Lots of information about the pokemons fighting are displayed : percentage of life, if the pokemon is taunted, seeded etc. , a zone symbolised by a square with a cross inside is planned to host a gif for paralysis, poison, burn and sleep status. Information about increased or descreased stat are also available. The switch part shows the pokemon in the team you can put into the fight.

ui4.PNG

When you click on BAG you see this.

ui5.PNG

Then you can choose to use he object on a pokemon of your team.


ui6.PNG

A click on bag then a pokemon and finally the attatck of the pokemon for which you want to recover PP for example.

ui7.PNG

When you click on FIELD, it gives you information about entry hasards and the terrain (is there electric terrain, grassy terrain etc.)

ui9.png


When you click on one of the 4 attacks, in the "general window" you will be asked to confirm your attack with mega evo and z-move button.

ui10.png

When you click on a pokemon you want to switch with an other on the field, information about the pokemon are displayed in the "general window". The squares with a cross inside represent the pictures for the "back" and "confirm" option.

ui1.PNG

This is a view of the 2 vs 2 battle window. The 3 vs 3 battle window is easily obtainable with this screen.

Do not hesitate to ask if you need more details about my Battle UI.
 

Attachments

Top