This week’s update is brought to you by the Shiryo Team and Rick, our Lead Game Developer. In this week’s update, we’ll be showcasing to you some of the assets we’ve been working on for the Alpha test release.
Given our updates typically cover more technical aspects of Shiryo’s game development, we thought we’d share some visuals to feast your eyes on — alongside information as to why certain design choices were made.
We think you’re going to love what we have to show.
Now good news or bad we always wish to be transparent with our ‘Sunday Updates’ to keep the Wolfpack as informed as we can — and this week our update is coupled with some unfortunate news.
One of our interns Tomat — has recently left the Shiryo game development team.
Tomat wished to share with the community that he greatly enjoyed working at Shiryo, but unlike the rest of the team who are able to live the ‘bachelor coding lifestyle’ working tirelessly morning-to-night — Tomat is a family man. As such he’s come to the conclusion that the schedule of working at a ‘startup’ gaming company (which can be very demanding) isn’t as suited to him for balancing his work and family life.
We respect his decision, we’ve parted on good terms and wish him all the best in his future.
We’re sure you’ll have the questions of — what now? Will this slow down the Alpha Test phase? Will Tomat be replaced?
Fortunately Tomat knocked out an impressive volume of work during his time with us which drastically helped our development process. Though now as to be expected, there is a transition phase of redistributing out his remaining tasks amongst the game development team which will help minimize any potential delays.
We will still be continuing the search to expand our game development. Those who’ve followed our updates will be aware of the ‘hiring saga’ we embarked on to find our coders, we would like to remind the community that this hasn’t ended.
We’re constantly on the look out for coders, developers and other talent for Shiryo, as such we will be finding another individual to fill Tomats role as soon as possible.
We understand that this news may be disappointing, but we hope that you can be understanding of the situation and continue to support our game development team who have so far worked through every obstacle we’ve encountered.
Now then, let us show you some of the exciting developments Shiryo has had recently.
We thought we would share with you some of our animation updates and give you more insight towards our design process. Next week we’ll be following this up by giving the community a look at our new board designs!
First let’s dive into our Animations.
We’ve covered before how there’s an inherent complexity to something like a trading card game. There are many layers, many subtle things happen concurrently which when executed well will look seamless. To quote Rick, “you won’t even notice it’s happening but I can attest as the developer that we ‘know’ it’s happening”.
There are a lot of levers to be moved that go into creating such an organic experience.
Part of our process is brainstorming the way we want an ability to look.
Initially, we’ll create some rough concept designs and get our animators to essentially make something that looks ‘as good as possible’. Once they’ve completed their first drafts, we’ll actually watch the ability being utilized on our board to cross reference how it fits into the board environment , i.e does the abilities color palette match well with the cards and the board, or are there other aspects of the design choice that make it ‘clash’ with the board.
Then we’ll cross reference it further with other things you may not think of, such as does it’s theme clash with our user interface (more on that later), how does it present when it’s layered on top of other abilities, does it’s animation runtime match the pace of other abilities and so fourth.
To demonstrate part of this journey, we present to you the story of the ‘Defender’ ability.
Creating Defender
In this write up, we’ve included screenshots from the original supporting videos (attached in a zip folder in our Telegram Announcements Channel). These screenshots are relatively low resolution, we would like you to cross reference assets from that folder with this article to appreciate them in full high resolution quality in their original video format.
When creating the Defender ability we knew it needed to demonstrate defense of course, so we brainstormed how things should come across. One of our animators felt a moment of inspiration and lept to our initial design which became Defender iteration 1.
(Please reference file “1 Gain_Defender_Iteration1.mp4”)
Does it fit?
Defender Iteration 1 shows a metallic / riveted ‘aerospace’ looking frame. It fits the optimized border of the card well, it contours around the ‘stat frames’ great, it looks tough and strong. Under scrutiny though, it looked too ‘mech’ (like something from the Transformers franchise).
So how did we address it? This leads us to Defender Iteration 2.
(please reference file “2 Gain_Defender_Iteration2.mp4”)
Defender Iteration 2 is a result of another brainstorming session by our artists and animators. This adjusted concept, you can immediately see it has less of an ‘aerospace’ look, it’s a little more ‘organic’ ‘rock-like’ while still having a metallic-type appearance. Whilst this addressed the initial design issues, the designers concluded that it still subtly doesn’t thematically feel like something that would come from Shiryo.
So where do we go from here?
We bring our creatives in, the ones who think outside the box. They realized we should approach the whole concept from a different angle. The ‘Defender’ characteristic we had found to be fairly straightforward. Strength. Toughness… that’s not what’s hard to convey. How can we make it ‘belong’ in Shiryo? That was the real crux to solve.
This brings us to Defender Iteration 3…
(please reference file “3 Gaining And Removing Defender.mp4”)
Defender Iteration 3, the creative solution.
While we were scratching our heads on how we could make its theme really fit, our designers were already figuring it out by cross referencing other design elements to see if they could draw inspiration from outside of the ability itself.
They looked at our new board design, the updated menu UI and other areas, and in there found the solution. We noted the borders around our menu elements looked TOUGH, they had the look of durability we were going for — and they’d been built from the ground up to suit the ‘edgey’ theme that Shiryo wears so well.
They implemented the idea, using design inspiration from the shape of Defenders 2nd iteration and wearing the ‘skin’ from our menu system — and voila. We were able to present a version of Defender that also synergised thematically with Shiryo’s vision.
Layering Multiple Effects correctly
(PNG Taken directly from folder, “4–1 Frozen.png”)
If you are to look at the attached image (4–1), this card shows that it has been ‘Frozen’. Can you see the potential issue that might appear? It isn’t obvious. While playing Shiryo, it is quite unlikely for a card to only be showing a single ‘status effect’ at any one time . It’s much more likely that there will be multiple, wildly different status effects and animations shown simultaneously.
This could look chaotic if we mash a bunch of effects together without deep consideration of all this interplay.
To address this there has to be some kind of system. A set of rules in place so that different status effects and animations are shown in the ‘desired’ order. (whatever those rules might be). While our designers might be able to imagine 99 different animation layers, playing simultaneously and have them ‘look cool’, we needed a way to effectively design this layering (hierarchy of animations).
So let’s start from the top.
(PNG Taken directly from folder, “4–1 Frozen.png”)
If you are to reference, image (4–1) again. The card shown is one of our ‘optimized for the board’ designs, that is currently displaying that it has been Frozen. What happens if this particular card also needs to display the status effect ‘Defender’? How could we represent both ‘status effects’ simultaneously without it becoming a mess?
The solution is to design each animation as part of a whole ‘family’. Each ‘element’ has its own designated layer position within the full ‘family’ stack.
(PNG Taken directly from folder, “4–2 Frozen and defender.png”)
If we look at the image (4–2), in this iteration you can clearly see both Frozen and Defender being shown concurrently, with Frozen being the dominant (highest) layer in the hierarchy. It displays the Defender frame ‘Frosted’, whereas if we had Defender layered over Frozen… we’d have a look of armor covering frost… not ideal.
That wouldn’t really ‘make sense’ in the most instinctual of terms. Imagine looking at a frosty fence on a snowy winter’s day, the fence doesn’t cover the frost — the frost covers the fence.
(PNG Taken directly from folder, “4–3 Frozen and defender(Art).png”)
If you look at the ref image (4–3) you can see a more // ‘complete’ / ‘accurate’’ representation of a card ‘in play’. Specifically a thunder element card, optimally displaying both its Defender status effect and its Frozen status effect simultaneously. These effects are both being displayed clearly, while being ‘considerate’ to not ‘block’ or negatively affect the cards additional elements, such as the card Art, Rarity Icon, and both the Attack and Health ‘stat frames’. This ‘balanced’ composition was the result we were aiming for.
Animations
For those who are still attentively reading, we’ll now take up a little less of your headspace and show you these animations in practice.
(We must reiterate, please reference the videos in our uploaded folder as video is of course necessary for viewing a full animation)
(please reference file “5 Getting and losing Frozen.mp4”)
This is our latest iteration. What we’re showing is an example of a beast card getting ‘afflicted’ by a ‘Frozen’ ability effect- and its status effect then being removed.
When it gains the ability you may notice a small, subtle looping effect (an ‘ongoing’ effect). This is so while the card is inflicted, it conveys to the player that the status is dynamic. Those little details are the kind that could be easily overlooked or taken for granted — but really help to give the game a professional feel.
(please reference file “6 Cards Getting and removing Frozen effect.mp4”)
This video shows a variety of cards being inflicted by Frozen. As you can see from this video — different elemental type cards have different color themes, highlighting the importance of being sure our animations look great across them all. It hasn’t been unusual during our design processes to utilize an animation and discover that it only looks good on similar color palettes (i.e poison status effect on an earth card).
(please reference file “7 Getting and losing Frozen with defender.mp4”)
This final animation displays a thunder beast card that has the Defender status active. During this time it both gains and loses the Frozen status effect. We get to display how both of these status effects are shown concurrently in a synergised way. Whilst we will always strive for better, this is the most polished look we’ve created yet.
As you can see, there is a lot to take into consideration when we embark on the journey of refining special effects and making sure that they present a thematically fitting aesthetic appearance — whilst seamlessly working alongside other effects.
The processes take time, but it’s absolutely necessary and worth its end results to create the vision we have for the Shiryo game.
As we close this week’s article, we quote Rick directly;
“I know I typically provide technical information from a more programming and engineering side of development. Though as much as I enjoy discussing the driest-harshest-technical-nuances, I’ve been looking forward to being able to present to the community more visual representations of progress being made.
Hopefully my passion for both technical aspects and the design aspects of Shiryo can come across in these write ups, as both are of the utmost importance for me to get ‘just right’.
As our Lead Game Developer, I’m required to have strong knowledge and a wide skill set for the many facets that go into game development, however when presenting Shiryo’s assets — I hope it’s evident that the rest of our team is equally passionate about producing the best results that we can.”
We have a lot more to showcase, stay tuned for next week when we’ll be able to share how the new board(s) are looking and the design choices around them.
