Agile Software Development & Teamwork - Building an HTML5 Canvas Game

Tacked onto the end of my first semester at BCIT, after finals, was a five-week-long project term dedicated solely to giving us the experience of building software while working in team-based Agile daily scrum software development environment. 


For this year, the theme was to build a "brain game" in the vein of those weirdly addicting little puzzle games designed to train an aspect of the player's cognition. Popularized by Lumosity, the jury is still out on whether these games actually make any type of positive overall change in mental agility, despite the company's claims of improving "brain elasticity." (Hint: they don't. These mental exercises simply increases the player's ability at the game alone, with no apparent overall cognitive effect.) However, despite knowing this, my teammates and I still wanted to make the most of this experience. 


For the first week, or rather half-week, we had to come up with the concept of our game, write up a full proposal espousing the benefits of our game, and create a 30 second elevator pitch video. With only two days to do all this, we started brainstorming. Immediately we settled on the idea of creating a game aimed at younger children, where our game might actually make an impact and enhance learning.

After some back and forth, we settled on my idea that was vaguely based on a flash game that I had really enjoyed as a young'un. The game would revolve around the core mechanic of a player catching falling elements to construct an answer. This central idea could be easily adapted to teach multiple concepts and to have many different "themes" through different graphics.

With that decided, we proceeded to work on the elevator pitch. We wanted the video to have a cheesy faux-infomercial feel, just to have some fun with the assignment. I wrote a script and storyboarded the quick 30 second video. With my DSLR that I seldom use for video-making, I acted as director and cinematographer and filmed the necessary scenes with my teammates over the course of a few hours. Later that evening, I edited together the footage and recorded a voiceover.


I wanted to get a feel for the game before any coding began, to give the team a general direction to work towards. I started to mockup some of the game elements and UI aspects.

In approaching a design, I believe in quickly riffing through many iterations before selecting good ideas and going further in those directions. As someone who grew up drawing and painting, I have such an affinity to working with pen and paper. The ideas flow most naturally that way.

We ended up going with the version in the very right of the middle row. It had the right balance of clarity, navigability, and balance of all the information we wanted the user to have access to.

Tip: Design for mobile first. It's always easier to scale up a design than it is to scale down!

I then extended the design we settled on to a home screen UI both for mobile and desktop.

Moving from analog to digital, I started to work in Sketch 3.0 to create a prototype of game UI. The benefit of this is that while still technically a "prototype", all the art that I created would be perfectly transferrable to the real project once we began coding.

The first two weeks of the project term were dedicated solely to outlining what we hoped to achieve and creating presentations to effectively pitch our game to our peers and instructors.

With the Sketch prototype, I was able to create an animated mockup of what we hoped the gameplay would look like, in order to better demonstrate the potential of our product.

This was my first time animating something like this and while it isn't the most fancy animation work, I'm quite happy with how it turned out. As you will see, it ended up pretty close to how our game looked in the end!


With all that out of the way, our three week period of coding began. We worked in three weeklong sprints, with daily scrum meetings to delegate and decide on tasks.

As none of us had worked in this environment before, it was a learning experience in the first week. We struggled at first with identifying things to do and breaking down goals into achievable "bite-sized" tasks. As the first week went on, we definitely started to get the hang of it. We kept up a spreadsheet to tally our hours spent and to keep a backlog of everything we accomplished.