On July 19 and 20, 2014, the DEG mobile team joined 150 other professionals in a hackathon called Hack Midwest in Overland Park, KS. The hackathon consisted of 25 teams mixed between university students, professional designers, and experienced developers who came together to create mobile apps, web sites, and other applications in 24 hours.

Four of us (Dan Morris, Jonathan Willis, Sree Kakarla, and myself) from DEG participated in the hackathon. After our team pre-match meeting, we decided to challenge ourselves with building a real-time, 2-D Ninja fighting mobile game in 24 hours. The game was designed to accept two players/ninjas fighting each other by throwing ninja stars. The player uses the mobile app to join a game battle and use hand gestures to control his/her ninja and attack opponents by throwing ninja stars. All gameplay is displayed on a website in real-time.

Our goals of this hackathon were to challenge ourselves with a new set of technologies we rarely used before, to treat it as a team-building exercise, and have a fun at the same time.

The Planning

After a few pre-match meetings, we decided on a list of new technologies to explore while building this ninja mobile game. We are big fans of agile development at DEG. We had heard about Visual Studio Online supporting online Kanban board setup, private cloud-hosted source code repositories, and built-in integration with Visual Studio 2013. We decided to try it out for this project. We used Visual Studio Online to host our source code repository and manage our feature tickets with a cloud-based Kanban board, and also used Visual Studio 2013 to develop this game.

hackathon_kanban_board

Since this was a real-time mobile game and could be played by millions of people, we needed this game to be scalable for the future demands. We decided to use Windows Azure to host our backend server and SQL database in the cloud.

For easy game-play access, we decided to use a web-based approach, so we set up a website to display the actual gameplay in real-time on the web. We researched several Javascript libraries, and we ended up deciding on EaselJS as the canvas for graphics drawing and animation. We also used PhysicsJS to implement a physics mechanic (e.g. different projectile motions based on how hard the player threw ninja stars).

For real-time data communication between backend server and mobile apps, we chose SignalR. In order to accomplish real-time communication, SignalR is built on top of the WebSocket protocol for bi-directional communication between server and client.

For mobile app development, we chose Xamarin framework and used its latest library called Xamarin.Forms in order to quickly build the cross-platform mobile UI. The Xamarin SignalR component was implemented to send/receive data between the mobile app and server.

Our team felt we had a solid game plan and thoughtful technology choices for this hackathon. We knew we had a fun time ahead of us from the beginning.

The Event

We arrived at Hack Midwest, which took place at Johnson County Community College in Overland Park, KS, at 8 a.m. on July 19, 2014. When the hackathon started at 9 a.m., we started executing our plan. First, we got our team project space set up in Visual Studio Online, entered all feature tickets in the Kanban board, got initial projects set up, and checked in our source code to our Visual Studio Online repository. The initial setup wasn’t as quick and as smooth as we wanted, but we managed to get it setup right and ready to go for actual development. We divided our team into three segments: 1) two team members for backend server development, 2) one team member for graphic design, and 3) one team member for mobile app development.

For backend server development, we set up to deploy our web service and gameplay website to be hosted on Windows Azure. We learned EaselJS and PhysicsJS on the go, while setting it up with the battleground and ninja motions (jumping, throwing shurikens, etc.). SignalR was configured to support data communication back and forth between mobile app and server.

For mobile app development, we developed screens for creating a new game, joining an existing game, a game lobby, and gameplay controller. These screens were built using Xamarin.Forms, and it enabled us to support cross-platform devices. Even with the time constraint, we managed to test and demo the app on iOS devices. The mobile app project allowed for future cross-platform support. Hooking up the Xamarin SignalR component to send/receive data from the server was relatively simple.

Rather than working non-stop for 24 hours, we did manage to take a few breaks, grab dinner, and eat together during the evening hours. Over dinner we were sharing and discussing ideas for the app, coding practices, and architecture. It was a great team building experience!

hackathon_team

The Result

In the end, despite the lack of sleep and extreme tiredness over the course of 24 hours, our team managed to complete the core functionality of this mobile game. We had a successful presentation in front of all participants. We didn’t get any door prizes (most of them were prizes from API sponsors, and we did not use any of them because we had our own technology choices), but certainly we accomplished our goals to explore the new set of technologies we wanted. It was a great team-building experience and we had a fun time. We can’t wait to bring some of the technologies we learned from this hackathon to our client’s projects in the future.

hackathon_game_screen

 

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

Comments