Blizzard had a panel on the Hearthstone UI at GDC where they showed the evolution of Hearthstone's UI, show far more mockups and design stages than we've seen in the past, including a shot of mobile UIs and it was followed with a Q&A session where deck slots were said to be actively on their radar! Check out the video to watch the whole thing or see below for the mobile UI screenshots and a complete Q&A write-up!

cropped.jpg
Q: Does Blizzard plan on releasing UI tools for Hearthstone?
A: Currently no plans for modability, we're trying to make a really tight experience for players that's really highly designed.

Q: How long did it take to find the seed, and how many people were working on the project up until that time?
A: I think it was less than 10, and it probably took maybe a year or so.

Q: Along the lines of how UI design was influencing game design, I wonder if there's been Hearthstone UI design influencing WoW design, like something along the lines of garrisons. Are you cross-polinating?
A: We do have a UI group that meets together, but there is no explicit cross-polination, but I think people in the company are starting to look at this style and saying that maybe there's something there that we can bring in to other games.

Q: You mentioned Naxxramas where you had to change up the UI to add the keys and rewards. Were there any other points where things really change the way you had to approach it because of some element or was it more in the direction of where you could change the Priest hero power because the UI needed it to change?
A: There are examples of both. I can't think of any off the top of my head, but definitely there were situations where we just had to deal with a mechanic.

Q: Do you need to make any sacrifices in porting the UI effects to mobile?
A: This is more of a question for engineers. We don't intentionally sacrifice any effect. We design the coolest effects that we can make, and then smart guys figure out how to optimize it.

Q: Successful card games usually create a lot of opportunities for illustrators. Where does the Hearthstone team find all their illustrations for their cards? Are they from the Blizzard library or are they hiring new commissions?
A: It's actually all of those things. We have a pool of existing art which we use, and then if there's things not there then we'll commission either external artists or we have internal artists that will handle those things.

Q: When you guys were early on in the process did you make any argument about the validity of UI design and "hey, this is as important as the game design"?
A: I was very fortunate in that I had worked with a design director for a number of years on World of Warcraft and that experience made us really think hard about UI's role in game development. And so I think we came to an agreement together on that. I did not have to sell somebody on this idea that that's the case. I think you can look at any kind of board-game type translation of that -- you can make that argument, like, "this game is UI", you know, it's important. And hopefully maybe Hearthstone can be an example of that, I don't know. I would like to think that could be the case.

Q: During the creation and design of the UI how much were you locked down with the gameplay design?
A: We were locked down in the fact that it was going to be a card game. But game and UI design were progressing at the same time and kind of informing each other of what this could be. Once we started getting in to this physical space then the design started to think differently about how things work.

Q: How much time do you expect the creation of the Hearthstone UI for phones to take and do you have any planned release date? This quarter, next quarter?
A: Umm... Soon? Next couple months is what I can say. It's pretty far along, and it's looking pretty awesome.

Q: You mentioned you can't do anything during the other player's turn. I wonder if this was an early game design decision or like you explained before also something that was something driven by the UI design.
A: It was semi-UI, but it was really the designers who didn't like that flow of play. Because you have to pay attention a lot. So it just felt like it wasn't a good flow for us. Once we switched to the idea of these secrets that maybe could trigger during their play, something like that, it just made it like "when it's my turn it's my turn. I'm trying to solve a single-player puzzle," and I think that is kind of the appeal to the game.

Q: Will we get more deck slots?
A: [Laughs] Took you this long to get this question? [Questioner: I had to ask it!] We know it's an issue and we are looking at it. That's not like a hand-wavey answer, it's really something that's on our radar.

Jon Briggs Talks Golden Cards

Earlier today, John Briggs wrote an article talking about Hearthstone's Golden cards. He describes the creation of some popular card animations such as a Golden Piloted Shredder or Golden Dr. Boom and his Boom Bots and talked about some failed attempts at animating golden cards.
Originally posted by Blizzard (View Original)Collapse

