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

More Paizo Blog.
Tags: Obsidian Entertainment Pathfinder Adventure Card Game Pathfinder Adventures
Sovereign Court

AD4 hype!


Love all the references to deck 4!

Silver Crusade

Great post, love the insight into the whole process.

Also appreciated giving the choice of UI to the player, i know the extra work it takes to maintain different, not adaptive UIs, particularly for a small team in a project with so many interactions.

Just curious why this wasn't cross-posted to the devs blog, it belongs there as much as here.


1 person marked this as a favorite.
Pathfinder Card Game Subscriber

Just wanted to pint out, Longtooth seems to have taken one Stealth: Dexterity + 83 lesson from Merisiel too many...

Alternatively, he has maxed his Disguise and can now pass on as a perfectly serviceable Ghoul...

Paizo Employee Chief Technical Officer

Longshot11 wrote:

Just wanted to pint out, Longtooth seems to have taken one Stealth: Dexterity + 83 lesson from Merisiel too many...

Alternatively, he has maxed his Disguise and can now pass on as a perfectly serviceable Ghoul...

Yeah, the wrong image got linked. Fixed!


Just curious to know, how long did the whole process took?

Lone Shark Games

3 people marked this as a favorite.

If you do not click the words Pathfinder Adventures mobile release trailer, I must assume that you hate fun.


I might agree... but actually, I'm waiting on the mentioned PC release. XD


Mike Selinker wrote:
If you do not click the words Pathfinder Adventures mobile release trailer, I must assume that you hate fun.

Ah, now that takes me back. :)


That is awesome.


I checked a few weeks ago for my tablet and it wasn't available yet.

I can only hope that when it gets finished for PC it might work on a Surface RT.


I'm still wondering if this will ever be released for amazon tablets. I'm playing on the phone right now, and PC would be higher priority than amazon tablets, but I wonder why amazon is left out.

Grand Lodge

Pathfinder Card Game, Class Deck Subscriber

Amazon tablets can only receive apps from the Amazon App Store. Apparently, there is no agreement between Obsidian and Amazon to release that app on the Amazon App Store. I don't know why (and there's probably NDAs splattered all over said reason(s)).


James McKendrew wrote:
Amazon tablets can only receive apps from the Amazon App Store. Apparently, there is no agreement between Obsidian and Amazon to release that app on the Amazon App Store. I don't know why (and there's probably NDAs splattered all over said reason(s)).

Yeah, that is my impression as well, I just would like to have some closure in the form of some officiel statement regarding the matter.

Obsidian Entertainment

1 person marked this as a favorite.

Getting into Amazon's store is on our list of things to do and we probably will do it. I'm afraid I can't be any more specific than that.


Thanks, it's good to know you're still having plans for that!

Scarab Sages

Pathfinder Card Game Subscriber

That was probably the best commercial I've seen for an electronic game since 1989.


1 person marked this as a favorite.

OMG favorite blog post ever. Why? André Nguyen showed his UX mockups!!! As a UX designer I wanted to suddenly see all of em. All the wireframes, all the paper prototypes. To see Nguyen's and Selinker's UX work in their notebooks would be a day full of fanboi.

Would love to see more UX work showing up in blog posts, as games are ultimate UX challenges because unlike other software, there is no reason to interact if you aren't having an enjoyable experience!


1 person marked this as a favorite.
Mike Selinker wrote:
If you do not click the words Pathfinder Adventures mobile release trailer, I must assume that you hate fun.

I only recently discovered that this video might contain a couple of hidden messages about how to get a few treasure cards and dice skins for free. See this Obsidian post for info.


I see what you/they did there, thanks.


Pathfinder Card Game Subscriber
Hawkmoon269 wrote:
Mike Selinker wrote:
If you do not click the words Pathfinder Adventures mobile release trailer, I must assume that you hate fun.
I only recently discovered that this video might contain a couple of hidden messages about how to get a few treasure cards and dice skins for free. See this Obsidian post for info.

Failed perception roll :(

I have looked at the video a couple of times and cant work it out
Can someone pm me the trick?
thanks

Succeeded on reroll :)

Silver Crusade RPG Superstar 2014 Top 16

Thanks Hawk, totally had missed that, and now I have some dice and a card that i didn't have before! :-D


I think that ad's pretty lame; I must hate fun. (Yes, they were just as lame when I was a kid too. :)

At least I have some free stuff now, though given that they had to make a blog post bringing more attention to it I wonder how many people tried the codes beforehand (and had to search for where to redeem them, as the game itself certainly doesn't help you do so).

In any case, it'll be neat to see if I can ever get the app to stay logged in long enough to try them. :(


Pathfinder Card Game, Class Deck Subscriber
Hawkmoon269 wrote:
get a few treasure cards and dice skins for free.

I found one of each - is there more?


1 person marked this as a favorite.

There are 2 codes in total that I know of. I don't want to give it away, but...

Clues:
Let Lem lead you to the first one. Then watch for the device in the video that you would use to obtain Lem's services.


Pathfinder Card Game, Class Deck Subscriber

That's what I thought! Thanks!


Pathfinder Card Game Subscriber

Thanks Hawkmoon, I had missed the second one

Community / Forums / Pathfinder / Pathfinder Adventure Card Game / General Discussion / Paizo Blog: Pathfinder Adventures--The Tiniest Table All Messageboards

Want to post a reply? Sign in.