October 4, 2012

Announcing the Diablo 3 Mobile Companion By Dave Ackerman

d3-featured

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:

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.

Diablo 3 Companion Tabs

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.

D3 List

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.

D3 Skills

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.

Available on the iOS App Store and Google Play

D3 Mobile Companion is now available, for free, on the iOS App Store and Google Play.

Diablo 3 Companion - on the app store

Source Code

We have open sourced our iOS and Android versions of Diablo 3 Mobile Companion under the MIT license.

Diablo 3 Mobile Companion GitHub repo

Authors

  • Stan Bershadskiy (@stan229)
  • Dave Ackerman (@dmackerman)
  • Special Thanks to: Jay, Grgur and Richard

Modus Create is a product development, training, and services company based out of Reston VA. We help clients realize their product vision, and build in-house development capabilities.

Interested in working with us, or have a question? Feel free to contact us anytime, or call us directly at 1-855-663-8727.