Today we’ll be sharing with you more of our “internal” design documents and updates around Shiryo’s “Turn History” board element and icons.
If you’ve kept up with all our previous articles then you’ll know when it comes to the Shiryo game… all the details really matter to us. With icons, there’s more to them than what meets the eye and we’re here to lend perspective on that.
Continuing from last week;
We showed you from a high level, how we go from conception (brainstorming) to initial design concept and testing with the artistic vision interwoven between this process enabling us to create a uniform thematic experience.
As that was from a high level of viewpoint and you could see we included many individual elements of the board, we’re now wanting to convey to you the next step of our process — which is to take each individual element, then cross analyse other leading TCG’s and distil out the fundamental elements that we’re wanting to incorporate into our own version of that element within Shiryo.
For this write up we’ll be covering the ‘Turn History’ element of the game board.
One of the reference images we included in last week’s write-up showed the new board design that included some of the internal markings (drawn crudely).
One of these was highlighting the ‘turn history’, as a gameplay element giving the players the ability to observe the game’s recent turn history.
This allows us to provide a tool that is scalable across all player skill levels;
i.e a new player can leverage the turn history to remind themselves of their previous plays, cards and actions that have previously occurred.
While a high-level player, not needing this basic functionality can leverage the turn history to augment their long-term strategies.
This requires us to condense a huge amount of information into a compact visual space covering a variety of different states and situations.
So how do we go about doing that efficiently?
The solution
To address this as usual our creatives and designers enthusiastically debated for and against individual methods which we could implement. The result of all this heated debate was a reduced down set of icons and symbols that we could leverage across not only the turn history element, but also other UI / UX elements across the game.
By having consistency across icons and symbols we’re able to use them across the game in a variety of UI / UX elements, this enables the player to pick up both new gameplay mechanics and increase the strategies they can implement efficiently.
Icon Designs
How do we come up with icon design? With so many individual icons how do we get to our end result?
Well firstly, we start with function before form.
We reduce down what information we’re trying to convey, then we group together information to generalise it. This enables us to wield an icon to do more than one task.
After this comes form.
This involves us analysing Shiryo’s overall theme, everything from our main menu, in-game elements, sounds, the ‘feel’ that Shiryo is trying to present… we then refine a caricature that optimally represents what we’re trying to capture.
This process is then repeated for each icon we’re wanting to include. After this we perform an overall evaluation of all the icons working in unison, to be sure the overall composition of the turn history element fits within the vision of Shiryo.
Below we’ve included all of the design notes from one of our developers to our artists for creating the board history icons. As you check through, you’ll be able to see the extra lengths gone to ensure that everything fits thematically.
Board History Icons
All icons should fit within a certain frame or similar frames using the same colours, style and size.
Cards with a red border indicate opponent cards and either a yellow, blue or green border could indicate owning player cards.
Most TCG’s will use just the card art rather than the mini board cards or full board cards. Once hovered over there would be a larger scaled version of the full card with more detailed icons/ descriptions of what that card has done.
Attacked– This icon will be shown more than any other icon. The Icon should indicate a beast attacking another beast or hero. Claw marks could work well and would fit within the theme of Shiryo. — If a beast was to kill/destroy another beast we would indicate this through the zoomed version of the history on the card that has attacked, when the card is hovered over. A wolf skull appearing over a card that has been destroyed makes this clear to a player.
Human skull indicates a card has been killed/destroyed. >
Heal- In other tcg’s healing icons are often represented with an up arrow to indicate a raise in health. For us this would also be a good go to. We have also used plus icons for healing animations which could be another option.
Debuff/Nerf — Same as above but shown as an arrow pointing down, this would not include beasts receiving damage but debuffs that would include — Give a hostile beast -1/-1.
Pack Bonus Activated (3 pack creatures of the same pack on the board at once) — This icon should follow the same iconography used with the ui assets on the card. A wolf claw icon would work nicely with colours matching the same as other icons.
Pack Leader/Alpha Crowned- This icon would look similar to the above icon with more flair or we could incorporate something like a crown to signify the crowning of an alpha.
Triggered Ability — Looking at TESL they use a ‘star’ icon to signify a triggered ability. This icon would show on a card when its ability has fired during game play. We could use something similar to indicate this or even something a little more creative. This icon would be probably shown the second most with the attacked icon being shown most. The first idea that I thought of would be a bear trap to indicate an ability being triggered, another idea could be a wolf head howling or looking up. Triggered abilities would include a lot of abilities that are currently assigned to cards we have but also all the last grasp cards.
Summon Ability- This icon would show when a card’s summon ability is fired, this would include all growl abilities. An example of ideas could include an open wolf eye to indicate the opening of an ability or start to it, or we could continue with the animations used and use a jaw or teeth icon.
Bonus Effect/ Upgraded Card — An icon to indicate a card has been upgraded or received its bonus effect through elemental upgrade. In most games upgrade icons are usually symbolised using either up arrows, plus signs or sometimes stars. This icon would be shown a lot and isn’t necessarily a must have for icons we include, late game most beasts will be played with their upgraded effects.
Ongoing Effect Icon- An icon to show a card has an ongoing ability. Perhaps an infinite icon or a looping arrow of some kind might fit in well with this. This Icon would be shown once on the ongoing card per turn or whenever the ongoing requirements have been met. The icon could also be linked in with the animation or icon we show on the card, this is yet to be designed.
Other generic icons
Once hovered on a card in the history panel a larger version of the full card would be shown, here we would want to show simpler icons such as + and — along with the wolf skull icon as mentioned before to signify a beast has been destroyed. Lettering and numbers could either be shown using preexisting fonts we use in other ui elements or even a specific scaled up font just for this area.
In this zoomed area we may also want smaller mini icons to show elemental effects such as; poisonous, poisoned, freeze, frozen, defender, innerfire, new charged(thunder)ability and other global abilities like hidden and rapid attack. These could be easily distinguishable and would give players more information about what has happened to cards in the history section.
We would probably want these icons to have an ongoing icon and a receiving icon if applicable, e.g. an icon that a beast has the new charged ability and then a receiving icon for a card afflicted by this ability. Defender however would only have one icon as cards can’t be affected by this ability.
Received inner fire and received Charged
These icons would not have to be as rigid or following a particular style compared to the ones shown on the history feed but could be shown in certain areas on the zoomed full card version. Cards with an ongoing or attacking ability could have their icon shown more towards the attack stat frame while cards that have been afflicted by one of these abilities or have an ongoing buffing effect (defender) could show an icon more towards the health stat frame.
