UI Combat: Let’s fight!
Drink, ye harpooneers! drink and swear, ye men that man the deathful whaleboat’s bow…
This will be the last article about the combat and before we start, I’d like to point out a couple of aspects of Nantucket. As you probably know, one main aspect of the game style is that is made of paper. It’s an experience played onto the Captain’s table, in his cabin and sometime is played in a harbor. Even so, the harbor is an illustration drawn on paper too.
When we thought of a combat style for this game, it came natural to us moving towards something mostly related with a table and a bunch of pieces of paper: a card game.
This combat is not a Trading Card Game. We’ve chosen a card style due to the context of this game: ship, crew, sailing. And, of course, we like playing card games too. Nantucket, per se, is not a card game, but includes a little card game played during the combat. Now, let’s move on with the article main subject.
Today, we are going to have a look at the actual combat phase UI. I want to share with you a first mock-up (this is a frame of an animated one):
In the picture above you can see a still of the animated mock-up we prepared before starting the implementation. We needed this to define the timings of the overall combat experience. If you have red the previous articles (if you don’t, you can catch up here and here) you already know how the combat has evolved and how the previous Deployment phase works. Once you start the real fight, you have to roll the combat dices of the crew members you have in your whaleboats and decide which command is the best to win against your opponent.
As you can see, these images are from an early mock-up and the dices faces are not final. The main concept, though, is there: according to the crew members you’ve placed onto the whaleboats you’ll have several dices combinations. Each dice face, when rolled, will unveil a specific command. Once the the dices have been rolled the player can chose which command he/she prefers. When the command needs a target, ad arrow will appear to point the target the player wants.
Let’s have a look at the design of the crew card:
Above you can have a look at the final version of the cards. I’ll show you each element from the top to the bottom:
- Combat states icons: Bleeding, Stunned, Poisoned, Blind and Surrender. These icons will appear according to the combat development. Except for the Surrender state, all the others are inflicted be the opponent. This label will appear and disappear according to the presence of states.
- Crew member information: Health, Name, Class and Level. In this case, I chose to use the heart icon to be sure everyone understands the meaning of it. Previously, we used a red/rope health bar but still it was not clear enough.
- Crew member picture: this is the same used in the whole game, whenever we access to the information of this man.
- Combat dice.
- Combat dice switcher.
The hearth of this card is the combat dice. In the above image, you’re looking at the Captain’s card which is special. Since the Captain has all 4 working skills (Hunting, Sailing, Science and Crafting) he will have 4 different combat dices: one per working skill. According to the evolution of the working skill the related combat dice will evolve too. The working skill faces are 3, no more. The remaining 3 faces are used in this way: 2 for specific skills in use and 1 for specific objects in use. This special dice faces will enable special combat commands.
During combat you can use the Dice Switcher to decide which working skill of your avatar you prefer to use. Simple crew members will only have 2 Dice Switchers: the one related to the working skill they are specialized on and a generic one (related to the Cabin Boy half-class).
Before the roll of the dices the player can chose which combat dice to use for the roll. This way, you can chose the best strategy combination to use each turn. Of course, its crucial that you placed the right men during the Deployment phase.
The Creatures card is a little simpler than the Crew one. First of all, there are 2 different cards: Standard and Special. Above, on the left, you can see the Standard card style while, on the right, you have the Special card style. As you can see, Moby Dick will be a Special card because its class is Legendary (and because it’s Moby Dick, I’d say!). From the left to the right, these are the elements of the Creature card:
- Creature type label: here you have the name of the species and the color of the card. The color is important because it lets you know which color will be its attack cards.
- Action/Instant card slot: here the creature can play two different type of cards. The effect of these cards is used for the creature itself.
- Creature picture: below the Action/Instant slot.
- Creature information: Health, special creature’s Name (or the species name instead), Category, Special ability (or the species shape instead) .
- Combat states icons: here will appear the same icons used for the Crew card, except for the Surrender.
Remember that not always defeat the enemy all the enemies will be asked. The Victory conditions card, in the top left, tells the player the requirements to the success. Moreover, in the top right, there is the Random Combat Condition card that will be drawn each turn and will define the combat conditions each time (bonus, malus, etc.).
And what about the Crew VS Crew combat? Here you have it!
Here the combat will work the same, the only difference is the there will be less crew member on your side. Moreover, you will be able to see the combat dices of your opponents. The only real difference is in the opponent card: the colored label is placed at the bottom of the card. This way you have a reference to who is attacking who.
Well, I don’t want to spoil too much of this since we will have specific videos about the combat in our “Devs Play” series (watch it here).
Hope you’ve enjoyed like I did in sharing this with you.
Keep tuned and Godspeed, as always, from your Capt_Eatbones!
Tags: art, combat, design, games, nantucket, ui, ux, videogames