back to news
A Retrospective Look at Character Sheet Interface Design
décembre 17, 2020

The year 2021 is fast approaching, which means that it has been almost four years since I joined Pathfinder: Kingmaker as a UI developer. During this time, the game has evolved from a small prototype with minimal functionality, into a huge, complex system. The game has gone through release, a year of active bug fixes and DLC support, and it’s been ported to console. Now that the development process for the game is complete, it’s time to go back and take a retrospective look at how the interfaces were designed and built.

I decided to start with what is, in my opinion, the main interface of the game: the character sheet.

 

Introduction

As you know, Pathfinder: Kingmaker is a computer game adaptation of the Paizo board game Pathfinder. Since all of the developers working on the project needed to be familiar with the game, the team made the smart decision to host weekly tabletop game sessions based on the original Kingmaker module.

This proved to be very helpful, especially for the beginning stages of interface development. We used actual character sheets when we played together at the table, so we were able to experience the original pen and paper version of the interface we needed to create.

Image taken from: http://runelords.peepersbog.org/index.html

Unlike my colleagues, who were more acquainted with these games and their development, my past RPG experience was limited. In my youth, I played a few games based loosely on the rules of D&D, and I also played Baldur’s Gate, though at the time, I didn’t know it was based on an actual tabletop game. Now normally, a lack of experience is a huge disadvantage when you need to translate a tabletop system into a computer game. In this case, however, it actually worked to my advantage, because it allowed me to look at the interface from the perspective of someone who knows nothing about the game. Essentially, my first task was to teach myself how things work. After all, no one is better at explaining how to use something, than someone who has had to figure it out themselves. When we were first given the task to design a character sheet interface for the game, it seemed simple. I thought we could just transfer the character sheet into digital form, remove any unnecessary elements, and then we’d be done! Of course, things were not that simple. The deeper I delved into the structure of the rules behind the tabletop system, the clearer it became to me that Pathfinder was not merely a game of rules, but of exceptions to the rules.

 

Information Design

 

The primary data input was the original character sheet, documentation from the game designers, the Core Rulebook of the tabletop system, and part of a layout that had already been designed for the inventory interface.

 

Obviously, it was impossible to simply recreate the paper version of the character sheet on screen. The computer version of the game featured a smaller list of skills, but also increased the number of conditions and effects that would need to be displayed. There were also some other characteristics included that were not normally displayed on the paper version of the sheet.

 

Rethinking how to translate a character sheet on paper into a digital version led to the idea of splitting the screen into three columns. Actually, it would be more accurate to say that it led to the idea of extending the inventory interface that already existed. The left third of the screen would become a “cross-cut” section of core information about the character. One of the key elements of this section was a portrait. Unlike in other modern RPGs, where the character’s main representation is a 3D model, we used a drawn portrait to identify the player as the hero of the game. We wanted to place an emphasis on the portrait for several reasons: first, we wished to follow in the footsteps of Baldur’s Gate, as a sort of “spiritual successor” to the game and the genre. Second, a drawn portrait can express a wide range of complex emotions. This makes it a better choice for capturing the essence of a character, and increases player immersion.

 

The rest of the section would answer the questions, “who?” and “what?” A chaotic good, half-orc barbarian, strong and handsome, but also stupid, hits with a hammer like this, is protected like that, etc. The remaining two sections would be filled with details about special skills, abilities and the history of the character. Using this interface design, all the character information would be grouped and distributed into sections across columns and pages, so that everything was partitioned logically.

Of course, this method didn’t turn out to be the most optimal way of partitioning this information, but it was a good starting point for further developing the layout.

On a separate note, I’d also like to draw attention to how class progression is visualized. Pathfinder is unique, because unlike many similar games within the genre, character development cannot be formalized into a static development map. A player can choose a different class each time they level up. They might decide to become a 5th level wizard and a 3rd level rogue, and these kinds of choices are impossible to predict. Additionally, each class has archetypes that change or modify abilities, and these changes don’t always happen at the same levels. Finally, the option for certain class abilities may only appear after the player has decided on a specific deity or origin story for their character.

To someone unfamiliar with the system, almost any class description looks like a set of random abilities that are entirely unrelated to one another. So when collecting information, the goal was to find the patterns behind class organization, and then formulate a method to simplify their presentation.

