For the long project at Hack Reactor, I worked as a software engineer at Famo.us in San Francisco. Our objective was to build something impressive using their framework. Easy enough.
The final work time, from not knowing the Famo.us framework to making a fully functional and designed game came to under three weeks. Check out the live version at www.Famospace.com.
The first few days at Famo.us were spent learning the framework and best practices of their design patterns. Lots of contextual binding and function declarations. (Check out my blog post on function delcarations here.)
Excited with the possibilities, Joe (my partner on this project) and I began working on recreating a game called Monospace.
Here's the description of Monospace on the App Store:
Monospace is a unique puzzle game for the iPhone and iPod touch, where players need to think in both 2 and 3 dimensions.
The goal is to collect a certain amount of white cubes in every level. To do that, the player is given the ability to switch between 2 and 3-dimensional views of the game situation. Possibilities and solutions change depending on the players perspective.
Since the interface, design, and game-play of this game is top notch, and incorporated 3D graphics into a native app, Joe and I thought that it would be the ideal project to put Famo.us's framework to the test.
A large part of our game is the rotation of cubes. To solve this, we had to conquer gimbal lock in Famo.us.
Wikipedia's definition of gimbal lock:
Gimbal lock is the loss of one degree of freedom in a three-dimensional, three-gimbal mechanism that occurs when the axes of two of the three gimbals are driven into a parallel configuration, "locking" the system into rotation in a degenerate two-dimensional space.
TLDR: If you have a cube, your y-axis points up, z-axis points at you, and x points to your right. Rotate that cube 90 degrees about the y-axis, and not your x-axis is your z-axis.
We came up with a pretty clever solution to this, and I'll have a post that in much more detail soon. In the meantime, feel free to check out the repo.
What I found was that explaining the game became a pretty abstract discussion. Users had to see the game being played to really understand it. So, from caffeinated inspiration, I thought it would be a great UX if the game taught users how to play. About a day later, I created an intro animation that goes through a real level explains the concept and controls to the user.
Check It Out
The full app is live at Famospace.com and works in any browser on any device.