Coal Call is a 2D roguelike deck-builder game developed for a group assignment back in 2021. The main objective for the game is to defeat enemies using good card synergy, unlock new cards and progress through the game to locate the new power source. The project timeline was from January 2021 - April 2021.
I was the UI/UX designer for this project.
The game can be downloaded and played here:
As a team we playtest a mockup of our game made in a Steam Application called Tabletop Simulator as this is a deck-builder game and could work similarly to a tabletop game. This allow us to gauge the player experience and what could be confusing to new players and what should be prioritise to be included into the tutorial.
Battle Mockup in Tabletop Simulator
Below are the initial UI mockups of the game, do take note however, that some functions were removed from the finalised game build and the background images were used to check what colour scheme would match our old Steampunk theme, that was ultimately changed to Medieval Fantasy.
Coal Call UI Wireframe
Main Menu UI
Map UI
Battle UI
Deck Inventory UI
Options Menu UI
Merchant UI
Village UI
Below are the finalised UI that are currently present in the game and most UIs are non-diegetic unless stated otherwise.
Main Menu UI
The Main Menu UI displays the game's title “Coal Call” and provides the player with several options to interact with. As the theme of our game revolves around the all-important resource known as coal, the main menu was designed with ember coals. The menu buttons are arranged in a manner that represents a paper scroll/banner which was used in the medieval era that the game was set in. The font also resembles the blackletter fonts that were widely used in writings back then.
Tutorial Explanation UI
The first thing the player has to go through is the tutorial. Here in the tutorial, it works by highlighting and putting focus on the icon the tutorial is explaining. To proceed, the player will then need to click the “next” button. After all the UI elements are explained, the player will then go through an entire battle phase guided by the tutorial to get familiar with the gameplay as shown in Interactive Tutorial UI diagram below.
Interactive Tutorial UI
Node Map UI
In the Node Map UI, the player will be shown a map with various icons. There is a legend at the bottom right explaining what each icon is. The player can then choose which node they want to go to by clicking on said icons. Players can only traverse forward, and only to adjacent nodes and their location is shown by a white highlight, and when you hover over a node it changes its colour to grey.
Unavailable Paths UI
Once a player chooses a certain location, all unavailable nodes will then get greyed out.
ENCOUNTER - It’s a battle node that has normal enemies
ENCOUNTER+ - It’s also a battle node but it features elite enemies
TREASURE - You can get coal shards and cards from here
MERCHANT - This node allows you to buy and remove cards from your deck in exchange for coal shards
CAMPS - This nodes allows you to rest and restore your health
EVENT - Event nodes will have you make a choice either between getting attack/defend/special cards or restoring health. You can choose to go back which will not affect your health and current deck.
The Battle UI's purpose is to show information that the player would need to keep track of. The following are all the elements of the battle UI.
Empowerment Bar UI shows how many empowerment charges are left during battle.
Discard Deck UI shows the cards the players has used so far.
Draw Pile UI shows the cards still in the player's deck
Each Card UI, shows the mana cost to play the card, the name and graphic art, and the effect of the card.
Next Move icons shows what the enemy intends to do in the next turn. These icons are also used on players.
Shield UI shows that a Defend move will be played next turn.
Sword UI shows that an attack move will be played this turn.
Debuff UI shows that the player and/or enemy is affected by a debuff, players can hover over the icon to view the descriptions of the Debuff.
Buff UI shows that the player and/or enemy is affected by a buff, players can hover over the icon to view the description of the buff.
Enemy Selection UI shows which enemy players have selected to have their action inflicted upon.
Mana Counter UI shows the player's current mana during battle.
Story Dialogue Box UI
The Dialogue Box UI appears after the player clicks on the new game option and it will narrate the backstory of the game so that the player understands the situation their in. It will also act as a guide once the opening dialogue is finished. There are two types of dialogue boxes in-game.
One of the dialogue boxes is to narrate the story and guide the players to their respective hubs at the start of a new game which can be very helpful if the player is new to the game.
Tooltip Box UI
The other dialogue box is the Tooltip Box UI. It is helpful in showing what the enemy is going to do in their next turn and it also shows what is the current status effect of the enemy or the player.
Treasure UI
The Treasure Node UI is a node where when pressed, will randomly generate a card and a certain amount of coal as well. Depending on the luck of the player, the treasure node can have a huge impact on the player's deck. There is only (2) options for players to choose, either to claim the card or to skip it as this influence their card synergy of their deck.
Camp UI
The Camp UI is kept simple with minimal options to allow players to continue onwards on their journey without losing too much of the intensity in their player experience as it is a roguelike and its only purpose is to allow players to regain a certain amount of health.
Deck Inventory UI
The Deck Inventory UI can be accessed by clicking on the Deck Inventory Icon in the Node Map and Battle UI. Any cards that are added into the player’s deck will be displayed here. The cards are sorted by Attack cards followed by Defend cards and lastly Special cards.
There is a side-scroller for easier viewing, this is so players can check on their card and its stats in one page. This allows players to strategize a plan on whether to remove any cards or choose/buy more of a particular card type that have better synergy with their whole deck.
Merchant UI
The Merchant UI can be discovered in the Starting Village or by traversing through the Node Map. Each card has its own pricing as shown by the pricing box below the card. On the top right corner, shows the card gallery icon where players can view their cards and the number of coals (in-game currency) the player currently owns. There is also the ‘Remove Card’ option on the bottom right corner of the screen, where players can pay to remove cards from their deck.
When players are done with the merchant they can leave by clicking on the ‘X’ button and players will be automatically brought to the Node Map to continue on with their journey.
Reward UI
The Reward UI appears after players successfully won a battle. Players gained Coal (in-game currency) as well as the option to choose one card reward. Besides that, there is an option to skip the card reward as well if the cards are not what the players are looking for. It is also a strategy option because players must pay to remove cards from their deck.
Once the ‘Choose card’ button is clicked, the selected card will be added into their deck and they are returned automatically to the Node Map UI to continue on their journey. ‘Skip’ button brings the player back to the Node Map UI without a card reward.
Starting Village UI
The Starting Village UI is a Spatial UI, and it is the first location the player will see when starting a new game. Players must firstly click on the ‘Tutorial’ building using the mouse left-click button to go through the tutorial before the ‘Start Quest’ and ‘Merchant’ building can be unlocked. Both ‘Start Quest’ and ‘Merchant’ are not clickable at the start of the game.
This is also a respawn point for when the player dies as the game is a roguelike and thus the player loses all progress upon defeat. However, they get to keep the amount of coal they have found/earned to help them progress faster through the Acts and they do not have to go through ‘Tutorial’ again and the ‘Merchant’ will be unlocked.
More explanation of the choices of UI is also explained in the "Epsilon Dev Team Report & Playtest" video I posted earlier in this blog.
Comments