Rework Event: Battle UI

[Eaty]

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.

Edited December 29, 2018 by Eaty

[Eaty]

Unlocked. Only post your final Battle UI in here.

[Galtierdz]

Greetings.

This and the Battle Ui that I created, my Photoshop expired half way through the work so I could not improve enough. I used the requirements that were imposed and with some changes, for example below we have Options such as "Surrender", "Field", "Cancel Move", also added something to be the "Log" or "Field" button and to show Field Camps as Sticked Web, etc.

The default menu has been added too.

The Faithful Icon has also been changed.

I made 2 Places where there could be the button for Megas, although I liked it more than this one next to the Moveset, The Button of Z-Move was also Added.

I would like to have more work in this Battle Ui job, but unfortunately I can not afford the PhotoShop package for personal reasons.

 

I hope Battle Ui can inspire you, Thank you for your attention.

 

PS: I could not send in PSD File.

[Aiye]

About the new battle UI I explain what I think and I'm putting some gifs and images as an example, I hope you understand.

About the new Battle UI I thought a lot and I came to a conclusion about doing a Battle UI based on the old one, because I think the old one is very good, and I think it would be better to recreate it because if I create a new Battle UI, I think it would bother a lot of people who hunt all day and for those people who play the game on the cell phone. So I decided to recreate the old one trying not to disturb the people who play the game on the cell phone and for those who are hunting pokemons all day.

 

 

Battle 2v2 and 3v3 fights:

For 2v2 battles could work with the first two pokémons of your list.

For 3v3 battles could work with the first three pokémons of your list

Example:

In the example I put the video of the Ash playing the pokeballs because I had not found an animation on the internet just playing the pokeball.

 

 

Button for Megas:

For the megas I think it should stay down as it is there in the example.

Example:

 

 

Button for Z-Moves:

For the Z-MOVES I think it should stay down as it is there in the example.

Example:

 

 

Button for Cancel:

For the Cancel I think it should stay down as it is there in the example.

Example:

 

 

Battle Logs:

I think it would be nice to create a button next to the logs, as soon as it clicks the button will appear the logs next. Because there are people who get pokemons all day long, and with the logs appearing this right away I think I could mess up these people who are hunting many pokemons. More information looks at the example below.

Example:

 

 

Buffs, Paralyzed, Taunted etc:

Paralyze, taunts, buffs and etc. I think I should stay in below life because I think it would look cool because it was going to look like the other pokemon games! Paralyze, taunts and etc. should appear before, and the buffs soon after. More information looks at the example below.

Example:

Then in the example you will see that he took Paralyze, it is because the pikachu used an attack and gave paralyze in Eevee, and the Paralyze appeared before the buffs.

 

 

Weather and room effects as well as their turn count:

The weather and counting should be right there in the upper right corner, showing that she is in such a Climate and showing the count of turns that she ends up. More information looks at the example below.

Example:

 

 

Extra:

I think it would be nice to put a percentage of the Pokémon's life at the time of battle.

Example:

 

I made some changes in the post to put the bigger gifs because they were too small and hard to see.

Thank you for your attention. :D

Edited August 12, 2019 by MadFrost

[Dakivid]

I know that the Battle Interfaces do not really look good, nor clean, that's simply because I am no artist and if I were to make the icons myself they would be really ugly. That's why I copied existing sprites and stuff, so you'd just need someone to replace them with proper artwork and tiles. The amount of parts where Pokemon can be will be determined on the mode that is going to be played, e.g. one bottom platform for the standard one versus one Mode.

 

Normal Battle Interface - after selecting Fight on the bottom right - The existing Z-Button can be either used for the Mega Evolution or a Z-Move

Bag Interface (Pokeball Window) - after clicking on Bag on the bottom right and the Pokeball Icon on the bottom left

[/Quote]

Bag Interface (Medicine Window) - after clicking on Bag on the bottom right and the Medicine Icon on the bottom left

[/Quote]

Pokemon Interface - after clicking on the Pokemon Icon on the bottom right - Shows every Pokemon you can switch into, dead Pokemon will be grayed out, status inflicted Pokemon will be yellowish

[/Quote]

Pokemon Stats Interface - after clicking on the middle of the bottom right screen part - shows every stat change, weather effects, taunted Pokemon, etc.

[/Quote]

 

