Weekly Shiryo Update from The Shiryo Team #39

Lead UI Designer

In this week’s update — I have some new UI work to share around the game-side interactions for the community, I hope you’ll like what you see.

Whenever we’re designing anything we always start it as a team collaborative effort, cross-referencing other games, seeing repetitive information, asking “Why have they done this?” and “What’s our best version of this?”.

I’ll then take our inspiration, get to work, design a concept — and then bring it back to the team for feedback and adjustments. On occasion though the initial workflow will be ‘made easy’ with Connor providing the wireframe mesh, such as with the Mulligan designs shown in this write-up.

With that being said, here’s what we’ve been working on.

Match Welcome Screen

On starting a new game we will have a dynamic start screen which will show your opponent along with everyone spectating. The information we choose to show on this page and the importance of information is subject to change.

For now, we will be going with something along the lines of above – as it fulfils its purpose. Although as you all know, we’re doing our best to make sure each area of the game will hit right, so as we start getting some testing underway we may expand on this — making modifications/alterations down the line.

This ‘Match Welcome’ screen will show for a short moment before taking you to the ‘Mulligan’.


The mulligan is where you choose which cards to start in your hand. You can select a card to re-roll one from your deck at random. We have been working closely with our animator to bring this to life. The sizing of the mulligan design is based off of Lead Animator Connors 3D wireframe mesh.

It’s paramount that our game-onboarding is as simple and user friendly as possible, so we are keeping things as intuitive and simple as we can. That being said, we also keep a close eye on future scope to make sure everything will fit in as a foundation to future feature additions of the game.

Mulligan was a key talking point of last week’s update provided by Lead Animator, Connor, here’s a recap on what it involves;

“The Mulligan is at the starting phase of the game, giving both players chances to redraw any or all of their starting 3 cards. This phase will initiate after or during the time players are aware of who goes first or second, certain cards or strategies will work better when going first or second. The controlling player will draw 3 cards from their deck which will flip at the centre of the screen, any cards chosen to redraw will be sent and replaced with new random cards from their deck before moving back to the player’s starting hand. For this, 5 sets of animations have been designed for each card position.”

To view the skeletal animations of Mulligan, check out last week’s article here;


Moving on, some more of our most recent work…


Another static asset which will come to life with a joint effort from our designer and animator. The arrow allows cards to target other cards. Click the screen and it starts the arrow, with the arrow point itself attached from the card to the cursor — so it’ll resize depending on where you scroll.

To make this work for animation means exporting it out as its individual components. The arrow base (the circle), the arrow line and the arrowhead are all individual components that will be mapped to your cursor positioning.

When working on elements like this, it’s important that not only does it look cohesive with our theming, but that it works across all our different board environments. Originally the arrow was actually yellow, the same way our ‘on-screen prompts’ are yellow (Yellow helps separate from the board as an overlay), we thought it’d help it stand out.

But in the end, we decided that it’s more of an integrated ability and less of an on-screen prompt/notification so a change was needed. Hence we tried this blue, referenced it across different styles of boards we’ve had — and found it fitted better thematically. Of course, it’s liable to change, but we’re enjoying its ‘look’ for now.

Damage Indicator

Many indicators will show up on screen throughout gameplay — on the image above you can see a ‘damage’ indicator displayed at the centre of our player’s hand.

Right now in our workflow — our importance is on getting one for everything needed. This is a fair number, effects from abilities like ‘growl’ will have their own, if an ability is canceled it’ll need its own etc.

Then once we can look at them all as a whole, firing off in-game, our next focus will be on tweaking these to be fully cohesive with one another.

That’s it for this week’s update on the UI side, we hope you’re enjoying the game’s development journey so far, things take time but week by week everything is coming together really well. We look forward to sharing more with you soon.

We’ll catch you all again next week and in the meantime…

Have a very Merry Christmas Wolfpack.