Midgard Saga


 

Midgard Saga

 

Midgard Saga is a turn-based tactical role-playing game based on Norse Mythology.

In the game, the player controls a group of four vikings on their quest to return Odin’s magical mead. They must travel from the mortal realm, Midgard, to the realm of the gods, Asgard. Along the way, these vikings encounter a variety of enemies and challenges. Before each encounter, the player can customize each viking’s skills by choosing from a pool of 25 unique abilities. This allows for replayability and for the player to carry out multiple strategies to victory.

Role & Responsibilities

UI Designer & Scripter

  • Designed and implemented the majority of game’s HUD and menus
  • Ensured all in-game text and dialogue was responsive to localization
  • Worked with multiple artists to design and implement UI assets
Development Info

  • Unreal Development Kit
  • Team of 15 (5 Months)
  • The Guildhall at SMU
UDK
Guildhall
Download Midgard Saga

Download Midgard Saga
Work Overview

As Midgard Saga’s UI Designer, my responsibility was to create the HUD and menus for the game. I used three tools in order to do so: Flash, Scaleform, & UnrealScript.

Artists gave me assets and I arranged them in Flash, using layers and key frames. I then exported the Flash file into UDK. Finally, I worked with a programmer to use UnrealScript and the Scaleform library to manipulate the Flash assets. More specifically, I used code to hide and unhide assets, set text fields, control buttons, and animate assets around the screen.

Midgard Saga’s UI has four main sections: the HUD, the Main Menu, the Pause Menu, and finally the Victory and Game Over Screens. Below is an in-depth explanation of each of them.

Design Goals
Un-intrusive UI Communication

As the UI designer on Midgard Saga, my biggest goal was to present players with information in an un-intrusive way. I also wanted the UI to be as intuitive as possible. One way that I accomplished this was by putting the HUD at the bottom of the screen so that the remaining space was clear of obstructions. I also tried to use pictures everywhere I could because they can often communicate information better than text and are usually more intuitive. With several UI revisions and feedback from playtesters, I feel I was able to achieve this goal.

Sufficient Player Information

Since Midgard Saga is a tactics game, there is a lot of information that the player needs to know. I wanted to make sure the player was always well informed of the game state. This meant taking all the information the player needed to know and presenting it to them efficiently and clearly. For the HUD, the biggest way that I did this was with the use of tool tips that would popup when the player moved over certain things with their mouse cursor. Text played a big role in communicating information for both the HUD and the menus. I tried to keep descriptions as short as possible while still communicating everything they needed to. I feel that the UI did its job at properly informing the player.

HUD

The HUD is by far the largest and most complex portion of Midgard Saga’s UI. It is the means by which the player performs most of the game’s mechanics and is their main source of information. The HUD has four sections: The Unit Info Panel, The Abilities Panel, The Units Panel, and the Utility Panel.

The Unit Info Panel displays information on the unit the player currently has selected. I made sure to make the unit’s picture and name large so it was clear who the player selected. Another substantial portion of this panel is the Action Points (AP). AP is the player’s currency for performing actions so I wanted them to always know how many they had.

The Abilities Panel holds the currently selected unit’s abilities. Each ability has a picture for the player to easily identify it. Midgard Saga has two types of abilities: Active and Passive. Actives have a white border around them and Passives do not. I wanted Actives to stand out more because the player actively uses them. Since Passives take effect automatically and require no action from the player, there was no need for them to stand out as much as Actives.

The Units Panel has basic info on all four of the player’s units. It is an overview of where the player currently stands. Each unit has a picture, an HP bar, and AP. The pictures are also buttons the player can click on to select that particular unit. This is for convenience so the player doesn’t have to pan the camera to the unit and select it.

The Utility Panel holds some useful buttons for the player and displays the current level’s objective.

Main Menu

The main menu has four sections: Play, Controls, Options, and Credits. These sections are self-explanatory, but I will explain why I organized them the way I did. The main menu has two panels. One has the buttons that lead to the various sections and the other displays those sections. I did this to avoid the need for a back button. The player can quickly jump between sections.

The two biggest things I worked on for the main menu were localization and the credits.

The player can change the game’s language in the options. I worked with a programmer and the game designer to ensure localization was fully functional. My particular responsibility was to update the text fields on the HUD and menus to reflect the currently selected language. I also dynamically change font sizes to make sure text still fit if phrases in another language were longer.

The credits were a big accomplishment of mine. I took text fields and images in Flash and animated them to move across the screen using a motion tween. The credits are fully localized just like the rest of the game.

Main Menu Flash File

MainMenu_Flash
Pause Menu

The pause menu has four buttons: Resume, Restart, Main Menu, and Controls. One thing that I did with the restart and main menu buttons was include an “Are you sure?” prompt to ensure players don’t accidentally click the button in the middle of a level, lose their progress, and become frustrated.

By far the most complex portion of the pause menu is the controls. The controls menu displays the mouse and keyboard controls just like on the main menu. I used pictures as much as I could to make understanding the controls easier. Additionally, I worked with a programmer to implement the option to switch control schemes. The menu even dynamically changes to reflect which control scheme the player has selected.

Pause Menu Flash File

PauseMenu_Flash
Victory & Game Over Screens

The victory and game over screens show up when the player beats a level or when they lose all their units. For the victory screen, I promoted visual communication by putting an ‘x’ through a unit’s picture if they died and by making the stat numbers yellow to have them standout. A cool idea my team’s UI artist had was to have the game over screen’s background be a damaged version of the victory screen background. This little detail helped to reinforce the player’s defeat.

Victory Screen Code

VictoryScreen_UnrealScript
Victory Screen Flash File

VictoryScreen_Flash
Game Over Screen Code

GameOver_UnrealScript
Game Over Screen Flash File

GameOver_Flash

Post-Mortem
Complete and fully functional UI

I’m really proud of myself for being able to complete a fully functional UI. I accomplished all the major tasks that I set out to do and all the features worked as they should. I still want to make a few minor tweaks to the UI, but overall, I’m happy with the final product. It was nice to work on something for so long and to have something solid to show for it.

Sometimes too absorbed in work

I was on UI full time for Midgard Saga, so I wanted to make the best UI I could. However, since I was focused on one aspect of the game for all of development, I often became unaware of changes in other parts the game. One of my greatest strengths is being able to intensely focus on my primary task, but I also occasionally miss team updates or discussions. My focus serves me well for working on individual tasks, but to be a better team member, I’m working on being more aware of my surroundings.

Feature creep toward the end of development

My team and I were able to complete many of our game features early in development. By Alpha, we were solid and had a fully playable game from beginning to end. Because of this, we thought that we had more time than we actually did and we began adding more features in Beta. I feel like we didn’t spend as much time polishing or bug fixing as we should have because of the time spent on extra features. Our game still turned out well, but it could have been much better if we didn’t succumb to feature creep.

Prioritize the most important tasks

I wanted to do so much more polish work with the UI. However, I ran out of time and had to prioritize what was most important. I learned that if I was going to produce a fully functional UI, I had to focus only on the essential elements. I did, and the final product shows this fact, but there is still so much I wanted to do. Time flew by and before I knew it, development was over. I learned there’s nothing I can do about deadlines, but I can make sure to prioritize so that the most important things get done.