That's about it, sorry for the ugly artwork, but that's the main idea of my Interface.

[Soberbia]

I wanted to make something different with this battle ui to give pro a new air but keeping it simple

 

Here you can change the buttons as you please, this is just an example

 

 

The red x would be the cancel button but you can write cancel instead if you want.

I used the mega symbol as mega evolution button(you can make gray when is unusable, colored when usable and make it shine when activated) :3

 

I tried to make something different with the move buttons I would like to see it in pro ^^ i know you can make it look better

[Daftlife]

ok.. HII :3, this is my own version of the battle iu ,i decide to keep the visual concept of the game, the principal reason is that is more easy for the :incoming,new ,casual and those that live on the game :v to assimilate the redesign and the way that the iu works , redesigning the space and the visual order of some elements that all the player already know and integrate the new ones by a easy and familiar look . (i apologise for the font of the text ,i don't know how to find it,i try to find a similar)

 

This is the way that the iu look on full screen

(example)

[MEDIA=imgur2]YdjG9Kx[/MEDIA]

(the design of 3vs3/ 2vs2/ 1vs1 use the same space)

 

This is the way that looks the different iu

(the post will show the way that looks with mega evolution an z move)

 

this preview is for understand some elements and its function that appear on the iu

[MEDIA=imgur2]5hxnusI[/MEDIA]

 

1. the time

time that each player have for do a action on each turn , attack etc( this time can be cut by the action of the opponent in the case of the attacks)

 

2. the boost /effects/others

-those effects that create a negative stat on the pokemon will be show on red describing which stat is been affected negative(-hp,-spd etc.)

-this include the effects of poison,sleep,stun.etc)

2.1-those effects that create a positive stat on the pokemon will be show on green describing which stat is been affected positive(+spd,+atk etc)

 

3. the identification number

the purpose of this numbers is make easy the identification of the pokemon that is making a action /making a easy way to decide which pokemon you want to attack by looking the number that this one have and making a easy way to decide a action

 

4.weather

this title is for tell the players if there's any weather condition on the battle ,if there no weather conditions this will be without any indication ,in the contrary case

4.1- there going to appear a image that show which weather is on battle and the time that left to over

 

5. turn/battle chat

this title is going to change each time that both players do and actions ,this helps to indicate the left turnos for the weather too

5.1 -the battle chat will be a history of the current battle action and turn ,describing which player do a action against the other payer.(this will be sow too the time that left for the weather condition)(this will show too the boost stats and negative stats by the exact % of each state)((this chat only show the events on battle u cant talk to the other payer))

 

6. the action chat/description

this text will be generated automatically after the player do and action ,so in this way the player can be sure that the action that says the battle chat is the right one,if is not the player can cancel the action by clicking on the cancel button (this action depends too on the action of the other player,if the other player already do their action the option will be executed automatically within any option to cancel)

 

1v1

MEGA evolution

[MEDIA=imgur2]yXtUhr6[/MEDIA]

Z move

[MEDIA=imgur2]BhEIjoP[/MEDIA]

 

2v2

MEGA evolution

[MEDIA=imgur2]D6kEUP3[/MEDIA]

Z move

[MEDIA=imgur2]p6cykEE[/MEDIA]

 

3vs3

MEGA evolution

[MEDIA=imgur2]bM51OUL[/MEDIA]

Z move

[MEDIA=imgur2]JJtVdBz[/MEDIA]

 

Ok and now you can see how the panel changes when you already use the MEGA evolution or the Z move

 

MEGA EVOLUTION

[MEDIA=imgur2]WnpLJoa[/MEDIA]

 

Z MOVE

[MEDIA=imgur2]VvkTUDZ[/MEDIA]

 

( after use the MEGA evolution or the Z move the option blocks with the text you already use it )

 

 

 

Ok that is the way that is the way that the battle iu looks

now

this its the way that the select of pokemon and items looks.

 

Chose pokemon

[MEDIA=imgur2]M5qkzDZ[/MEDIA]

 

Choose item

[MEDIA=imgur2]zlw2vi4[/MEDIA]

 

 

(the small icons that are in front of the panel are for select :items ,pokeballs and potions etc)

 

Ty for read the post ,i hope all the staff member like my design,so that's it :3

.

 

sorry for my bad english ;v

 

[Shagun5750]

Greetings Here is my UI design.

NOTE-

