Snow White: UI

When I’m thinking of the UI for this game, I am more leaning towards the UI used in Dragon Quest Heroes as it has all the information you need. Although I do believe that this will only work for the idea of having Snow White as the Hack & Slash character. But now that I am thinking about it all, I might want to just choose a single thing so either a turn based or a hack & slash and stick with it for both characters. 

Image result for HUD Dragon Quest HeroesSource

Speaking of the Hack & Slash system or the turn based system. There is a game called Eternal Sonata which has one of the most interesting battle system I’ve ever experienced. It is a turn based game where each player has a turn, the turn lasts for an ‘x’ amount of seconds where you can freely move around and attack as many times as you want. It is a Turn Based Hack & Slash. Image result for Eternal Sonata battle systemSource

As you can see the UI is pretty simple and once again it shows the information that you need on screen. It shows the controls and the timer and also who is going next after your turn. The game does get progressively harder as you play it. At the beginning of the game you get about 6 seconds per turn and the time only flows as you take action, which means that unless you attack or use an item the time will stay as it is. But as you play along it changes so that eventually as soon as your turn starts the time flows for both movement, action and actually standing idle.

Image result for Dragon Quest Heroes Skill HUDSource

This is the Skill Display I want to include in the game. It basically pops up when you press a certain key and then you press the corresponding key to use a skill. Because the UI for Eternal Sonata only allows you to set one skill until you change it outside of the battle, I think that this would be really handy if you want to use more than 1 skill during a single battle.

Image result for persona 5 UISource

There is also this very interesting Persona 5 battle UI. I like how everything revolves around the character that is being used and how the options are scattered around the character. This is something that probably wouldn’t fit when it comes to the style and snow white, but still worth giving it a shot at trying to re-create it.


ui-1

This was my first idea influenced by Dragon Quest Heroes. I have changed few things like the portrait and the colours for the experience bar and the borders. I’ve also added a little display showing the amount of Gold the character has at the moment.

mini-map

The blue triangle on the map is the main character. A big red dot is a boss and a small red dot is an enemy. The light grey area shows the accessible area.

I’ve also made the map transparent a bit so that it wouldn’t obstruct anything that goes on behind it during the game.

character-portrait

This is the portrait in a close up. The character I have done it for is snow white. I have used an image found on the internet of the most common snow white illustration.Image result for snow white
Source

The green bar represents health, blue represents mana or magic points and purple represents experience points.

ui-2

I have also added a command circle (only pops up whilst keeping a certain button pressed down). This is just like in Dragon Quest Heroes where you can choose which skill you want to use by pressing the corresponding button.

Image result for ps controller keys
Source

drquestui-1

This is a comparison of the image I have used as influence and the image that I have designed. Now that I look at it the second time, they don’t look alike at all. But at least it means that it is original and I’ve still used it as an influence to see what I need on screen. It’s just that I’ve placed differently.

ui-3

Next idea was influenced by Eternal Sonata. This time I decided to include text within the design to show the links between my influence. Because in Eternal Sonata you control 3 characters at once I decided to place the main character’s portrait in the top middle section of the screen. Once again I have used the same illustration as for my first idea. I’ve also used the same command circle and same image for the buttons.

timer
This is the time meter, each turn you will have 5 seconds in order to get close to the enemy in order to attack as many times as you can during the time of your turn. The gauge will deplete as the time runs out.

eternal_sonata_battleui-3

Here is a comparison for my second design. These do look very similar and I think that the design from the image that I have used is very effective when it comes to combat within the game. I have played the game myself and never had any trouble navigating through the screen during combat. The down side was that you could only have 2 skills at a time, one for when in sunlight or light and one for when you’re in the shade. If I were to use this design and develop it further I would try and make it possible to use more than 2 skills by keeping the button held and then toggling through available skills.

ui-4

The next idea that I had was to look at the UI of Persona 5 and try to make something that looks effective. I think that I have managed to successfully link my idea back to Persona 5. There isn’t much going on the screen during combat in Persona 5 (That’s with the UI of course) which is why my UI idea does look a bit empty. I have decided to change few things about because after all you will only be able to control one character at a time so I just gave it a different look whilst still linking it back to persona.

persona-5-snow-white-commands

I have once again used the same illustration for Snow White that I’ve been using throughout. First I have copied the image and coloured it all cyan. Then enlarged it and placed it behind the original image. Then I’ve created few rectangles and skewed them. I have added the text afterwards. I wanted to highlight few letters because that is what Persona 5 UI does. So I went for the darker turn and highlighted the letters ‘K’ ‘I’ ‘L’ and another’L’ to make it look like it’s actually saying ‘KILL’. I think that this links well to the whole atmosphere that you would see in the game as Snow White as she is in her nightmare after all. The other highlighted letters don’t have any meaning behind them. I just didn’t want it to look as if I just highlighted the word ‘KILL’ in ‘SKILL’.

