Here is my final design for the ball.


<svg
width="100%" height="100%" x="0" y="0">
<circle cx="100" cy="50" r="40" stroke="black"
stroke-width="2" fill="yellow"/>
<circle cx="100" cy="125" r="30" stroke="black"
stroke-width="2" fill="yellow"/>
<circle cx="100" cy="180" r="20" stroke="black"
stroke-width="2" fill="yellow"/>
<circle cx="100" cy="220" r="10" stroke="black"
stroke-width="2" fill="yellow"/>
</svg>

Graphics

As part of my role in the game, I've had to design the graphics for the background and the carrier, featured on the intro screen. To accommodate all screen sizes, the background graphics is designed to fit on one square, which can tesselate easily with no overlaps and with seamless continuity. The carrier graphic was vectorised into a simplified graphic, to fit in with the graphical style of the assets:

The background as a tile

When the tiles are displayed, they are joined together to form a single, seamless background

The vectorised carrier

DISTRIBUTION

• New Grounds Game Portal
• devestationgames.co.uk
• Downloadable HTML files so people can upload it on to personal sites

Market Research

Staff

Josh - Project Leader
Sidd - Music & Graphics
Iain - Lead Programmer
Joss - Research & Development
Craig - Graphics

PROPOSAL

• We created a game that moves away from Flash and more into the future of online gaming.
• Tested our strengths of code.
• The use of HTML5 canvas and SVG
• The game is what we think is enjoyable to most.

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.