Crayon Battle - Make a Flash Game from your Childs Artwork

My four year old son and I have a Saturday morning ritual where the two of us go out for a “special” breakfast at a local restaurant. While we are waiting for our food, Owen always draws a very exciting battle scene on the back of the paper placemat using the crayons provided by our server. One day, after he was done drawing, he asked “Dad, can we turn this into a video game?”. I answered of course I could!

So we went home and pulled out an old scanner, scanned his drawing, and went to work in Gimpshop and Adobe Flex!  After a little cropping, resizing, ActionScript coding and a trigonometry refresher, the result is a Flash game titled Crayon Battle.

If you would like to produce a Flash game out of your children’s artwork, here are some simple steps.

1. Download our crayonbattle.zip file.
2. Extract the zip file to your local disk
3. In the folder where you extracted the file, you will notice a folder named gamePieces.  In this folder are the “building block” files that contain the artwork for the game.  The files and their function are as follows:        

background.png	This file is the backdrop for your game
goodguy.png	This is your game unit that will blast the badguys
bullet.png	This is what your bullets will look like
badguyx.png	This is the badguy.  You can have multiple badguys – just replace the x with a number from 1 to 4

Here are some special notes to keep in mind:

• When scanning the artwork, make sure the background image is scanned to a dimension of 800x600 pixels.  Your scanner software should allow you to do this, but if it doesn’t, you can use GIMPShop.
• All of your scans must be saved as PNG. If your scanner software does not save in this format, you can use GIMPShop.
• When scanning the goodguys, badguys, and bullets, I would recommend that each should be no larger than 70 pixels in either direction.  You also need to remove the background from these images so they float cleanly over the background.  This can easily be done in GimpShop using the Magic Wand tool.

If you are intereted in looking at the source code for the game, in the folder where you extracted the zip file, there is a folder named source that contains the ActionScript files and Flex project used to create the game.  You can modify the ActionScript using any text editor and recompile it using the free Flex SDK that is available at http://www.adobe.com/products/flex/downloads/ or you can download the trial version of Flex Builder from Adobe's website.