Rework Event: Battle UI

[Chaoseth7]

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

PRO_battleUI_ storyboard_part1.pdf.zip

PRO_battleUI_ storyboard_part2.pdf

PRO_battleUI_ storyboard_part3.pdf

Edited December 31, 2018 by Chaoseth7

[Mcschitter]

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.

 

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.

 

Edited January 1, 2019 by McSchitter

[Fizzo]

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

 

[spoiler=Battle UI]

 

 

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.

 

[spoiler=Battle Status]

 

 

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

 

[spoiler=Battle log]

 

 

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

 

[spoiler=Fight UI]

 

 

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

 

[spoiler=Bag Tab]

 

 

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.

Edited January 1, 2019 by FIzZO

[Yellovv]

 

My UI devided into 4 big part:

 

PART 1: Actions tab

[spoiler=Part 1]

-let's start with "main tab". It's the beginning tab where the battle start:

New:

. Old:

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:

Holding Mega stone: Holding Z-Move:

Old:

 

I replaced 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 . I don't know how to make it or what is that calling so I will leave it to you.

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: Option 2: . Old:

 

 

 

- Switch pokemon tab:

 

New: . Old:

As we have a bigger tab, choosing pokemon should give more info on the selecting pokemon.

-

 

 

PART 2: Main window

[spoiler=Part 2]

[spoiler=Part 2]

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:

2vs2:

 

Old:

 

- 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

[spoiler=Part 3]

[spoiler=Part 3]

- 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

[spoiler=Part 4]

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:

[spoiler=logs]

[spoiler=logs]

[spoiler=logs]

[spoiler=1/1/2019]- 1/1/2019:

 

+ remake the "Cancel" button to make it look better:

Old:. New:

 

 

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

 

 

+ Added PvP timer to the main window:

 

 

+ And some small changes.

 

 

[spoiler=2/1/2019]

+ Remake the "Choose pokemon tab"

 

 

+ Some small edits on Option 1: Option 2: .

 

 

+ Added 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

 

 

 

 

Edited January 13, 2019 by Yellovv

[Unscarred]

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]

 

 

 

 

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

 

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

 

 

 

 

- "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

 

 

 

 

 

2nd image shows a 2vs2 fight

in the image we can see the "Current Turn" infos >

- displayed where the moves are in the fight menu -

clicking on "Current Turn" will change it to "Battle Log"

[spoiler=Navigate Fight/BattleLog/CurrentTurn]

 

 

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 BoostsDecreasing 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

 

 

Finally we have a 3vs3 battle and here is displayed the "Battle Log" >

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*

 

 

I did the status icons that should be used mainly in Current Turn: [spoiler=Status Icons]

Red frame = Damage

Background = type of the move

White background = not specific move

 

 

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-)

 

[spoiler=battle example]

 

 

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!

Edited January 6, 2019 by UnscarreD

[H2oalkana]

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

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 :)

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

HERE

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

 

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

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)

 

GOOD LUCK EVERYONE o/

And Happy New Year

[Kiefercringe]

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.

[Sandsurfer]

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)

 

 

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!!!

 

Last one is the bag interface with the battle HUD OPTION2

 

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;

assets.pdf

[Pokedood]

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 ;-;

 

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]

Hello, I'm not an artist but I hope the UI I propose here will help to design the final UI.

 

 

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".

 

 

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.

 

When you click on BAG you see this.

 

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

 

 

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

 

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

 

 

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.

 

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.

 

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.