Tuesday, 25 August 2009
Friday, 27 March 2009
Naming Conventions and Asset Management from Photoshop via Ruby into Flash
When I was creating assets for my Bread Bin game I made sure to name things usefully at the earliest possible stage.
So here's how my PSD looked:
This allowed me to use Photoshop's "Export Layers to Files..." script to create a folder of images in my (sprouts-based) Flash project's assets folder.
Note that when exporting to PNG files, the layers can be automatically trimmed, resulting in a folder like this:
The next task was to get rid of the leading numbers in the file names (I wanted total purity of file name :) ), a task for a bit of Ruby:
That renames all of the files in a folder stripping out the first 6 characters.
The next step was to resize the assets to something appropriate for my app. I didn't want to do this by hand and I assumed I'd change my mind depending on how the image size affected the gameplay, so I created a rake task in my project's rakefile, like so (you could use Automator, but I like the command line and have Git and ImageMagick installed and working!):
I'd created my folder of large images and committed it to my project's git repository. Then I knew that any time in the future I could revert back to those original images and rescale them using a command like "rake resize_assets scale=40%".
Next, I needed to embed these assets into my Flash file. Using code all the way, of course (you'll never see me voluntarily start up the Flash IDE...).
Running "rake assets" produces an AS3 class like this:
So then I have Bread class that looks something like this:
And now my method that returns a new Bread model with a random asset looks like this:
So now, asset management is done on the filesystem, and to 'commit' my asset changes I just run "rake assets" and my ActionScript class is brought up to date, and I get to use the French words for the breads, simply because I was sure to name my original Photoshop layers usefully!
Here's the game again, anyway:
Bread Bin game
So here's how my PSD looked:
This allowed me to use Photoshop's "Export Layers to Files..." script to create a folder of images in my (sprouts-based) Flash project's assets folder.
Note that when exporting to PNG files, the layers can be automatically trimmed, resulting in a folder like this:
The next task was to get rid of the leading numbers in the file names (I wanted total purity of file name :) ), a task for a bit of Ruby:
That renames all of the files in a folder stripping out the first 6 characters.
The next step was to resize the assets to something appropriate for my app. I didn't want to do this by hand and I assumed I'd change my mind depending on how the image size affected the gameplay, so I created a rake task in my project's rakefile, like so (you could use Automator, but I like the command line and have Git and ImageMagick installed and working!):
I'd created my folder of large images and committed it to my project's git repository. Then I knew that any time in the future I could revert back to those original images and rescale them using a command like "rake resize_assets scale=40%".
Next, I needed to embed these assets into my Flash file. Using code all the way, of course (you'll never see me voluntarily start up the Flash IDE...).
Running "rake assets" produces an AS3 class like this:
So then I have Bread class that looks something like this:
And now my method that returns a new Bread model with a random asset looks like this:
So now, asset management is done on the filesystem, and to 'commit' my asset changes I just run "rake assets" and my ActionScript class is brought up to date, and I get to use the French words for the breads, simply because I was sure to name my original Photoshop layers usefully!
Here's the game again, anyway:
Bread Bin game
Subscribe to:
Posts (Atom)