This resulted in several comparison tables for abilities and class characteristics. The tables were, perhaps, less helpful than the conclusions and observations we made throughout the process of compiling everything together. In the process of studying the development structure of different classes, all abilities were divided into groups:

  • Abilities that determine how a class functions, or that lead to the appearance of additional abilities, such as schools of magic, domains, backgrounds, or pets.

  • Abilities that are based on rank, where the action itself does not change, but increases in scale. (Strength, duration, etc.)

  • Abilities that share a common component. A paladin, for example, has auras that act in the same way, but give bonuses to completely different things.

  • Abilities that are defined by specifically chosen parameters. (A favored enemy, for example.)

  • Abilities that stand completely on their own, and are entirely unrelated to anything else.

The decision was made to visualize all the information that had already been collected, in order to assess its quantitative magnitude.

This visualization later became the basis for the character development pages in all of the interfaces. We wrote an algorithm for chaining abilities, but not everything could be automated, so we manually combined some of them to make it more visually pleasing.

In addition to these ability chains, classes also affect the ability to wear armor and control weapons of one type or another, and I wanted to somehow categorize this issue as well. In this case, though, the categories only included groups of weapons that had already been determined by the original creators of the tabletop game. Otherwise, each class had its own additions that defied categorization. Clerics are the most notable example of this, since they can wield any simple weapon, as well as the favored weapon of their deity. In the end, it was necessary to show the entire list of weapons, and mark off which of them were owned by the character.

After gathering all this information about the tabletop system, we began to work on the interface layouts for the game itself.

 

The Search for a Layout

Breaking down information into logical sections provides a good starting point for design, but it does not go far enough. It’s difficult to create something without limitations. Our brains rely on systems that help us categorize and understand our surrounding environment. Without a system, things become more difficult. In addition to the difficulty of presenting information in a logical manner, we were also limited by the three-column system from the pre-existing inventory interface. Now, our next step was to combine information from different sections into a cohesive visual presentation. From our perspective, my colleagues and I felt that some of these sections worked well together in the layouts, and some of them were less successful. The rejected versions have all been archived, so I had to go pull them specifically for this article.

Below are some of the early screen layout experiments. All of them try to squeeze the entire character sheet onto the screen at one time. Some sections, such as attack, defense, and skills, do not change much, but others, such as abilities and effects, vary significantly in their placement and presentation.

Moreover, I also greatly underestimated the number of ability options, and often tried to fit them into very small sections. At the same time, by the way, we were trying to find a way to place effects in the left third of the screen, so they would be visible on the inventory screen as well. One interesting moment occurred when discussing the effects section. Some of our colleagues with extensive knowledge of the rules, differentiated between when a character’s state is caused by spell effects (either positive or negative), and when it is caused by a condition (fatigued, blinded, etc.). This is written in the rules, and integrates well into the mechanics of the game. These were all viewable in the interface as icons, with text that changed the values of other stats. This can be seen directly within the game code, where the interface code leads to a common denominator of a mechanical nature.

Portraits from Baldur's Gate are used in the layouts.

 

After a series of experiments and attempts to fit everything on one screen, it became clear that the best approach would be to have multiple pages, and some of the information would have to be sacrificed by putting it under “one more click.”

If the entire progression tree, the character biography, and the equipped weapons section could be moved to another screen without causing a problem, I did not also want to give up the ability display section. Several other variations were tried, including a radial representation of a multi-class character. We scrapped that on the same day it was created, and never developed it, because it was poorly suited for single-class characters, and it had a number of technical limitations.

At this time, there were also experiments in grouping abilities. It was necessary to separate out “Feats,” which the character chooses regardless of class, from the “Special Abilities,” which are unique to each class. Plus, there were also “Traits,” which tabletop players use to build a character background, and develop a storyline for more immersive role-play. In our case, however, these were simply used to enhance certain characteristics. We were also dealing with a number of characteristics that were not always useful in relation to a particular character class. For example, the size of a Base Attack Bonus (BAB) doesn’t really matter to a wizard who’s throwing fireballs everywhere. Still, the content in some sections was beginning to look similar to what would eventually be the final layout.

Since this article is written retrospectively, I can now say that even with all the work we put into this process, it was impossible to take into account all the content variables that appeared during development. For example, the attack section was designed for only four values, and did not take into account the fact that some combinations of character classes and spells required six values. In addition, at the time of design, all the participants were confident the layout would not move after the artwork. But this also turned out to be false. Games are difficult to plan in advance, they are living processes of constant creativity, development, and change. There are safe, predictable interface options that might avoid these problems, but unfortunately, the end product often resembles an Excel spreadsheet, faceless and emotionless. I wanted to avoid this as much as possible. In the end, there was an interface problem with the German version of the text. The words ran together in the header description for Two-Weapon Fighting, and even adjusting the layout to be more responsive and changing the font size couldn’t solve the problem. The lesson here is this: when the product is almost finished, it is worth taking a step back and looking at the decisions that have been made, because there’s a possibility they should be changed. The design might need to be refactored.

