Introduction
Nowadays, getting children (and adults!) to play “educational games” can be hard to nearly impossible. That’s where Math Battle comes in. Originally created at Local Hack Day 2015 @ General Assembly and winner of the 2015 Congressional App Challenge, Math Battle is an iOS game where two players play on the same screen and go head-to-head in a battle of intellect attempting to solve procedurally generating, math-based puzzles faster than the other player.
Overview
Users can either play Math Battle locally on the same phone using a split-screen form of the game or compete in “ranked battles” via an online multiplayer mode. Battles consist of players competing to solve five procedurally generated puzzles faster than the other player. To do so, they are given a random set of nine “number tiles” and a target number.
Players must use all nine number tiles in order to come up with a math equation that, when evaluated, results in the target number. A player wins the battle when they have solved five puzzles faster than the other player or, after two minutes, the player with the highest number of solved puzzles wins.
Implementation
I programmed the majority of the app in Swift using the open-source game engine cocos2d-objc, and designed and created all of the artwork myself using a combination of Adobe Illustrator and Sketch.
All puzzles are generated on the fly, each with a guaranteed solution. This allows for massive replayability, so you can challenge your enemies (and your math teachers, of course) to a Math Battle as many times as you want and still get new puzzles every time.
I also used Firebase’s Realtime Database, Authentication, Cloud Messaging (push notifications), and Analytics modules for the backend. I engineered a way to take advantage of Firebase’s notably fast data update and retreival benchmarks to allow for real-time online multiplayer battles. This allows players to compete on separate devices while still seeing all of the taps and moves of their opponent on the other side of their playfield.
Finally, I implemented an ELO rating system which further incentives players and students to continually play and improve their quick thinking skills in order to climb up the leaderboards.
Design
A large amount of Math Battle’s time in production was spent developing an unified brand design. As a starting point, I was primarily inspired by the look of the typeface, ADAM.CG PRO. This led to the thick, black borders and the drop shadows seen around most of the elements. I also used bright colors to give the game a more friendly mood.
Animations
To make sure that there is motion on the screen at all times—this prevents players from thinking that the game froze—I implemented looping motion backgrounds in the gameplay scenes. I achieved these through some custom OpenGL tinkering to selectively prevent textures from rendering on top of one another. You can see this in the GIF below:
To give the game more polish, the last month or so of development was spent working on the animations seen throughout the game. In particular, the menu transition animations took a lot of time to get just right—however, it was worth it in the end for technical reasons as it allowed me to seamlessly load and deallocate memory for each gamemode menu instead of loading all the menus at once, which was calling memory warnings.
Trading Cards
For marketing purposes, I designed and printed Math Battle “trading cards.” They feature download information on the backside, and a randomized tile and background color combination on the front.
Press/Award History
Math Battle was originally created at Local Hack Day 2015 @ General Assembly in October 2015, where it won “Best UI Design” out of several dozen teams.
After a complete redesign of the app, in February 2016, I won the 2015 Congressional App Challenge. As a result, I was invited to Washington, D.C. to a reception with the other regional winners, political representatives, and engineers from tech companies such as Spotify and IBM.
In June 2016, I was named on CEWeek’s 10Under20: Young Innovators To Watch list for my work on Math Battle. Since then, I’ve been featured in several publications around the internet—you can view several of these articles on the Math Battle website.
