O'Reilly logo

Building HTML5 Games with ImpactJS by Jesse Freeman

Stay ahead with the world's most comprehensive technology and business learning platform.

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, tutorials, and more.

Start Free Trial

No credit card required

Scripting in Photoshop

Photoshop has several ways to build automation scripts, but for now we are just going to focus on using JavaScript. Basically, we will write a script that loops through the layers of the PSD, aligns each of the sprites in a row, and allows us to output a single file. One of the most important parts of generating graphics for games is picking the correct file format, color palette, and optimization settings by hand for each sprite sheet.

Our game’s main character with each sprite animation on its own layer.

Figure 2-4. Our game’s main character with each sprite animation on its own layer.

Photoshop scripts are simple text files saved as .js files. Usually, these scripts should be placed in the Presets/Scripts directory of your Photoshop installation folder. For simplicity, you can just manually run them by going into FileScriptsBrowse. In your script editor of choice, create a file called LayersToSprite.js and save it to your computer somewhere that is easy to find. Add the following code to your script:

1 // Arrange layers into a sprite sheet. 2 if (documents.length > 0) 3 { 4 docRef = activeDocument; 5 var activeLayer = docRef.activeLayer; 6 7 numLayers = docRef.artLayers.length; 8 var cols = docRef.width; 9 10 var spriteX = docRef.width; 11 12 // put things in order 13 app.preferences.rulerUnits = Units.PIXELS; 14 15 // resize the canvas 16 newX = numLayers * spriteX; 17 18 docRef.resizeCanvas(newX, docRef.height, AnchorPosition.TOPLEFT); ...

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, interactive tutorials, and more.

Start Free Trial

No credit card required