For the impatient (or those who don’t care about technical details) you can click here for the visualizer. If you want to see what the tool looks like, here’s a short video that demos it:
Where do you get the card data?
The card data are located in the game folder under the files card* files. The most important one is the file called: cardxml0.unity3d which contains the cards meta-data in a pseudo XML format where an <entity> block contains the data for a single card. The other files contain the textures/images for the cards. For example, here’s what the entity Holy Smite looks like:
Over time, parsing this file has become a little tricker. That’s because Hearthstone moved from having a single entry per card (with all the translations) to one entry per translation sometime after the Nax release. Blizzard also removed the string that previously described what each tag means. Now only the enumID appears. Nevertheless, this file contains all the information needed. It just takes a bit more time to write the correct parser :)
What libraries does the tool use?
From there, I simply ended up using the same libraries that Ricardo Cabello used for his periodic elements demo as they were very easy to use. Since Three.js doesn’t do animation natively, the viewer uses Tween.js to manage the transitions from point A to point B. To deal with user controls including pan, zoom, pinch, and rotate, the library of choice is called TrackballControls.
The first gotcha is: How do you paint the cards in your engine? The standard approach would be to create textures based on the cards. This allows for neat deformations but it is quite involving and I didn’t get good performance (probably because I did it wrong). It turns out that there is a simpler and more elegant way to display the cards: describe them as HTML objects and use a nifty little library called CSS3DRenderer to do the magic of importing them as 3D objects.
The second challenge was a usability one. As I added more and more filtering functions -- like the ability to filter by card race or hero class -- the left menu become longer and longer. Eventually it no longer fit on the screen. This was especially acute on tablet and small screens.
Last, but not least, it was more tedious than I anticipated to find the right set of parameters for the field of depth, the space between cards for the various layout settings, and the animation timing. All-in-all, ensuring that the cards remained visible and look nice regardless of how many are displayed was a tremendous time sink.
Please let me know what you think of this tool and how you use it! If you find this post and my tool useful, please share it on your favorite social network by clicking one of the links below. I would love to have many fellow Hearthstone players use it. Speaking of this, if you’re a legend-level player and have time to coach me, drop me a message! I always love to learn more :)