persona-5-snow-white

This part of the design is probably the thing that I am mostly proud of. I have used the head of Snow White from the illustration that I have been using throughout. And used the lasso tool to block out certain facial areas with either black or white. This in my opinion made Snow White look more sinister and more like the Evil Queen herself which once again links to the dark tone of the Nightmares that Snow White will be facing in the game.

nightmare-snow

Just by adding the harsh outlines, Snow White starts to look more evil.

ayyh42xui-4

There isn’t much to compare other than the style of how everything has been done it. Which I honestly think that I’ve managed to succeed at. If I were to carry on with this style I would have to make sure that it looks more medieval/fantasy like in order to link it back to the story of Snow White. During the game, as the character moves about, you would mostly see the back of Snow White. Unfortunately I couldn’t find a proper image and we didn’t design a character for the game yet.


ui-4-developed-2

I took my last design into further development to create a full scene of how things would be played out in the game. I added the mini map in the bottom right corner and also added the monsters and a boss according to how the map is set out. I’ve added the red lines in the back ground in order to show the 3D area. Also added shadows to show that the characters aren’t just floating in the air.

Image result for snow white kingdom hearts back view
Source

I have used this illustration of the Evil Queen from Kingdom Hearts. I wanted to show how the boss would look like according to the mini map. In my design you can see that she has a red outline around her. The red outline shows that this is an enemy, where as the yellow outline shows the current target of the main character. Also you can see a health bar above the boss because this is the current selected enemy.

Image result for kingdom hearts heartless
Source

For the smaller enemies I have used this design of a Heartless from Kingdom Hearts. I have also tried to set them out in order to link them to how they’re set out on the mini map.

ui-4-developedI’ve decided to replace snow white’s face in the game screen area with the previously changed design to make her look more ‘dark’ and ‘sinister’ I just think that it works better when you try and link it back to the character portrait.

ui-4-developed-3
I’ve also added the buttons to the command section in order to show the player which button you’ll have to press in order to use an action. I have tried to place the buttons so that it doesn’t look to confusing to a player. Basically I’ve set up the buttons in the same way as you’d have them on a controller (Sort of)

In my opinion this is a perfect design for a turn based 3D game. I was thinking that I could add an experience bar under the HP and SP on the character portrait.ui-4-developed-4

I’ve added an experience bar, the yellow colour shows the current experience and the grey, which is actually transparent shows the empty bar.

ui-5
I have changed the layout a bit, I was advised to show that when the battle starts you can see the main character with all the command buttons more to the right as it would link better with the controls since you get these buttons on the right side of the controller anyway. I’ve also made the character portrait a bit smaller. The command buttons will only pop-up during the player’s turn. I think that this is the kind of combat UI we could have for the Prince as it is turn based. I will now try and include links to the Eternal Sonata game for Snow White which would be a turn based Hack and Slash with similar looks.


ui-hack-and-slash

This is the design I came up with for the Hack and Slash play style. I have mixed the Persona 5 style along with few features of Eternal Sonata. I have included a 5 second timer per turn. The blank space as it runs out becomes transparent. I’ve also added a command circle, I tried to still stick to the whole Persona 5 style. Also because for the outlines included in the character portrait bars I wanted to turn the good character outlines white, to show that these characters are actually on the ‘good’ side.

The player will be able to toggle through the items by keeping the triangle button pressed. This will then pause the game and let the player toggle through usable items. Same thing would happen with skills. The Guard command will only be available to use during the enemies turn as the character will be able to guard if timed right.

ui-hack-and-slashui-5

I am going to print both images out and ask for opinions from my colleagues. I will ask them to comment and help me decide whether to keep the first design or the second design. As I do think that we should stick to one play style to make things easier and less complicated. I’m not going to put any information on it as I want to see whether or not my colleagues or anyone that enters the room will be able to tell what is going on, on the screen.


ui-hack-and-slash-2

We’ve decided to make this game fully turn based Hack & Slash, I guess that we can change it towards the end but we don’t have to worry too much about it for now. In this design I have changed the position of the white outlines. I’ve also decided to make the mini map look more stylised to fit with the whole Persona 5 theme. I got some useful feedback, one of them being about the map which is now changed thanks to the feedback. Also everyone seems to like how different it is.

Advertisements

Leave a Reply

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

WordPress.com Logo

You are commenting using your WordPress.com 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 )

Google+ photo

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

Connecting to %s