As professional nerds, many of us at 352 love online role-playing games. In most of these games, you play as an adventurer who grows and learns new skills as you complete quests. These skills – usually centered around swordplay or spellcasting – are often represented as a “tree”, in which learning a basic skill unlocks the option to learn more advanced skills. Punch enough wolves or shoot enough lightning bolts, and soon you’ll be an unstoppable hero.
Normally, the resulting character is an epic warrior or legendary wizard. But as web developers, we wondered what our skill tree might look like. As a side-quest on our journey to become epic web developers, we created Dungeons and Developers – an education skill tree to help both novice and expert developers grow their skills to heroic levels.
We started with a flurry of ideas and grand ambitions, but like with every skill tree, we had to get organized and pick a path to build from.We started a shared spreadsheet to catalog all the skills we wanted to represent, making sure to denote which skills are dependent on others. After grouping the skills into themes such as “user experience design” and “programming”, we were able to start sketching the tree.
First, we created the pieces of the tree – icons, labels and arrows. Even though we were only in the concept stage, everything in the sketch needed to fit together, and within the dimensions of a computer screen. Once we had a rough black and white outline, we started on the artwork and content. Half of our team began writing descriptions of each skill and collecting links from around the web. The other half of the team worked on the interface design and the icon artwork.
All of the icons are original artwork from our QA guys – Andrew and Chris – produced in only a few days. First, Andrew constructed a 3D model of each object, set the lighting, and rendered it to a flat image.
Then, Chris would load the model on his tablet and digitally paint it using various textures and effects. The resulting icons have a nice artistic touch with a real “weight” to the objects as well.
While our QA guys produced our awesome icons, the rest of the team focused on developing the skill tree interface. We highlighted each skill path with a nice gold trim on the arrows and skill containers, along with a glow to indicate connected skills available at a certain level.
We used a programming framework called Knockout.js to keep track of all the complex rules and relationships between skills and to tie them together with the elements on the screen. Once the interface was complete, we loaded in the content and artwork, and added some subtle animation polish.
And like every good game – we even added a savepoint. Once you’ve chosen your skills, you can bookmark your skill tree by providing a unique URL for every choice you make.
As a finishing touch, we even added a “God Mode” for people who just can’t live without 100 percent completion. You’ll just have to figure out how to unlock it! (Hint: go old school.)