1. It is a design only made like an UI Application as I thought it would be easier to make it that way instead of making it in paint or photoshop.

2. It is not having any cool designs or Icons as i m not good with photoshop. I m pretty sure that PRO's designer team can make it look cool if it gets selected.

3. There are 2 Images , One is just an overview of design while the other Image with number is for explaination.

[MEDIA=imgur2]yPXHa0C[/MEDIA] [MEDIA=imgur2]gAEKOqd[/MEDIA]

 

EXPLAINATION

Please Refer to the second Image for the following numbers.

 

1. weathers can be seen there like " Rain is falling -- 3-4 turns Left" or even a better statement.

 

2,3,4,5 - these block shows Boosts/buffs/debuffs to the physical attack, phy def , spa.attack , spa.def , speed . as of now the number in each block is 0 indicating neither a buff or debuff. (jLabel element is used here in each block. )

 

6- shows the status condition of the pokemon - sleep , paralyzed , poison etc. symbols of appropriate size should be used as an icon to show the status in the 6th block.

 

7-shows battle effects like Taunted ...here also the staff has to make a symbol to represent taunt and use it in the block to show it.

 

8- click on it and it will show a list of all the entry hazards and their layers. 0 layers mean no entry hazard. (the table can be modified to show only those entry hazards which are active on the battle field along with the number of layers.)

 

9- these blocks shows the symbols of opponents pokemon team ...thier dead pokes and live pokes can be showN here . Your pokemons will also be shown here when you click on "Pokemons" Button.

 

10 - is the timer for the Ranked battles .

 

11- battle logs. somewhat similar to showdown.

 

12- check this box to make sure ur pokemon evolves to mega the next turn.

 

13- click on this if u want to use the Z-move this turn.

 

14 --- click on this to see your pokemons and switch to the live ones from the 9th blocks.

 

15 -- click on this to see all 4 abilities in the 18th blocks.

 

16-- no need for ITEMS in ranked battle . in other battleS the space for the Battle logs can be used to show the list of items.

 

17-- run away from a battle if u can! (the symbol of the gender of the pokemon can be shown in the column infront of the name. )

 

18 - the place where the MOVES of the selected pokemon will be shown to the user.

 

Thank you.

Edited December 30, 2018 by shagun5750

[Madturtle]

Hi, this is my battle iu, I hope you like it.

Basically it has all the buttons that have been required, bigger buttons also thinking about the Android version and PC users.

The battles, I prefer them to be full screen optionally

(The battlefield is made by me ... it's for the pvp battles)

 

Let us begin

 

3 vs 3 Battles:

-I have reinvented some parts like the "vs", and also the attacks with colors of their types.

-The buff states must be as shown in the image, - they only have to be displayed when the mouse passes over-

-The Menu Logs must be able to open and close, as the user wants, by means of a button placed as shown in the image

-items and pokemon in same place, are changed, by pressing "pokemon button" or "items button"-

 

-items and pokemon in same place, are changed, by pressing "pokemon button" or "items button"-

 

 

 

 

-As I see it in the game "window mode"-

 

 

 

 

 

-2 vs 2 Battles-

-same controls as in version 3 vs 3, there are no major changes.

 

 

 

That's it, I hope I have not forgotten anything, thanks for watching, regards

[Xmorningstarx]

It's simple yet has everything one needs the chat on the right side and would be nice to have an option to spectate your guild mates. I put a small box under the chat box to show who is spectating you also a simple record or screen shot button and a (vs) on top with awesome animation one us to show what or who your battling on the left. it's a full screen view! It would work well with computer and mobile devices also for the bottom box where we have the options for the bag/ pokes /run away/ battle icon everything should be shown in that box aka the selection box if You click/tap on the battle icon it should take you to your moves/ z-moves and mega icons there should be enough room to add the weather conditions status condition of each pokes etc. In the center of the selection box as well. Pokemon they should also be displayed in the selection box when you click/tap on the Pokemon icon so on and so forth with the other icons nice an simple not to complex :) and as for the 3 v 3 display it should have just enough space to veiw all the pokes yur over all Pokemon and health bars are great just the way they are no need to change it. well your over all original design is nice and easy to understand and it is why I think you should consider just improving the original but keeping the same simplicity of that is all I don't own a computer but I Drew this on my phone I got sick and could not finish coloring it.