design
Creating graphics for a Silverlight game
The concept
As a way of learning a little more about Microsoft's Expression suite and Silverlight, myself and a developer friend decided to create a very simple game. I pretty quickly decided on a Space Invaders approach where a character shoots at an army of attacking invading characters. It meant we didn't have to spend time thinking too much on the gameplay concept and could quite quickly learn the techniques to create something playable.
Having decided on the kind of game we wished to make, I started to think of the characters. We quite quickly came up with an environmental theme. Ideally it would be nice to build something educational, but for the simplicity of our chosen game genre, a basic message to raise awareness was as much as we could hope to achieve at this stage. We came up with a polar bear as the main character who would battle off polutants to try and slow down the melting of the ice flows. The idea was that the ice was melting at a steady rate, but you could slow it by destroying the causes.
Firstly I sketched and doodled some ideas for characters, considering different bear shapes based on stuffed toys. I also considered the enemy characters and settled for a car, a toilet representing waste, a light bulb, an aerosole can and an aeroplane.
Creating the characters
Having drawn up a rough outline of the characters required and the kind of look they would portray, the next step was to get them on screen. I used Expression Design to draw them out.
All the characters are drawn face on to the player. The aeroplane, due to its width, was selected as the kind of 'end of level baddy'. This visually added an element of scale to the game.
Using Expression Design was not too much of a leap from other illustration tools. Colour selection I found a little trickier than usual, and I admit to finding the combination of vector paths and layers a bit of an odd concept to grasp and control, but overall it worked well.
Once created, all the characters were exported as xaml files so that they could be brought into Expression Blend and manipulated further.
Other games characters relating to the gameplay were created in the same way, such as the iceberg shape used for the melting ice flow symbol, Olop's ice shard fire and the toxic fire and explosions of the polutants.
The game chrome
I decided on a basic gradient background for simplicity sake. I chose a cold kind of icey blue which I felt would allow the characters to stand out sufficiently. I laid all out to get a sense of the size of the game area for the characters and to see how they would all work together. I was concerned that some styles for some characters might jar against others so it was important to see all displayed together.
The screen needed to accommodate the score and level display, power-ups and the timing device - the melting ice. I used a glassy effect to contain the melting ice and the power-ups, making use of Expression's gradient and opacity settings. One criticism so far has been that the melting ice is too subtle and needs to stand out more which I'll look at in a later version.
For the final version, I drew my own characters for the level and score display. The score numbers were drawn within a fixed with rectangle to eradicate the need to letter-space them when they were placed adjacently.
Animating the characters
I wanted the characters to animate in relatively subtle ways as they went about their roles in the game. Olop the bear had to take on some kind of walking gesture as he was controlled back and forth. The polutant invaders needed to emphasise their nastiness in some way. I 'sketched out' ideas of how the characters would animate in Expression design initially. The aerosol can would scrunch and spray; the toilet would open and close its lid; the eyes of all the characters would blink or frown and some would gnash teeth.
I then created the storyboards using keyline animation in Expression Blend. I would distort the path, change colours etc. and then restore the shapes manually. I wanted the the characters to change state in almost a ripple of a motion.
And finally
Just to add the last touches, I created a welcome screen and a game over screen in Expression Design, exported them as xaml files and created controls from them with text areas that would allow for any dynamic text.
Of course there are lots to improve on, including allowing the facility to turn off the sound, adding powerups, creating a more engaging backdrop, all of which we hope to address in later releases.
Why not have a go at our first attempt?
Return to site
