Interface

Interface Brief

Overview: MOBA Game

MOBA, or Online Multiplayer Battle Arena, or even the Dota Genre, is a sub-genre of an RTS which first came about from the likes of Warcraft 3 map, Defense of the Ancients. It consists of three lanes on the map with two bases, each lane being lined with towers and the jungle surrounding the lanes. People would go into these lanes as a champion to level up, get gold for gear and learn skills to kill the opposing enemy. The winner would be the one who destroyed the enemies base.

Graphical Elements

Interface Layout

Game

Loadscreen

Login

Main Menu

Interface Exercises - Analysis

Interface Analysis

Title: League of Legends
Game Developer: Riot Games
Platform: PC
Player Mode: Multiplayer

Manual Interface: The interface of League of Legends is easy to use and work with, including skillbars, minimap interaction, chat function, using the shop, and manageable interface options.

Figure 1: 

1: Inventory
The inventory used in League consists of 6 slots where items are placed. Right clicking these items allows you to change where they sit, which can make life easier because some items can be activated by using the numbers to add special effects. Down the bottom is the little money bag which is used to open the shop.

2: Skillbars
Skillbars consist of your 4 skills and two summoner skills to be used through the game, as well as a recall button to go back to base and your passive. Clicking the skills causes a range indicator to come up, and clicking again can cast the ability. These are also bound to Q,W,E,R for the main 4 skills, D and F are used for summoners and B is used to recall. This creates an easier option to use abilities, and if one holds shift then the ability is cast instantly at the place and direction of the cursor.

3: Minimap
The minimap isn’t exactly a manual interface element, but whilst holding G and clicking on the minimap, you can alert your teammates of incoming dangers or where they should be at.

: Party Members
Again, not exactly a manual interface element, but it can be interacted with by clicking a skill, then clicking on the portrait of the party member. In doing so, the ability is cast on them, and only works for defensive spells like heals and shields.

Visual Interface

Figure 2:

1: Character Display
Displays the character image, stats, items, gold, and experience.

2: Character Health and Mana/Resource
Displays the character’s current health and mana / resource, using a coloured bar and numerical values. Also displays a number you have been killed, stating how long it takes to resurrect.

3: Minimap                 
Displays the minimap of the terrain, where minions and towers are, and where your allies/enemies are. It also displays where the neutral creeps are in the jungle.

4: Mini-health Bar
Displays the characters/enemies health and mana / resource above their head in a more simple way.

5: Announcement Text
In the screenshot, the text is displaying tips for the tutorial, but in a normal game it generally displays if an enemy or ally has been killed, or if a building has been destroyed.

6: Time and Score
Displays the Time spent in the game, and how many kills, deaths, and assists your character has.

: Mini Character Panel/Enemy Panel
Displays a mini character panel, and your enemies panel to the right and what items the target has.

8: Party Members
Displays the party members to the left hand side, their level, health and mana/resource. If dead, it also displays a timer for the amount of time it takes to resurrect.

Interface Exercises - Manual

Aim: Create a different but easier way to play League of Legends, by use of a new controller

The controller is designed to give players another way to play league of legends. It is a wireless controller which takes the normal keyboard controls used but instead it creates a simple to use game pad as shown below.

The controller takes the aspects of the keys used in the game, Q,W,E,R, to create an easy to use controller, with the summoner skills near the base of the palm and Shift in the middle. Shift is used by the palm, when pressed in the player can use what the game calls smart casting, so if they press in Shift they can instantly cast spells at the cursor. The player can also tilt their palm to press the buttons to the side and bottom of the Shift, using summoner skills and/or the recall button. Summoner skills glow the colour of the skills they have selected, so if a player selected Ignite and Flash, the buttons would glow red and yellow respectively. The basic skills are above the shift, with health and mana bars to the side of these buttons. The main skill buttons glow a pale blue. They display a current percentage of the players health and mana, divided into 10, so if the player is missing 10% health then one section would be taken, whereas at 5% no section vanishes. If the player has no health left, each button on the controller lights up grey, and the health bars glow white. This indicates that the player cannot do anything whilst dead. To the top of the controller, there is a KDA Counter, or Score Bar. KDA stands for Kill, Death, Assist, and displays the kills the player has, deaths the player has, and the assists they have accumulated. When a player wins the game, the buttons flash green and the KDA Counter says “Victory,” and if the player loses the controller flashes a dark red and the KDA Counter says “Defeat.”

