Announcing the Diablo3 Mobile Companion

Diablo 3 is Blizzard’s latest disruptor of productivity, social lives, and self preservation. It broke the record for fastest selling PC game (more than 3.5m over 24hours), and for very good reason. In simplest terms, it is an action RPG. The player creates a character and overtime the character progresses through the story, gaining levels and acquiring items to make him/her more powerful.

Blizzard has recently released an API for accessing player data and thus as huge fans of the game we went ahead and built a Companion app to the game.

Features

View your heros Attributes, Items and Skills
Add friends, and view their heroes.
See attribute/stat differences since last login for both you and your friends.
Read Blizzard’s Latest Diablo 3 News
See server and auction house status

Technology

Sencha Touch 2.0.1
Apache Cordova 2.0.0 with the ChildBrowser Plugin

Development

Most of the app was developed and styled over the course of a week while we had some free time to spare. Aside from the Carousel, TitleBar, MessageBox, Panel we leveraged all custom views and styling.

Primary communication with Blizzard APIs was done over JsonP. For certain functionality we had to extend Sencha’s JsonP data class to suite our needs. We also leverage Cordova’s External Host Whitelist to support News and Server Status.

As with most projects we were able to develop some new tricks as seen by our recent blog posts:

Opening All URLs With Cordova’s ChildBrowser Plugin
Tinting Your Status Bar in iOS6 and Cordova
More development-specific posts are coming.

Design & Styling

Overall design for the app is following fairy standard mobile design paradigms. We use the bottom tab bar for main high level sections, and carousels to quickly run through your heroes and their associated data.

We switch the “Heroes” text to the currently selected hero’s name to give the user context if they switch away from the tab.

The Diablo API gives us some very good looking icon assets for items and skills. Unfortunately, these assets are not retina optimized (are you listening Blizzard?), but overall the app came together great. The majority of the app is custom Sencha Touch XTemplates.

We implemented a custom list by using webkit-box layout versus floats. Top toolbars remain static to keep the user acclimated to what data they are looking at.

To truly give the app the Diablo look and feel, we precisely copied the colors used in-game for items, skills, as well as general text throughout the application.

The OSX Color Picker became our best friend in determining which colors to used for Diablo related elements. Doing this really keeps the app looking consistent to the game.