Snow White – Battle UI

Battle UI Concept

I have started with a simple battle concept. I did want to make this game a hack and slash game, although lately I’ve been playing a game called Evoland which has a battle UI similar to the old Final Fantasy games. So I went ahead and tried to create something similar and change the game mechanics of the game entirely by doing so.


Tactic Battle 2


I have used one of my old concepts which was influenced by Persona 4 Battle UI. The main character will be standing on the right side of the screen. The player will select the commands by pressing the corresponding button next to the command.

Tactic Battle 3

I didn’t know how to show the way a player will choose an enemy so I added a window showing the names of the enemies. The selected enemy will have a red outline around them. The white bar under the enemies name is the turn timer. Once it fills all up that’s when the monster will attack. The bar will not fill up when being idle, it all depends on the actions the main player takes. For example, in Final Fantasy games there is an ability called ‘Haste’ which speeds up the filling up of the bar.

Tactic Battle 4

I wanted to move on from the Persona 4 battle UI, and try out the ‘old-school’ Final Fantasy style for both enemies and the main character. I have added a little hourglass icon to the side of the bars as I didn’t feel like it was clear what the bar is there for. On the main character’s side I have added the name, health, Magic Points and the current level in the top part of the action window. I have added simple commands like ‘Attack’ ‘Skill’ ‘Item’ and ‘Flee’. The skill window on the character also shows some skills that might be usable for the character. Final Fantasy has got plenty of magical skills, for example they have the skill called ‘Fire’ which makes the character hurl a fire ball at an enemy. The game also has higher levels of that particular skill, with the higher level the name of he skill changes to ‘Fira’ and then ‘Firaga’. I came up with my own versions of these skills. For example, there is a skill called ‘Blaze’ which will make the character hurl a fireball at the character. The skill has got higher levels too which are ‘Blazer’ and ‘Blazero’.

I do still want to make the game 3D, so I wanted to re-create few monsters in 3D. This has been done in sculptris. I was aiming for a Slime-like monster but I was happy with this creature.

Tactic Battle 5

I have replaced the 2D creatures, with my 3D creatures. I didn’t really like how these creatures look. And because I was working on the Photoshop file I didn’t have much control of the camera angle.

I went into 3DSMax and decided to create a group of slimes which would be used as monsters for the game. This time, I had full control over the camera angle and how I wanted to render the image.

I have then simply placed the rendered images into Photoshop and layered the battle user interface onto the image. I have done multiple renders to show that during the battle, the camera will change the angle, sometimes looking from behind the monsters, behind the player etc.

The female character that is visible in the images above was a quick model which was a preset from the Marvelous Designer software.


Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )


Connecting to %s