Blog | richardjdare.com

Texture Atlas Maker

August 18, 2009 29 Comments 2

**2012 UPDATE**: I have released a new version of AtlasMaker with many more features. Check it out here!

As I promised last time, here is a photoshop script for creating texture atlases from a directory of images. The script uses a rectangle packer class written by Iván Montes which is itself based on an article by Jim Scott. All I really did was add a GUI.

Texture Atlas Maker Photoshop Script

Instructions

AtlasMaker works in much the same way as the SpriteGrabber script I wrote a few weeks ago. Unzip the AtlasMaker directory somewhere, then in Photoshop, go to File->Scripts->Browse and load AtlasMaker.jsx. The script should then run automatically.

To create a texture atlas, click browse and select the directory containing your textures. The script will then process each image to get the information it needs to make the atlas. Once this is done, you can modify your destination document size, or add an optional margin around each image. AtlasMaker will create as many pages as it needs to hold all the images.

When you are ready, click ok and AtlasMaker will generate the texture atlas, with each texture on its own layer. You should end up with something like the image on the left.

Datafile Export

If you tick the “Enable datafile export” checkbox, AtlasMaker will create a text file in the src directory called “AtlasInfo.txt”, containing a line of text for each sprite.

Each line is generated from the text entered into the “line template” edit box. Tags are used to substitute information about each sprite into the text.

#i – Image index (0.. number of Images in directory)

#filename – Filename of source image

#width – Sprite width

#height – Sprite height

#x – X position of top left corner on spritesheet

#y – Y position of top left corner on spritesheet

#p – page number

Lets say your game engine loads textures or sprites like this: “TextureManager->GetTex(x,y,width,height);” and you have 50 images to load. You can generate all 50 calls by entering the following into the line template box:

TextureManager->GetTex(#x,#y,#width,#height);

SpriteGrabber will then generate 50 lines containing the correct coordinates and dimensions for each Image.

Download AtlasMaker

View Comments

SpriteGrabber – Photoshop Scripting for Game Development

June 9, 2009 4 Comments 0

One of the most common and tedious tasks in 2D game development is making sprite sheets from dozens or often hundreds of individual image files. Back when I was making Starblaster, I laid out several hundred sprites by hand. It took many, many hours and severely restricted my ability to experiment with different graphics. It’s even worse these days since most sprites use alpha channels; the semi-transparent images are almost impossible to line up by hand, and some particle effects are practically invisible unless they are laid on a dark background.

For my latest project (more info coming soon!) I decided I’d had enough of this drudgery, and wrote a Photoshop script to do the job for me.

SpriteGrabber v0.1

SpriteGrabber will take a directory full of image files and lay them out for you on one or more sprite sheets. Additionally, SpriteGrabber can export a text file containing information about each sprite. You can use this feature to generate calls to whatever function you use to load the sprites in your game.

Instructions

To run the script in Photoshop just go to File->Scripts->Browse and load the SpriteGrabber.jsx file from wherever you downloaded it to. It will run automatically and present you with the interface above.

Click “browse” and select the directory containing your sprites. SpriteGrabber will now process the directory and work out how many valid image files there are and how big the sprites are going to be. If you have different sized images in the directory, SpriteGrabber will use the largest dimensions to determine the sprite size.

Once the images are processed, the script will work out how many rows and columns there’ll be per page and how many pages will be needed to hold all the sprites. You can adjust the document width and height to alter these properties. Once you are happy, just click “Ok” to generate the sprite sheets.

Datafile Export

If you tick the “Enable datafile export” checkbox, SpriteGrabber will create a text file in the src directory called “SpriteInfo.txt”, containing a line of text for each sprite.

Each line is generated from the text entered into the “line template” edit box. Tags are used to substitute information about each sprite into the text.

#i – Sprite index (0.. number of sprites in directory)

#filename – Filename of source image

#width – Sprite width

#height – Sprite height

#x – X position of top left corner on spritesheet

#y – Y position of top left corner on spritesheet

Lets say your game engine loads sprites like this: “SpriteManager->GetSprite(x,y,width,height);” and you have 300 sprites to load. You can generate all 300 calls by entering the following into the line template box:

SpriteManager->GetSprite(#x,#y,#width,#height);

SpriteGrabber will then generate 300 lines containing the correct coordinates and dimensions for each sprite. (This is probably a poor example as in real life you’d use a simple loop to do this, but it does illustrate how the feature works. The datafile export will come into its own when the next version is complete.)

The Future

SpriteGrabber is not intended as a masterclass in Photoshop scripting. In fact it’s the first script I’ve ever written, but it should help trim a few tedious hours off the development process. Soon I hope to have a new version ready that will be able to efficiently arrange sprites or textures of any size.

Download

SpriteGrabber has been tested on Photoshop CS2,CS4,CS5 for Windows Vista, and CS3,CS5 for Mac OS X.

View Comments

Notes on a Language of Game Design

March 25, 2009 2 Comments 0

Over the next few months I want to write something around the idea of a language of game design. I say “around” because the subject is so tricky that it doesn’t let itself be approached directly; it must be circled carefully, with a keen eye for the subtle tracks it leaves in the gaming landscape.

Glimpses of our prey are fleeting; a movement in the long grass, the flash of an eye in the shadows. It’s a beast that none have seen clearly, yet tales of it are told wherever its hunters gather.

What do we mean when we talk about a language of game design? Over the past ten years, many designers have had the intuition that it might be possible to create a notation for describing game ideas like those that exist for music and choreography. Although the idea has been floating around for a while, it came to prominence in 2005 when Raph Koster delivered his lecture, “Game Grammar” at the GDC in San Francisco. Since then, many more game developers have started to explore the idea from a variety of perspectives, and for a variety of reasons.

But to talk of a language may ultimately mislead us. It’s important to keep in mind that we are using the word “language” as a metaphor. We might as easily say a mathematics of game design, a biology, or an architecture. Each of these designations points toward what we are looking for, but the contours of their meanings may scatter the light in other, less helpful directions, just as they reveal new and novel ones.

To create a language we first need an ontology. We need to know what fundamental entities games are composed of, and what fundamental relationships exist between them. (Actually, if we were really doing ontology, we’d have to be a bit clearer on what we mean by “entities” and “relations”.)

The search for an ontology raises some interesting questions. How are game entities similar to or different from their counterparts in the real world? How is creating a language of game design different from creating a language of surgery, of truck-driving, or of tasks and events in general? Given a real world-system of entities, a supermarket say, or a cowboy’s corral, what do I need to add or take away to make it into a game?

The central question, for me anyway, is not how I might write down my game ideas, or lay out their anatomy, but how do I see a game in what is around me or in what I feel? An artist looks upon his subject and sees form, colour, line and space. What does a game designer see? How can I teach someone to see it?

The posts in this series will be fairly loosely linked. I don’t have a grand unified theory or anything like that. I just want to share my thinking and get my ideas out there to anyone who might find them useful.

View Comments