Custom battle UI with skills as buttons

[Haydeos]

I'm developing a game where each character has a total of 5 skills, a basic attack, and access to items. I'd like each skill to have their own custom icon that you click on, much like MOBAs such as league of legends.

Screen shots that I made up in Photoshop to give an idea:

Spoiler

As you can see, I want the party in the right side of the screen, with their health, 2nd resource bar, and their ATB gauge, as I'm using an ATB system.
When a character's turn is ready, the UI pops up, showing their available skills. Selecting a skill by clicking it will show the skill description/cost. Click it again to finalize the selection. If a skill is on cooldown, it can't be selected, and it's grayed out with the cooldown timer shown above it.

Clicking on the items button will bring up any available items in another line, directly above for you to choose from.

I'm sure there's a lot that I'm forgetting, please ask any questions that you'd need to clarify what I'm trying to do here.

 

[mardin]

oh, kind of exactly what I was asking for, frustrating to see a 2 year old question that was asking something similar.

will lend these graphics for my thread, since they explain everything better than I do


Have you managed to get this desired battle system done, @Haydeos ?