Share this project

Done

Share this project

Done
A rich, diverse Tactical RPG, envisioned by the master of the genre Yasumi Matsuno and you, the fans!
A rich, diverse Tactical RPG, envisioned by the master of the genre Yasumi Matsuno and you, the fans!
15,824 backers pledged $660,126 to help bring this project to life.

Developer Blog #2 - UI Design Process

Posted by Little Orbit (Creator)
73 likes

Hi backers,

This is Matt. We're back this month with another developer blog. Hope you enjoy.

Also mark June 1st on your calendars. The upcoming Kickstarter update is going to be very different from the last couple. I'm super excited to share the first set of production art! 

Thanks, Matt

05/15/2018

Hey backers,

This is Rowan Ryder again from Torus Games, here with Tyson Hollitt, who’s in charge of the User Interface design for Unsung Story. Today, we’re going to talk about UI design; where it’s currently at, how we got there and how we plan to proceed. 

As always, please note that the visuals here are completely placeholder and do not reflect the final art of the game. 

This means that the final game probably won’t have these adorable robots.
This means that the final game probably won’t have these adorable robots.

UI Pre-Production

At the beginning of any project, it’s important for the UI Designer to collect reference material; trends from games in the same or similar genres, trends from the industry at large and even examples of UI from software outside of games. We look at what’s working and what isn’t, then combine that knowledge with what we understand to be unique about our game.

In this case, we need to break down and understand what players expect from the UI; each units vital stats, their equipment, the turn order, where each unit can move, etc. It’s also important to lean on what the player already understands — players are constantly learning while they play a game (any game), and it’s important that the interface doesn’t ignore this fact.

Finally, pre-production involves listing out what information will need to be exposed to the player through the interface. It’s extremely helpful for the dev team to have access to this information in an easily digestible form so we don’t overlook anything as we move forward.

It’s very common for developers take information for granted when they live and breathe a game for months, but as soon as a new player gets their hands on the game they’ll find it bafflingly vague and obscure. As such, we rely on an itemized list of information to make sure we’re on track (as well as regular play testing!).

Unsung Challenges

All projects bring unique challenges to the table, but the most impactful one while developing Unsung Story has been the unusual grid shape (and how we display it to the player). 

Display methods for the triangle grid
Display methods for the triangle grid

We’re aiming to make it look and feel organic, but still intuitive and easy to read and understand. It may sound simple on paper, but as each edge case arises it becomes more and more complex — verticality, attacks that allow you to move in unusual ways and so on all considerably complicate the design. 

On a slightly different note, the turn queue has been an interesting technical challenge. Figuring out which unit comes next is relatively easy (without spoiling too much, we’re using a Speed system not too too dissimilar from Final Fantasy Tactics). The problem comes from abilities that delay or speed up units and how we can display that in real-time. It’s coming along smoothly, but it won’t be surprising to find ourselves polishing it right up until the end of development. 

Mockup of World Timeline Map
Mockup of World Timeline Map

Note that the actual map behind the UI is a holdover from PlayDek’s work — our World Map is still in development, and there’s a lot about the map we’re not quite ready to share. Similarly, we’ve changed the real mission names to miscellaneous references (no spoilers!). 

Influences 

Getting this right out of the way — Final Fantasy Tactics is a core influence of all facets of development. We want the UI to feel indicative of FFT, but we also need to ensure we avoid some of the issues it had (which weren’t exactly uncommon in the 90s). 

This essentially means that we want to avoid the player taking several steps to perform a simple action; we don’t want to remove any strategic depth, but we do want to make sure players spend more time fighting enemies than they do fighting the UI. 

As such, FFT: A2 and Tactics Ogre: Let Us Cling Together have been stronger influences in terms of flow and usability. Monster Hunter World has been another big influence, given the huge amount of stats and other information it manages to display (relatively) smoothly. 

Finally, yes, the XCOM games were a big influence, particularly on the grid. Our grid has significant differences and is generally more strict about unit movement, but we liked a lot of what XCOM did, particularly in regards to the grid outline. However, XCOM also majorly influenced other areas, such as attack confirmation. 

Building the UI 

Each part of the UI is built in a different way, depending on the problem we’re trying to solve. Typically, though, the first step in all cases is to work out all of the information being displayed and what interaction is available within any individual screen. 

Then, this needs to be cross-referenced with every other screen to see if context changes anything. For example, the Equipment Screen for a unit will change if you’ve come it directly from your Inventory Screen by selecting something you wish to equip. This means that all screens have to be made with consideration to the others, so it can take a long time to finalise their layouts! 

