ACROnode. An award-winning Node.js-powered multiplayer word game.
September 2011
ACROnode was team Rochester.js's entry in the 2011 Node Knockout competition. It was a real-time multiplayer backronym word game powered by Node.js, and was playable in modern web browsers.
Loosely based on the original Acrophobia IRC game, players are presented a random acronym and are challenged to create "backronyms" - for example, when presented with NBAM you might play "Narwhal Bacons At Midnight". Players score each other’s backronyms and are awarded points based on the number of votes, for being the first to submit your backronym, etc.
As lead designer for the project, I presented the original game concept to the team, mocked up and prototyped game screens, and shaped the game's overall design aesthetic.
Early gameplay wireframes
Starting with a basic grid layout, I skeched out the core game features and iterated toward low-fidelity mockups:
Initial sketch/wireframe of the core gameplay screen
The main gameplay mockup. Note the countdown timer and user input feedback.
With the basic look and feel and logo done, I handed off my design concepts to team member David Moffitt to develop further. David enhanced the logo with custom paths, and created an awesome weathered "boomerang" design element, based on the rainbow from the old Activision art:
The final logo
Our rainbow "boomerang" element. I think the nostalgia engendered by this element went a long way to helping us win the design prize.
Prototypes and final HTML/CSS
With the low-fidelity mockups complete, I moved on to real HTML & CSS prototypes. I used the Serve local development server to quickly build the prototypes. Making use of Haml, Sass and Compass, I took advantage of great features like Compass spriting, CSS3 animation, webfonts, and more. I also used my own "flippy" CSS 3D animation to animate the letter tiles in the game.
The voting round interface. View full resolution image.
Sign-in via OAuth
After completing the prototypes, we converted the templates to Node.js views. Collaborating via GitHub made the process relatively painless.
Final touches
In the final hours of the competition, I created custom sound effects for various game actions, and used SoundManager 2 to attach those sounds to the game events.
Post-mortem and awards
After our hectic 48 hours of development were over, we sat back, played the game, and awaited judgment from the Node Knockout panel.
Though we did have some hiccups with game performance during the judging period, we were happy to see people from around the world joining the game and playing their backronyms.
Though it came down to the wire, we were very pleased to win "BEST DESIGN" in the 2011 Node Knockout. Seriously! Check out the winner list on TechCrunch.
Won the best designed app in the 2011 Node Knockout
The future
The app is no longer live, but we do hope to bring it back to life at some point in the future.
