Pathfinder Adventures—The Tiniest Table

Tuesday, October 4, 2016

Hi! I'm André Nguyen, Art and UI Lead on Pathfinder Adventures. Our User Interface ("UI") has had quite a trip since we started. Let's take a trip down Memory Lane...

Simple Beginnings

As development on Obsidian's South Park: The Stick of Truth was winding down, and before Obsidian and Paizo greenlit Pathfinder Adventures, I was asked to mock up what a digital version of the Pathfinder Adventure Card Game might look like and how it would play. I based it on how I played the physical card game, and how others (including Game Director Nathan Davis) played. I even checked photos and videos of other people playing. I created a playable Flash mockup for the owners here at Obsidian to show the game in action. Below you'll see some screen grabs of that mockup.

From the start of making a digital version, we wanted the locations and Sandpoint to feel like they had a place, so the map was a key part of the design. (Don't be alarmed by the giant hand—it was just simulating a hand using a touch screen because we had swipes and taps, and it would follow the mouse cursor in the demo.)

In the mockup, we had the locations show up as cards, just like the physical game. You could swipe left and right to go through them one by one. (This feature made it into early versions of the game before getting cut... but we're getting ahead of ourselves.) In the mockup, we had the player tapping a location card to enter that location.

Another thing we wanted from the start was to feel like you were gathering dice. You know that feeling in the physical game, when you gather the dice before you and think, "Is this good enough, or should I add a blessing, or get some help... ?" Well, we wanted you to have that feeling in the digital game. Every card you play that adds dice would add them on screen. When you're happy, you swipe over them to roll!

The Blue Period

Not only was the roll a success, but the mockup video was approved and we got the go-ahead to make the game. Or at least, we got the go-ahead for Nathan, myself, and one programmer—Kevin Smith—to make a prototype. Our prototype had a title screen and simple character selection, then jumped right into the game, with no real scenario selection—just straight into Brigandoom! It's clear I was working the design of the card back into the UI. We'll call this Pathfinder Adventures' "blue period." (Note that most of the screenshots we have were taken as bug reports, so they have 1 or more... er, "oddities" in them.)

Redder Pastures

You can see that we got rid of the location card carousel from the mockup and went with a fixed box on the left. Even in this early UI, most elements had found their home. A few months passed, and we had finished the prototype. We got the go-ahead to hire an artist because my painting skills are just TOO GOOD. Lindsey Laney joined the team, and we decided to go with a look a little like the Pathfinder Adventure Card Game logo: The reds, the tans, the filigree!

If you're unfamiliar, "filigree" is that fancy ornamental stuff around the UI edges. It breaks up the frame a lot and since the logo has that, it fits Pathfinder. The look of our game was inspired by the art Wayne Reynolds did for Pathfinder: his color, textures, and numerous buckles. Through a few more updates, we refined the UI a lot. It necessarily became more complex because the card game allows so many things.

Examining the Process

Now let's take a brief detour into process. I mock up most UI designs first, then discuss them with the designers. I try to go over all the criteria for that design and offer a few variants. In this case, I was designing what we call the "Examine Tray" and I wanted to make it clear which cards were on the top or bottom of the location deck.

I then give it to an artist (I say that as if we ever had more than 1 or 2 artists) who makes it pretty.

Getting Long in the Tooth

And finally, the game reached its current state. I think the game is slightly more complex than originally thought. Hey, is that a dragon?

It IS a dragon: Longtooth!

So that's it for the evolution of the tablet UI. For phones, we had to make some changes for usability and to receive approval from Apple and Google. Phones screens range in size from tiny to almost tablet-sized. We took a few things off the screen to declutter, and to make things more usable (buttons) and legible (text). For personal preference, we're also adding in a toggle letting you choose which UI to use. To demonstrate, here's Lem on a phone with a bunch of fancy dice!

So that's where we are. What's next? Fortress of the Stone Giants is out now for iOS and Android tablets and phones! If you want a taste of what Deck 4 has in store, check out Nathan's blog on the Obsidian forums! And in case you missed it, check out the Pathfinder Adventures mobile release trailer!

André Nguyen
Art and UI Lead—Pathfinder Adventures, Obsidian Entertainment
@gelatin