Hearthside Chat - Golden Cards with Jon Briggs

If you’re looking to impress your next Hearthstone opponent with class and style, add some golden cards to your collection! Golden cards are Hearthstone’s premiere collectable, thanks to their unique animations and gilded borders.  Whether you unearth these rare golden cards from packs or craft your favorites with hard-earned Arcane Dust, these glittering cards are coveted and collected by many, each telling a unique story.  

The creation, conceptualization, and integration of golden cards came from a group of talented developers on the Hearthstone Team—Becca Abel, Kyle Harrison, and Jon Briggs. In today’s Hearthside Chat, we’ve gathered around the table with Jon Briggs to chat about how these beauties are brought to life.


Heh, greetings!  My name is Jon Briggs and I’ve been working on Hearthstone since 2011. I started out as the game’s first assistant project lead for its quality assurance team before taking on the initial prototyping and creation of the game’s golden cards. I was responsible for the animation of the majority of the golden cards for Goblins vs Gnomes. 

Creating All That Glitters

The creation of a golden card is a two-part process. First, I mask the art in Adobe Photoshop software and then create the supplemental visual effects on the card later. I use the masks I created to “assign” where an effect shows up on the golden card. 

GoldenCards_HS_PilotedShredder_CK_500x333.jpg

This is the mask for Piloted Shredder. The blue indicates where the spinning blade of the shredder would spin, the gray circle is where the mechanical arm would shift up and down, the red denotes where I wanted the debris effect to be shooting off the blade, and the green is where I wanted the smoke and distortion to appear.

Every golden card can have up to four layers. That means I can only apply and create up to four effects per card.  Because of this, it’s critical to figure out how to get the most value from each layer in order to convey the overall vision for each card. For example, Piloted Shredder’s smokestack effect doubled as the burning fire in the eyes and mouth of the shredder.

DANGER: MOVING PARTS

GoldenCards_HS_GoblinAutoBarber_CK_500x333.jpg

When I work on golden animations for cards, I have to “paint out” aspects of the base art and animate it independently. The technology for animating certain aspects of the art has improved significantly since Hearthstone’s release. When we’re making animations for cards like Goblin Auto-Barber, we have to make sure it looks awesome and fun and works for all the platforms we support. We have to ensure you can have a board full of golden minions, a hand full of golden cards, two golden hero portraits and hero powers, and have everything still work great.

A Veritable Treasure Trove!

There were over 120 cards in Goblins vs Gnomes, and that’s not counting “token” minions like Boom Bots. Every card and token minion in game required a golden version. Over the two months it took to create the golden cards for Goblins vs Gnomes, I averaged around 3-4 cards a day.  The time it took to create each card depended on if the card was going to have an animated aspect to it.

DunemaulShaman_HS_GIF_CK_165x207.gifBefore packing up and heading home each night, I got in the habit of choosing the 3-4 cards I’d tackle the next day. With some cards, I was unsure of what I would ultimately do to make them look suitably epic, so they would get passed over until only one card was left. For the record, the honor of “last golden card” for Goblins vs Gnomes went to Dunemaul Shaman. Ironically, he ended up turning out extra-awesome! The drenching storm pummeling him, the steam rising up from his body, and the water pooling at his feet really make for a cool animation.

What Gets the 24 Karat Treatment?

AntiqueHealBot_HS_GIF_CK_165x207.gifDeciding when to use animation for golden Goblins vs Gnomes cards was tricky. Ideally, we want to animate the card art in a way that adds to the visual experience, rather than become the focal point. Small animations like Flying Machine’s spinning turbine, Iron Juggernaut’s saw blade, and Antique Healbot’s swinging health potion help accomplish this.

One of the biggest challenges we face when creating any golden card for Hearthstone is figuring out how to make a static piece of art look cool. If it doesn’t feature a flashy effect or some other attribute that can be brought to life, you have to make up interesting effects for it. 