But we would learn this lesson later. After phase one of the search for layouts, I assembled the first design document that could be presented to my colleagues for discussion. There were groups of abilities, and large sections with selected classes and spell tables. We added a chain about spellbook development, and some previously included elements were completely abolished.

 

Finalizing the Design

Character icons from League of Legends are used in the layouts.

 

Discussions in our team are always a long process, weighed down by numerous clashes of interests and opinions. I don’t remember a single meeting that took less than three hours. Some believed it was most important to provide the maximum possible amount of mechanical information to players, and others felt that story immersion and overall atmosphere should be prioritized above mechanics. More often than not, our discussions were the only way to break through this deadlock of opinion, since exchanging views often sparked new ideas. Everyone approved of the character biography page and the class development tree. However, the decision was made to remove the spell table, information about abilities, and other mechanical characteristics from the main page. We also decided to make the plot of the game the center of the interface. For the main character, this became the “Wheel of Alignment,” and for the companions, we came up with a set of story cards. These represented key events experienced by that character, and would be made available to the player as they progressed. Effects were also removed from the left third of the screen, but received enough space to be displayed along with their names and durations. In this way, the screen became less cluttered, and a greater focus was placed on story immersion and role-play rather than mechanical elements.

Abilities were also moved to a separate page. This made it possible to not only use icons, but also the full names of the abilities as well. Subsequently, this turned out to be very important, because in the end, we did not have enough time and resources to draw new icons for each ability. In addition, it is a difficult task to convey the meaning of each ability in an icon, and it can be even harder for the player to decipher them all. But again, in retrospect, I should note that I grossly underestimated the number of abilities in the “Special Abilities” section, and overestimated their number in the “Feats” section. This resulted in a very unbalanced layout on this screen, which we fortunately have the opportunity to fix in the upcoming game, Pathfinder: Wrath of the Righteous.

All the information about a character’s combat abilities was also put on a different page. Again, this turned out to be a good decision, because by the end of development, the number of these characteristics almost tripled.

The above designs were created immediately after that meeting. Next, I’ll skip past a few smaller changes that were made, and show the final version. In it, some elements were adjusted, and certain illustrations were selected, taking into account the budget and general style.

 

Artistic Design

This design was already assembled in the alpha version of the game. It is worth making a brief, but important digression here. Instead of the more typical divisions that are often made between designers and programmers, our UI team is divided into developers (the designer, the layout designer, and programmer), and artists. This allows us to distinguish between the technical and immersive parts of the interface. At the time the design was finished, we did not yet have an artist, and we were confident that the interfaces would be dark, with some kind of wood and leather background and bronze colored buttons. But time passed, and when we finally found a person who shared our vision, and we began to make artistic decisions, we realized that we actually did not want leather and wood at all. The colors of our interfaces were inverted and turned into paper. Now it looked like a book of adventures, written by one of the characters. But the artistic elements introduced additional conditions and restrictions, which ultimately led to further changes in the layouts. It also revealed some problems, such as the issue with Two-Weapon Fighting that I described previously. Overall though, I think the interfaces benefited significantly from these changes. Thus, the game began to come together as a whole, and the interfaces were no longer just a necessary requirement, but added to the quality of the game itself.

To conclude my story about this part of interface creation for the PC, I have to say that unfortunately, due to limited resources, not all of these design decisions were included in the release. Some of them need further revision, and we are doing that now as part of our work on a new project. Others have been scrapped altogether, and set aside. But the life cycle of interface design in Pathfinder: Kingmaker did not end there. We had to port to console.

 

Porting to Console

A little less than a year passed from the time the game was released, to the moment we began the process of porting the game to console. During this time, we managed to add numerous details and complete several features, but we were also disappointed in several ways. We received a lot of feedback from players, and identified problems we wanted to fix. Unfortunately, these problems mostly involved code, and in many cases, it was too closely intertwined with the mechanics to make any substantial changes. As we approached the challenge of console interfaces, we already had some knowledge of the subject, but it was also our first experience developing interfaces for a console. We carefully analyzed similar projects and identified what we did and didn’t like, we read the technical requirements, and had several consultations with other design teams that had more experience. Then we started the development process.

A console has several features that are different from a PC:

  1. Consoles are played on the TV, often by someone sitting on a couch. This means that the text size needs to be larger throughout the game.

  2. According to TRC, it is necessary to have a 5% save-zone, in which important content should not be located.

  3. Using a cursor can be tricky on a console. Therefore, it is not possible to have tooltips that provide longer descriptions of rules and abilities.

