Game Graphics Created in Expression Design
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:
- Go to the Edit menu.
- Select Options, and from the menu that appears, select Units and Grids.
- Set Document units to ‘Pixels’
- Type in '10 px' for Grid size
- Type in ‘1 px’ for Nudge increment
- 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.
- https://lostgarden.com/2007/06/latest-crop-of-sweet-prototypes.html
- https://lostgarden.com/2007/05/dancs-miraculously-flexible-game.html
Best wishes,
Danc.
Comments
Anonymous
November 30, 2007
Today I wanted to share some game prototyping graphics created in Expression Design. These are usefulAnonymous
November 30, 2007
Today I wanted to share some game prototyping graphics created in Expression Design.   TheseAnonymous
December 02, 2007
Excellent stuff! Thank you! More of information on producing this type of media would be nice! ;)Anonymous
December 03, 2007
Silverlight I found on the Blogosphere: Brad Abram's Intro to Silverlight Webcast, Video.Show 1.0Anonymous
December 05, 2007
The comment has been removedAnonymous
December 11, 2007
Last week, the plans for Silverlight 2.0 were announced with a number of features that can be expectedAnonymous
January 22, 2014
This looks real nice. Do you have any step by step information on how you created these in Expression Design.