KingOfBeasts_HS_GIF_CK_165x207.gifKing of Beasts is a great example of this. King of Beasts depicts a lion sitting calmly on the ground. How could I make a sitting lion interesting? I went in a more ambient direction with King of Beasts and added a pulsing glow from the torches behind him, a royal waving mane, and some ground dust and straw to finish the piece off.

With golden cards, we always try to make sure that they tell a story. It can be as simple as visually tying the card’s functionality better to the art, or perhaps taking the base art and breathing life into what could be happening next, as if the art were alive.

Felcannon_HS_GIF_CK_165x207.gifFel Cannon is a good example of tying the functionality to the art. Fel Cannon’s motorized movement is identical to the Fel Cannon model in World of Warcraft. Maintaining consistency from World of Warcraft to Hearthstone added to the card’s overall feeling of authenticity. 

Gahzrilla_HS_GIF_CK_178x207.gifWhile it’s generally important to stick to the Warcraft lore when making golden cards, sometimes we have to make some alterations in order to create a solid looking effect. For instance, when players encounter Gahz’rilla in World of Warcraft, he has blue ice breath, but the blue didn’t read very well against the sky and the overall warm tones of the art. I decided instead to switch from the cool blue breath effect to a roaring orange fire breath effect and used the extra layers to kick up an awesome sandstorm around Gahz’rilla.

SneedsOldShredder_HS_GIF_CK_178x207.gifSometimes we just have fun with the card effects;  Sneed’s Old Shredder being a  good example of us adding extra Hearthstone flavor to a card. Game Director Eric Dodds and Production Director Jason Chayes wanted to add lasers to Sneed’s Old Shredder. Totally awesome. Who doesn’t want a shredder with eye lasers?

It was especially fun to create golden versions of the cards that produce token minions when they’re summoned. Because Dr. Boom’s Boom Bot minions always enter play to the left and right of Dr. Boom, we wanted to ensure that some aspects of the golden cards tied them all together. We added the same lightning in Dr. Boom’s golden version to the Boom Bots as well.  

BoomBot_HS_GIF_CK_165x207.gifDrBoom_HS_GIF_CK_178x207.gifBoomBot_HS_GIF_CK_165x207.gif

Curses, “Foiled” Again!

Not everything worked when creating  golden Goblins vs Gnomes cards. When creating golden effects, we had to be aware of the potential gameplay implications that could arise from our design choices. While it would make sense to have cool smoke effects on Rogue cards, too much animated smoke could easily be confused with the animated Stealth effect. The same applied to cards with the Enrage keyword. Red is commonly a color associated with rage, but too much red added to the golden version of a card with Enrage implied that it was enraged when it actually wasn’t!

We could get a little carried away with certain effects at times. We were guilty of overdoing the drool on some cards, which we affectionately called “drool-tech” around the office. I also caught a little flak thanks to my fondness for leaves with the Classic set’s golden Rogue cards.

NobleSacrifice_HS_GIF_CK_250x330.gifSome effects are funny in concept, but don’t quite work out in practice. Noble Sacrifice once had the animated minion leaping from the left side of the minion portrait to the right in an attempt to make it look like it was jumping in front of the oncoming spell. Unfortunately, the minion just kept going out of frame forever, and left an empty minion portrait on the board. That was weird when the Noble Sacrifice’s minion survived the spell.  

Shadowboxer-Fast_HS_GIF_CK_165x207.gifSome animations seem cool on paper, but end up being way too fast and distracting when they were in play. For instance, at one time, Shadowboxer and Goblin Auto-Barber were moving about 400% faster than they are now!

Worth its Weight

The mechs in Goblins vs Gnomes provided us with an abundance of opportunities to animate moving gears, saws, and other mechanized parts. We’ve come a long way with golden cards in Hearthstone, and we continuing to improve on the technology as time goes on.

Working on golden cards wouldn’t be possible without the incredible art created by the talented artists we feature in Hearthstone. I hope you’ve enjoyed this look into how golden cards are made and the design choices behind them, and I hope they’re just as fun to for you to collect as they were to make!