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. 

THEME:

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. 

BEGINNINGS:

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.

PROTOTYPING:

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!

CODING:

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.

Designing a Custom Business Website From Scratch

For the web development class during my first semester at BCIT, we were assigned a group project to be completed over the course of the whole term. The task at hand was to create a website, the topic for which we were given free reign. At that point in time, I had no previous web development experience, aside from some simple HTML tags that I had taught myself many years ago. Still, there was no time to delay. I formed a group with four other classmates that I had met on the first day of school, eager to dive headfirst into the process of building my first website.

First we had to pick a topic. After some deliberation, we settled on my suggestion - to create a brand new website for the cafe that I was working at. The Boulevard Coffee Roasting Co., a busy locally owned coffee shop located in the heart of UBC. Our first task was to write up a proposal outlining how we were to approach building this new site. We used the café's old website as a reference point to begin identifying how we wanted our new site to be different.

 www.theboulevard.ca

www.theboulevard.ca

  • Plain text takes up more than 80% of the site
  • Picture is irrelevant and does not actually show the café
  • Table based layout that is not responsive to fit multiple form factors
  • Not shown, the home url leads to a blank landing page. What is the point of this?
  • Too many links in navigation bar - many of the pages can be consolidated
  • Site looks like it has been the same since 2006
  • Content does not fill the full width of browser window, leaving empty spaces on the sides

Having done that, we embarked on crafting a more modern and streamlined solution. We decided to put graphical content at the forefront of our design. Although cliché, "a picture says a thousand words" definitely holds true. In order to entice the potential customer who ends up on our site, we couldn't bore them with a wall of text. As the de facto "creative director" of the project, I began sketching up mockups, with input from the group, that reflected my vision for a dynamic website that filled the entire browser, showcasing the custom photographs that I was going to take specifically for this project.

Early on, we decided to keep the ever-present navigation bar on the left in order to maintain easy access to all the pages of the site. I settled on the idea of a large banner photo with text overlay that would serve as the common basis for the site, lending a sense of cohesion to all the pages. The background image would be swapped out, as appropriate for each page. With the index designed, I continued to create skeletons for the rest of the pages - though they were just loose guidelines that would be changed on the fly due to technological constraints or design choices that didn't work out when actually coded.

From there, we started actually coding the website. First laying out all the structure of the html file with placeholder images and text. Then, semi-finalizing the CSS for just the homepage so that we had a template from which to work from in order to build the other pages. The web development class that we were in moved at a lightning pace, quickly getting us up to speed and comfortable with HTML5 and CSS3. We finished going through the entire textbook in a little bit over a month! This baptismal by fire, though strenuous, was completely necessary. Otherwise, I don't see how we could have developed the skills necessary to put together a website. I guess that is the beauty of studying at BCIT. It is tough going but the result of hands-on practice cannot be understated!

Another new technology that we were coming to grips with was version control through Github. When used effectively, a repository and version control works like magic, keeping each group member in synch as we collaborated on the website. However, as anyone who has used Github before knows, things do go wrong, and wow is it ever frustrating. Luckily, the majority of the group was very dedicated, we would stay after school and code for hours. Working in the same room and keeping in constant communication is an effective way to minimize merge conflicts and errors with version control.

Unfortunately, I do not have any screenshots of our site in progress. I will say, though, it was definitely hard going at first. The website was just so ugly until I picked a final colour scheme, which actually took much longer to settle on than I expected. In the end, I am quite proud of the site that we created. It is a fitting solution to the problems that we identified, and it has an unabashedly modern design. Here are a few screenshots of the final site.

What a stark difference from the old Boulevard website, huh? I encourage you to actually visit our creation here:

The Boulevard Coffee Roasting Co.

And here is the Github repository if you are interested:

Github

Play around with resizing your browser window! We put a lot of work into the responsive design, ensuring that it works both on every form factor.

With that, I will wrap up this post. I'll leave you with a gallery of some of the photos that I took for the website. I'm quite happy with how they turned out and how they look in the website. Thanks for reading and until next time!

-Sheldon