Development

Here are a few of Iain's images from the development process:

Splash screen

So I initially made this splash screen as an introductory page to the theme of the canvas game. We aimed to make it a bit cartoony, with a light hearted theme. This led me to create this cartoony, sketchy image:

We later refined the idea, which led me to make this concept art splash screen to demonstrate what the game would have looked like with further development:

Idea

So we decided to make game that was original and not a re-skin of Canvas Hero, which we were given to use. We eventually settled on making a Breakout clone.

Breakout is a game in which the player controls a paddle and uses physics and angular maths to bounce a ball in order to break blocks at the top of the screen. We (mostly Iain) started coding a working breakout game that used SVG from scratch, following some tutorials. We got a perfectly working game of breakout produced, and decided to theme it for novelty and such.

I had recently been playing a game Red Alert 2, which is a comical RTS game themed around a fictional war between the communist forces and an allied group. We decided this would be a nice light hearted way of adding novelty to the game, so we decided to make the focus around a communist submarine attacking the HMS Bullwark, which is an aircraft carrier stationed outside of Plymouth.

I ended up creating some concept art for how the game would look like, before actually working on the reskin:

These are my drawings that I have for Iain to add to the game. I prefer the yellow ball on the left. Maybe the other two can be extra weapons you can unlock.

SVG

Scalable Vector Graphics (SVG) is a family of specifications of an XML-based file format for two-dimensional vector graphics, both static and dynamic (i.e. interactive or animated). The SVG specification is an open standard that has been under development by the World Wide Web Consortium (W3C) since 1999.

SVG images and their behaviors are defined in XML text files. This means that they can be searched, indexed, scripted and, if required, compressed. As XML files, SVG images can be created and edited with any text editor, but it is often more convenient to create them with drawing programs such asInkscape.

All major modern web browsers have at least some degree of support and render SVG markup directly, including Mozilla Firefox, Internet Explorer 9, Google Chrome, Opera and Safari. Earlier versions of Microsoft Internet Explorer (IE) do not support SVG natively.

Graphics

My assignment within the group is to work on the graphics, mainly centered around the missile, or ball that is bounced back between the two items. I thought drawing the works in illustrator or photoshop but Iain told me to create them in SVG. So that is what I am going to do.

Ze Plan or is it Ze Brief.

Ze Challenge
We are making a new web graphic! Developing a game that is the forefront of technology using HTML5 Canvas and SVG!

In ze blog we show our research into features and possibilities of HTML5 Canvas and SVG, implemented on the Web in numerous examples, demos and tutorials. To compare these two technologies and to understand their use and limitations.

Then Based on the research we will develop an idea for a game or a multimedia presentation!

Also in ze blog the conceptual context of your idea and final product, the aim and results
achieved, HTML5 Canvas and SVG technologies as a new generation of web graphics and interactive
multimedia.