A gameflow and a few wireframes


ToT is constantly evolving! In October I wrote about some improvements to the UI. If you've checked our forums recently you will know that I am hard at work building the game's levels. In this article I want to tell you about some UX related changes that I have made to the flow of the game. Keep reading for more!

Alright so the first thing to go through a few tweaks was the overall flow of the game.



The most significant change here is the Deck Management screen. From that screen the player can select the deck they are playing with (out of four possible decks) and edit the cards in each deck. You can also get to the card store from this screen. In the card store you can buy new cards using gold. Players can buy and use multiples in their deck (up to 9 of each card.)

ux2If you've seen the title screen in it's current state, you would probably notice a lot of white space. I decided to make good use of that space by moving the save files off to the right. Previously the player had to select continue before they were presented with the save file, now they are right here on the first screen. If we only had one save file, Deck Management could have been accessible here, but I think its more important to allow for multiple saves.

ux3Deck Management looks like this. Players can click on any deck and they will be presented with a few choices. Equip sets this as the deck the player is using. The check-mark shows that this deck is already equipped. Edit allows you to change cards. I'm considering allowing the players to rename their decks. This way players could name their decks things that are descriptive of certain strategies. I think I would find it more useful to have a deck named Firespell Deck rather than #3.


ux4The Edit Deck screen has seen some serious streamlining. At the top that players can page through their four decks. In the center you see a list of cards. This list of cards will be populated with all of the cards the player owns. Multiples of cards are not shown. In this wire-frame I am showing the number of that card currently in the selected deck, we will also have to show the number of cards owned but I didn't want to complicate this wire-frame with small numbers. Left clicking will add a card and right clicking will remove one. Remember you can have up to 9 of any card.


Finally we have the store. Players can use gold to buy new cards or additional copies of cards they already own. Gold is earned by winning battles. (ToT history, Gold use to be called Spirit. Spirit is now used only in battle as a resource to spend on deploying cards.) Cards you can not afford will be grayed out. If you click on a card to buy it you will get a little dialogue window asking if you are sure. This is here mainly to prevent accidental clicks. I know some players will find it slightly annoying and I'll be sure to include an option to turn them off.

There is one more thing I want to explain about how decks work. Cards only exist in the equipped deck at anytime, so the deck is more like a list of cards from your pool of cards. The easiest example is this, let's say there is a card called Ice Storm, and I have one copy of it. One copy of Ice Storm can exist in all four decks simultaneously.

For anyone wondering, I just used Photoshop to make these wires. I usually find that it's the quickest and easiest  program when your doing wire-frames for games. As usual, you can follow me on the twitter so you don't miss any of our posts.

'till next time,







Share on FacebookTweet about this on TwitterShare on Google+Share on LinkedIn
  • http://www.tyrantofterror.com/ Chris Crawford

    I have since done the wire-frames for the two different mission select screens. (One for campaign and one for free-play.) You will be able to find them on the forum.