Jump to content

Rework Event: Battle UI


Eaty

Recommended Posts

  • 2 weeks later...

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.

201984662_BattleUI2.thumb.jpg.e2643f1407befd83645839d907ea06c5.jpg

Battle_Ui.thumb.jpg.a88f9a744725f400869c9ae73f9ed1ad.jpg

  • Like 12
Link to comment
Share on other sites

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

212b152edb69054bdc91e167183d3437.png

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

145d8cb095e1a95687860ca41c316b27.png

[/Quote]

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

5b7d09708599e7d02d4ba79bf818615c.png

[/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

17b2f5464d830622864cbee9f4efa0ae.png

[/Quote]

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

3e0dd8009f669a567e405689f53827ba.png

[/Quote]

 

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

  • Like 4
Link to comment
Share on other sites

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

kzT43e.png

 

XrIzhk.png

 

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

sLFlVK.png

 

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

c2MMq9.png

  • Like 12
Link to comment
Share on other sites

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

holas.png.0ade7412cbd56837496a4250f3806c8a.png.

 

sorry for my bad english ;v

 

  • Like 30
Link to comment
Share on other sites

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.

pro_UI.png?width=400&height=225pro_UI_2.png?width=400&height=225

Edited by shagun5750
  • Like 1
Link to comment
Share on other sites

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

 

444106645_3vs3contimeryefectosmostrandopokemon.thumb.jpg.928a29957ffaf8110054733303f71873.jpg

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

 

 

442034075_contimer3vs3eitems.thumb.jpg.5aadcefec6da8916974f092da1669211.jpg

 

 

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

 

1495032752_3vs3contimerdentrodeljuego.thumb.jpg.a376eea0d0f93dc6a08012cc39cad4bc.jpg

 

 

 

 

-2 vs 2 Battles-

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

911258466_2vs2contimer.thumb.jpg.edc15a8e32597506300d083da8ef01fe.jpg

 

 

 

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

544687451_3vs3battleguardadointentando2vs2.thumb.jpg.e38d2d888a49edfec378d24305841ab0.jpg

2120118774_3vs3battleguardadoconTODOSLOSEFECTOS.thumb.jpg.471e810a9a77c4b3dc218e05085d73d5.jpg

1785764536_3vs3botoneraitemsmostrada.thumb.jpg.0c0f283325f6ef503b6c935c79e15efe.jpg

678727809_dentrodeljuego.thumb.jpg.79ca60d0f4ccb265ed8206b88ebd5a5e.jpg

  • Like 18

3f31b9ce3f705b32dfe73112672ce1878f766655_hq.gif

Link to comment
Share on other sites

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.

Screenshot_20181218-152318.thumb.png.0fda4a8ee848eb2f0006028762805350.png

  • Like 4
Link to comment
Share on other sites

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