Wednesday, 15 February 2012

Mockups of the game


We were asked to develop a HTML5 game/ piece of media using the canvas the apply the game online. We looked at an example of a game called Canvas hero that demonstrated how to make HTML5 games using Canvas.

  

Upon being set this brief i looked towards retro old arcade style games from back in the 90s. Me and my group mates thought instantly to child hood favorites such as beat-em ups. Ones that stand out to memory are Tekken, Street Fighter and Mortal Kombat. With these game styles in mind we had to produce a similar feeling to what they gave when played. 

With Mortal Kombat and Street fighter in mind we decided we wanted to make a cartoon fighter game on canvas to resemble those of old. We wanted it to be set were we are based for Uni "Plymouth" so therefore characters will resemble people you will find around Plymouth. And also Backdrops will also resemble areas found in Plymouth.

So first plan was to develop some mockup backgrounds of how the game could look on screen. Because we were using street fighter and mortal kombat themes, we had to go for the cartoony graphical backgrounds... so here is the first set of ideas. I used Adobe Photoshop CS5 to achieve this.


The Backgrounds so far...



Plymouth Bus Station, Royal Parade


Student Union, Plymouth University

Union Street, Old City Centre Trade Street

So with the game in mind, the location in mind, next was the character development in mind. Old games such as Mortal Kombat used sprites to animate their characters. It is a set of drawing that cover every movement the character can do. And when put together into movement it offers a seamless flow of animation for the character directly controlled by the user. Examples of the sprites can be shown on the ones i have created below. The characters i had in mind for Plymouth would cover people found in the different locations i had selected for backdrops. So for example below I have a student whose a fighter which can be found in the SU, Plymouth. Next I have a typical middle aged man that can be found in Union street drinking whose a bit of an Plymouth Argyle football fan.


Characters so far...




Fight scene... example