Game Graphics Created in Expression Design

  • Article

Today I wanted to share some game prototyping graphics created in Expression Design.   These are useful for would-be game developers who happen to be missing a set of quality graphics and/or people who want sample files that can help them understand basic vector drawing techniques.

For example, the following is something I created using Design:

You can download the files used for the above image here: PlanetCute.design (540k)

Tips and Tricks Used to Create These Files

Expression Design was built to be familiar to folks that already know how to use a vector drawing tool.  However, there are a couple of unique tricks that I use every day that make my life much easier.

Always Work in Pixels
I always set up my document units to be pixels (at 96 PPI to be exact!).  This dramatically reduces any confusion exporting to XAML. If you want more information on why that is done, read Joanna's blog post.

Set your Grid to 10-pixels and Nudge Increment to 1-pixel
All the tiles are built on a grid that is 10 px by 10 px.  When you set your nudge increment to 1 pixel a nice trick becomes possible.  If you hold down Shift while pressing an arrow key, the object will move 10X the nudge increment.  In this case, that happens to be 10 px, the exact size of the our grid.  Now, instead of manually dragging elements with grid snapping on, I can use Shift + my arrow keys to move elements around and I’ll be guaranteed that they’ll be aligned with my grid.  This is quite useful when making tile graphics for games.

You can change your grid size and nudge increment with the following steps:

  1. Go to the Edit menu.
     
  2. Select Options, and from the menu that appears, select Units and Grids. 
     
  3. Set Document units to ‘Pixels’
     
  4. Type in '10 px' for Grid size
     
  5. Type in ‘1 px’ for Nudge increment
     
  6. Click OK to accept these changes.

Shading with Gradients that use Transparent Stops
Most of the 3D shading results are done using gradients that have transparent stops.  This simple feature, accessible through the Stop Alpha property on every gradient stop, dramatically increases the usefulness of the old reliable gradient.  Here’s an example of how I use gradients with transparent stops to create the tile based shadowing system used by the rest of the tiles.

Download Large (more readable!) Version

Can you make a game?

This set of graphics is pretty flexible.  Be creative. Can you make a platform game?  Can you make a role playing game?  Or a puzzle game? The possibilities are endless.  If you find that the set doesn’t include the exact tiles you need for your rocking game design, it is easy enough to open up the .design file in Expression Design, change some colors, or add some shapes. Voila! New tiles and new characters.

I just added the treasure chest graphic and I'm waiting for someone to bust out the first Silverlight Pirate game. Yarr.

To see what other folks have done with these tiles, stop by my website.

Best wishes,
Danc.