Stacked Creations

Bounce

The Interactive Virtual Ball

• Project Overview
• Design Process
• Individual Contribution
• Final Product

Individual Contribution:

As with any team project, the outcomes seen in the design process and the final product are a result of a team, rather than a single individual. My individual contribution to this effort was primarily focused on two main aspects, being the development of the game itself and the development of the games look and feel. In addition to this I did contribute to the concepts development and other components of the project, but not as a primary figure.

Developing the Project:

The source code for Bounce can be accessed at github.com/afin83/Bounce

As was identified in the design process, Action Script 3 (AS3) was used to build Bounce. This proved to be a challenging task as my prior experience with AS3 was very limited. There were two primary reasons AS3 was chosen, first this project proved to be a good opportunity for me to become more familiar with the language and second, being quite popular finding support and learning resources was relatively easy.

From the outset it must be established that the development of this project was not entirely my own work, other group members contributed to the games development, and significant support was provided from teaching staff, which all contributed to the final product. For a detailed look at the game and its inner workings, I recommend downloading the source code from my GitHub repository, from here I will highlight some key outcomes that I was responsible for.

Silhouette refinements:

Throughout the life of the game, one of the most common critiques was that the blocky silhouette of the user was visually unappealing. Unfortunately achieving a smooth and clean silhouette was not an easy task. To better understand this explaining how the game actually works is of benefit.

How it works:

On a basic level Flash is comparing two images, any change within those images is identified as movement. This means that changes in light, movement of a door or anything for that matter is identified as movement, to deal with this the right sensitivity levels have to be set. However the way flash finds the differences is by analysing each pixel and checking to see if any differences have occurred. Because of this the Silhouette helpers were represented as blocks.

How it works - Simple overview

Flash analyses each pixel

How it was improved:

The solution was relatively easy, by applying a blur to the helper blocks a nice dotting/rounded effect was achieved. Ultimately this was not a perfect solution, but feedback was certainly positive.

Applying a blur

Outcome of blur effect

Gaming Element:

Feedback from users identified that whilst initial interactions were very engaging, ongoing interaction became boring very quickly. To address this a simple gaming component was added, keep the ball from touching the bottom of the stage and you'll get points, with the highest score recorded and displayed on screen. This was a relatively straightforward addition, by simply adding a counter to each time the ball was hit (e.g. add 10 points) and resetting the counter each time the ball hit the bottom of the screen, a very simple game was introduced.

Short Keys:

Throughout the development of Bounce an important component was being able to easily and quickly alter the settings of the code to test out what worked best. A significant improvement was achieved when the structure of the code was moved to a singleton design pattern, this basically allowed for all important objects to be accessed and altered easily from a single class. This significantly improved our ability to change settings quickly and improve the games performance.

However, as simple as it sounds it was the addition of short keys that made an even greater impact on the games performance. By assigning actions to key events, for example up arrow added balls, down arrow removed balls, and so on, we were able to get instant feedback on alterations to the game, instead of shutting the game down changing code and restarting the game.

Designing the Look and Feel:

Whilst not as time consuming as the development of the game itself, ensuring a visually appealing look and feel of the game was achieved was an important outcome and helped add to the overall success of the project. Some important elements included:

Timetable Information:

Initially the timetable information had a relatively simple and bland look too it, by making some changes (as seen below) users were able to more easily identify it as bus timetable information.

Clock designs

Route Details:

Similar to the timetable information, initial designs of the bus route information were kept simple, however user feedback identified that they were too simple and were not identified as a bus route. To change this more detailed route information was included.