Then, the programming team needs to get involved to make sure we’re not doing anything too outrageous (just stuff that’s the right amount of outrageous). At this point we’ll typically have a decent paper sketch of the screen (and several sketches that that are much rougher), so we can talk the team through the plan. 

Iterations of rendering full ranges for the Triange Grid
Iterations of rendering full ranges for the Triange Grid

Next, we make a “wireframe” of the screen. This differs from project-to-project; sometimes the wireframe is done in specific prototyping software, sometimes it’s done in graphic design software (which is how we’ve been handling it) and other times it’s actually done directly in-engine. 

Once this is done, a programmer hooks it up and we can test it (complete with basic animations). This is when we can iron out the problems we didn’t anticipate, though unless the UI is extremely complex (such as with the turn queue), there typically aren’t many. 

Finally, we add art! There can be small tweaks to the screens from here, but (unless we run into some kind of major issue or game-wide overhaul) we rarely change much. 

Unsung Story — like basically all RPGs — has a lot of complicated UI, so there’s still a lot to be done. We’re getting through it at a good pace, though, and look forward to showing you more as we move forward. 

As always, thanks so much for your support! 

We’re looking forward to the rest of the journey.

Alex Polson, Justin, and 71 more people like this update.

Comments

Only backers can post comments. Log In
    1. Mateus Drake on

      I like what I see! Still have faith in this project.
      I know the troubles and the road so far was rocky, but I do like the fact that these issues have lead to these being one of the more "open" and honest updates I read on this platform.

      Although I think the project, as originally envisioned, has been lost, I do believe that you guys are doing your best for the game you end up delivering to end up being a worthy successor of that first draft - perhaps even better in some areas, which may surprise us.

    2. Carlos Garcia on

      With each update I become more and more excited. Thanks for being so open.

    3. JK Clark on

      Yes! Everything makes perfect sense. Thank you for being so forthcoming about your process. It's almost as if transparency helps people be more patient and understanding! Crazy!

      Seriously, if only others understood this.

    4. Zenon Berg
      Superbacker
      on

      Just another voice here to say "thank you"! The updates are spot on and it's so refreshing to see you honoring your commitment!

    5. Edward Saunders on

      Thanks for the great updates! Great work so far.

    6. Missing avatar

      Jim McGowan on

      Thanks so much for all the efforts and updates. Over the past months, I have renewed faith that we might be getting a cool game. Quick side question for you regarding influences. What are your thoughts (if any) on the old Super NES game, Ogre Battle? I loved that game in it's day, and it has a very similar pedigree to that of Tactics Ogre and Final Fantasy Tactics. Obviously, the focus here is to make a long-delayed tactics game, but if you guys are able to profitably pull off this FF Tactics inspired game, I'd be curious if an Ogre Battle homage would be in your wheel house. Cart before horse, I know. Just thought I'd ask. Thanks again for keeping us in the loop!

    7. Missing avatar

      Ahmed Adh'ham on

      I received two Kickstarter updates today. Unsung Story and Ossic X.

      You guys are awesome, and I love the indepth updates we're getting. Looking forward to seeing how Unsung Story turns out.

    8. Little Orbit Creator on

      @All - Thanks for the positive feedback. I'll make sure the team knows.

    9. Missing avatar

      Martin on

      Just have to say, I LOVE these in-depth game design updates.

      A lot of game developers shy away from revealing too much detail, ending up with shallow treatment across many game systems. Whereas you guys go into a lot of detail on one system, like showing the design context, challenges, and evolution of the triangle grid UI.

      It is fantastic. Please keep this focused format into the future: with concise text and well-made visuals, I can confidently say I would have backed this project just for the quality of the developer diaries!

      Matt, please thank the entire design team for their hard work and passion!

    10. Zachary Reese on

      Appreciate the update! Really liking how things are coming together!

    11. RPRezo on

      Yep, nice update. Keep up the good work!

    12. McLean Kendree on

      This is a cool-looking update. I had lost all interest in this project a while ago for obvious reasons, but it looks like the new team is really trying to pull it together. These look like the bones of something with lots of potential, wishing you guys the best. Good luck!

    13. Shannon Potter on

      What a great update! I think we’re all behind you at this point, having proven your commitment and providing actual updates. Looking forward to seeing your next updates!

    14. Justin
      Superbacker
      on

      Thanks for the continued communication, great to get a look at what's going on currently with the project.

    15. Alex Polson on

      Love these updates! Getting to see some of the process you're going through is fascinating and gives me confidence in the project. Keep up the great work!