Expression Blend and Design

The team blog of the Expression Blend and Design products.

Game Graphics Created in Expression Design

Game Graphics Created in Expression Design

  • Comments 7

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.

Leave a Comment
  • Please add 7 and 3 and type the answer here:
  • Post
  • Today I wanted to share some game prototyping graphics created in Expression Design. These are useful

  • Today I wanted to share some game prototyping graphics created in Expression Design.   These

  • Excellent stuff!

    Thank you!

    More of information on producing this type of media would be nice! ;)

  • Silverlight I found on the Blogosphere: Brad Abram's Intro to Silverlight Webcast, Video.Show 1.0

  • I started working on a Pirate game this week, going to download Expression Design and see if I can work with these graphics!

  • Last week, the plans for Silverlight 2.0 were announced with a number of features that can be expected

  • This looks real nice.  Do you have any step by step information on how you created these in Expression Design.

Page 1 of 1 (7 items)