Interface Exercises - Visual

Selected Game: League of Legends

Currently, League of Legends is a MOBA Game (Multiplayer Online Battle Arena) developed by Riot Games. In the game there are three lanes and a jungle, each lane being lined with towers and the jungle being filled with neutral monsters. There are 5 players to a team, and when the game starts players go into the lanes or jungle and kill creeps to level up. Creeps/Monsters spawn from the bases/jungle respectively, and are used to gain experience and gold. Players level up skills as they progress through the game and buy items.

The interface is almost exactly the same as a standard RTS game, except there are a few changes. First of all there is an actual place for commands, or skills in this game, and they’re set to the exact same buttons for every character, unlike an RTS where they’re set to all sorts of buttons. This creates usability for the game. There is also an inventory bar to the bottom left, which holds the characters items, a party members list and their statistics, and lastly there is a health bar for the character at the bottom.

New Interface Layout

The new interface is fairly different to the original, in the way that the new enemy indicator instead shows all enemies visible on the map and their stats, similar to the party member indicator.

1: Enemy Indicator, Indicates all of the enemies on the map that can be seen.
2: Chat, The chat hasn’t been repositioned too much.
3: Skillbars, Same as the  chat, it hasn’t been repositioned too much because this location is the best fit for it.
4: KDA, Counts the score of the player, relocated from the top of the screen.
5: Inventory and Experience, Shows the inventory and the experience/gold the player currently owns.
6: Party Members, Indicates all of the party members and their statistics.
7: Minimap, Displays the map and the statistics of towers, players, and minions.

The new interface highly contrasts from the other in a different layout. The intent here was to have the players team statistics to the right with the inventory so you wouldn’t have to look at both sides of the screen to read and in doing this, create a little more organisation. To the left is the enemy indicator, which doesn’t just show who is targeting you, it shows where enemies are if they are visible, and when they go missing off the map they are greyed out and the player is alerted. This adds to map awareness, which is a big must for League of Legends.

Simple Shadows

Thumbnaaaaaaaaaaaails.

Bean Men

Tonal/Value Shading

Made a stuff up on the 7 Tone but...

Character Two

Name: "Shade"
Gender: Assumed Female
Age: Unknown
Birth: Location Unknown
Weapon of Choice: Scythe

Specialties: Does not have legs, and hovers everywhere like a lost spirit instead of a being
Essentially not living, no details of birth or age.
Gender is unknown, although it is assumed female.

Abilities

Can fade into the shadows, stealthing from the sight of others.
Can turn her scythe into a shadow, using it to attack her opponents from range.
Can pierce the targets armor.
Can stun targets if she strikes them from behind.

Environments

Last two are the same place, just a different view.

Environment Further Development

Fairly hard to see but thats the environments.

Character 3 + Vehicle

Name: "Flare"

Gender: Male

Birthplace: Unknown

Race: Magus

Age: Unknown

Specialties: His cape actually transforms into a method of transport

Gained his nickname from the profound use of fire magic, although he knows all kinds

Prefers to be away from society than in it, although he will defend if needed.

Abilities

Can launch a fireball at the target which also burns them.

Can fly across the land granting faster movement.

Can shield himself with flames, burning those who attack him.

Can cause an eruption from flat earth.

Can wound targets at close range with the spear on his staff.

A lot of missing development (Includes Character 3, Vehicle and Weapon)

Weapons

Character One - Siren

Name: None
Classification: Siren
Birthplace: Unknown
Gender: Unknown

Age: Unknown

Specialties: Abilities can vary on where the Siren came from, although nobody knows where.

Depending on their specialisation depends on their weaknesses, like magic proficiency leaves them vulnerable to weapons, essentially meaning that there is no single way to defeat a Siren.

Cloaks are different styles and colour from their specialisation, the one in this case is proficient in Shadow Magic.

Abilities

Although they vary from Siren to Siren, the proficiencies of this one are:
Can launch darkness at the target
Can create illusion chains to seal the target in place
Can puncture the target, drawing blood
Can transform into the surroundings, essentially giving camouflage

Can turn the area around him into darkness, giving a significant advantage.

These abilities are not the same for every Siren, they vary based on their specialisations.

Characters. Character Three still in development.

Perspective Drawings.

Isometric Drawing.

Moon, Christmas Tree, Present, Snake, Ant, Box.

Something..?, Mirror, Ball of String, Phone, Building, Someone thinking.