A small article to show the design process of the making of one of my games –
Horror Match


1. Initial coding
I begin with programming the basic framework of the game to get started, at this stage I use very basic (badly drawn) graphics for the cards – the code is constantly tested & tweeked throughout the whole game making process. For this project I am programming in Javascript.


2. Card Graphics
The next stage is to create the card graphics – I base the cards around classic horror movie icons played by Boris Karloff, Christopher Lee etc. I draw the graphics about 3 times bigger than the size of the final export.


3. Sounds Effects & Video Capture
Sound and video are captured from original movies via youtube, there are plenty of free youtube to video converters available on the web to capture sound & video. I then edit the sound and video with Adobe Audition and Adobe Premier accordingly.


4a. Game Ending – Win Game Scene 1
I first edit two separate Hammer Horror video clips together using Adobe Premiere.
Just Importing the whole video into flash would make the file size too big so I decide to use other techniques. The first scene is the shadow of Van Helsing driving a stake into Dracula, for this part I animated the shadow as a vector graphic against a still image background.


4b. Game Ending – Win Game Scene 2
For the second scene where Dracula is writhing around in pain I exported each frame from the film clip into Photoshop, applied a poster filter, heightened the contrast & hue and then imported each frame back into Animate… I then vectorised (trace bitmap) each frame which heightened the pop art effect even more to fit in with the game style.
I also delete every other frame to further more reduce the final exported file size whilst still maintaining a good animation rate.


5. Game Ending – Lose Game
Splatter brushes in Photoshop are used to simulate blood splattered across the screen when you lose the game.


6. Play the Game!
Click the image below to play the game (link opens new window)