When we took our first “pass” at the character screens, an attempt was made to copy over the arrangement and layout of the various elements from the PC interface.

However, that created some problems that were difficult to resolve. Questions arose over the issue of allocation. For example, if “Ability Scores” can be highlighted on the main screen, should it also have that function on a different screen?

Where should the description of the selected item be displayed? How can a player scroll through the description without going to a new nesting level? Other non-intuitive cases about console controls appeared as well. For example, if a player selected the element furthest to the right with the left stick of the controller, then the description was displayed on the left, but could only be scrolled through using the right stick of the controller.

Based on these problems, as well as the assumption that console gamers are not the target audience for the Pathfinder tabletop system, we concluded that the presentation of information and the screen structure should be simplified.

After trying to copy over the PC version, the following structure, as seen in the image below, was proposed as a basic template for the fullscreen console interfaces.

Static Decsription - Focus Part - Contextual Description

Console Hints

 

On the left side, we decided to place static information that would not lead to other actions.

On the right side, we placed the contextual description of whatever was currently selected, allowing it to function like a tooltip in the PC version of the interface. The right stick of the controller could then be used to scroll through this information.

We placed all focusing elements (buttons, selectors, rules, descriptive characteristics) in the center, and the controller’s D-pad or left stick could be used to move between them. In the case of a large block of text, we made the scrollbar always position itself so that the correct element is visible when selected. This eliminates the need for separate scroll control when reading through the middle of a paragraph.

We used the R1 and L1 bumpers on the controller to move between the different screens of the character sheet, and switching between characters utilized the radial menu of the R2 right trigger.

As a result of all these changes, the interface was split into seven screens.

This was the first interface we ported to the console, and it went through very few changes before release. However, we did have to adjust the lower section of the screen, which had previously been reserved for hints. The lack of a complete list of screens turned out to be very inconvenient. While playing, we could never navigate to the one we wanted. The fact that companions have a page of their own stories, while the main character does not, only added to this navigational inconvenience. So the hint area eventually turned into a menu, which could be navigated using the bumpers on the controllers.

Another interesting thing was navigating character progression. Unlike a regular grid, where you can only move horizontally or vertically, there may be situations where it is difficult to estimate exactly where to move when pressing “up.” For example, say there are two elements higher than the currently selected element. One of them is two lines higher, while the other is only one line higher, but also 15° to the right. Which element should be selected? Should it be the one that is closer, or the one that lies in the direction of the controller stick’s motion vector? This same situation could also occur when moving diagonally. To solve this problem, we wrote a code for navigation that takes into account the direction and distance to the next element. The priority of these parameters is determined by the coefficients, which are selected manually using tactile sensations.

We were pleased with the final result of our work on this interface. Of course, it didn’t feel like we kept such a heavy focus on the plot, like we did in the PC version. But the interface was convenient. It had ease of navigation and readability, both of which are important when playing two meters away from the TV. In addition, the interface had a full-scale portrait, which in my opinion, added significantly to game immersion and the overall atmosphere.

 

Conclusion

 

It’s not for me to judge whether or not this was the best way to design these interfaces. It’s always possible to do things better, or in a different way. We are always open to criticism and suggestions, and we are always asking ourselves whether or not we’ve chosen the right solution.

A game is not just a factory, where some random person makes parts for a company and goes home at the end of the day. This game is a collection of the creative efforts of individual developers, people for whom this work becomes an integral part of their life, just as it is for the players.

Thanks to everyone who took part in working on the character sheet:

 

Mikhail Rotfort - Lead UI

Vasily Levinov - UI Artist

Vasily Boldyrev - Programmer

Nikita Velikovsky - Programmer

Maxim Savenkov - Programmer

Oksana Merger - UI Programmer

Alexey Gusev - QA Engineer

Alexander Mishulin - Creative Director

Victor Surkov - Art Director

Oleg Shpilchevsky - Head of Owlcat Games

 

Author: Pavel Turchin - UI Developer

Share this post:
Thank you!
Check your inbox for a confirmation email, and confirm your subscription.
VOUS VOULEZ EN SAVOIR PLUS SUR NOS JEUX ?
Abonnez-vous pour tout connaître de nos actualités
Saisissez votre adresse e-mail
En cliquant sur ce lien, vos fournissez des données personnelles à Owlcat Games. Veuillez consulter notre Charte de confidentialité pour de plus amples informations.
© Owlcat Games, 2022. All Rights Reserved.
All Titles, Content, Brand Names, Trademarks, Logos, Artwork, And Associated Imagery Are Trademarks And/Or Copyright Material Of Their Respective Owners.