Managing game graphics

[hapiel]

Hi guys,

Creating graphics for games is a lot of fun! I've joined and produced many projects over the last years, but I always struggle with: How do I manage my files? My project?

I need:
- Oversight, so that I can visually see what works and what doesnt
- Flexibility, a way to modify all graphics in a later stage, change some colors or add effect or modify some details
- Export sheets, without forgetting to create transparant pngs and not making mistakes in distance between frames or tilesize
- Version control, being able to test and save different options without confusing the developer with old files..

My latest project was a tiny game as a warm up for LudumDare with two friends of mine.
I created a big layered and palette indexed worksheet in Grafx2 and manually copied the important parts to separate files from there. Sometimes doing some animations in GraphicsGale.
This made it easy to test all assets with each other, yet when I wanted to change a sprite it seemed like I had to change it both in my work file and in the export file. For a larger project this might have become problematic and confusing at some point. You can play the game here btw


For another project, DropBoy, I have been working with multiple programmers over the years and now ended up doing it myself, with the result that I have so many different files organised in so many different ways! I need to learn to make sense out of these projects from on the start, in a flexible but manageable way.

How do you guys create complete game graphics? Where do you start, how do you store your work, how do you edit things later on, etc etc?

[Ai]

I don't have a complete answer, but I can address some of these things:

* Avoid exporting individual sprites. Import instead. If you see what I'm saying: make your main document reference external files that you can automatically edit separately or reload, rather than the converse. Then you don't have to deal with juggling coordinates, if you need to resize an asset you just resize that layer and export it. Sprite sheets can be done similarly.
* For versioning small graphics like pixel art, as many individual files, git works fine, though it does lack the facility to make visual diffs of image files. It's pretty easy to say, grab every version of foo.png and bar.png ever created so you can compare them, though. It also has a pretty solid model of collaboration that might be worth considering.

* TSV or CSV for tracking assets (asset name, status, description + references, tags). Probably also a simple tool to query it (eg. to select a set of files you have tagged so you can automatically modify their colors). I picked up this practice from Ari Feldman's now-free book 'Designing Arcade Game Graphics', and try to ensure that an asset gets described (including interactions with other assets) before it gets drawn. This largely takes care of the organizational problem because the logical groupings of assets become more and more obvious as you describe more and more of them.
You have the option of using, say, an Sqlite database instead, which has the advantage that if you know SQL you can query it in a zillion ways quickly. But I personally prefer text because you can edit it with just a text editor, it's easy to diff and other basic advantages you get from 'just being text'.

* A good pixel-art-friendly image viewer (for comparisons). Don't particularly know one for Windows; For Linux / maybe Mac, I'd suggest sxiv, ideally with my thumbnail zoom patch (zooming in beyond 100% blows up the thumbnails in integer increments -- 1x,2x,3x.. -- rather than just stopping at 100%. Since the thumbnail for pixel art is usually the exact pixel art itself..). Should support filelists, one way or another, so it's easy to compare any list of assets you want in an easy, reproducible way.


I guess the common thread in the above is scripting. You need some level of scripting to handle a lot of these tasks reliably.  It's nice if it can all be done in the same language (In my case, all of the below can be done with Python; though I prefer to use shell scripting with ImageMagick or GMIC for some types of batch image modification.)

* The import/export issue requires a certain level of scripting support in your image editor. I don't know about GGale, GrafX2 does not quite have the necessary level (no support for directly saving / loading files), GIMP has the necessary level (save/load files AND attach arbitrary information to images or layers). Photoshop probably has the necessary level too. If you do this correctly, it supports however many 'clones' of a given sprite you want, with the obvious constraint that they do have to each be individual layers.
* basic scripting to retrieve all revisions of a particular file from git.
* scripting to query and/or modify your asset tracking database(s) in the ways you find most important (obviously, you can import them into spreadsheet programs and do a certain amount of querying using formulas. But this is clunky, and for more complex queries, unnecessarily verbose and confusing).
* scripting to apply batch image modifications

I can give examples of working scripts if you want (with the caveat that they are written in Python, on Linux, and haven't been tested on other platforms)

[yrizoud]

The most graphic-heavy game I worked on had about 500 sprites. I found it most handy to keep the sprites in "freeform" sprite sheets, because seeing all the frames of a character on the same screen helped me stay consistent. (and creative / motivated)
I had tools to handle the sprite organization and meta-data : In my case it was Allegro 4's grabber tool. It uses a custom file format which remembers which sprite comes from which rectangle of which image, so if I did a small touch-up or a complete character sheet recolor, a simple "update" command was taking all those changes into account. However if I displaced a sprite or changed its bounding box, I still had to re-grab it individually.

[hapiel]

Thanks for the detailed reply AI!

So if I understand correctly Yrizoud suggests exporting files from a spritesheet and Ai suggests importing them into a main document.. Well that is confusing :p
In both cases I'd need some kind of scripting to automate the process. Allegro grabber seems to only suit the allegro library, and a quick google did not turn up any alternatives... Probably something I'd only get to see if I were working for a larger company, or if I'd learn python scripting myself... . I'd be curious to see your scripts Ai, I am on windows but can probably read the scripts just well enough to understand what is going on!

TSV/CSV: I am completely unfamiliar with this... Do you suggest that I manually create text file where I store information about all the assets? And find some kind of tool that reads and visualises the CSV data for me?

An image viewer... I've never used anything besides the standard windows viewer, and compare things usually inside my painting programs.. IrfanView can be set up to not ruin pixel art, I might try and see if it has any purpose for me

@Yrizoud:
On a large sprite sheet, how do you visually keep track of rectangles and sprite positions? A layer underneath that displays all the bounding boxes?
I now always import sheets to GraphicsGale (something I can't do with Grafx2) into an animation, which is the only method I trust for not accidentally moving a sprite or changing their canvas size, and then export them back into a sheet (and possibly then manually paste that sheet in a more complete texture with more animations)...

[yrizoud]

Allegro grabber seems to only suit the allegro library, and a quick google did not turn up any alternatives...

Yes, I wanted to present it as an example of tool-driven process : The library provides tools, file formats, and programming facilities; if you read the docs, understand the strengths and requirements and it fits your needs (you rely on strengths and avoid the weak points), it can really help you. It's even better if the tools are extendable (Grabber's source code is part of Allegro, I did code a few custom extensions for my personal use)

An image viewer...

I've never been disappointed with Xnview. Lightweight, provides bulk conversion tools, and supports every possible format. For animated GIFs it even lets you view the images one by one.

@Yrizoud:
On a large sprite sheet, how do you visually keep track of rectangles and sprite positions? A layer underneath that displays all the bounding boxes?

Well, there's no helper for this, it's up to me to know which parts of the image are actual sprites "referenced" in the sprite library, and which parts are random doodles, work-in-progress, or abandoned.

Here's an example, part of the last sprite sheet I used with this system. A lot of these sprites were experiments which had no chance of being actually useful, but I liked keeping them around for flavor, concepts, and occasional re-using of a limb.

[hapiel]

AI, thanks for mentioning the book Designing Arcade Game Graphics. I've just tried to read it and hoped to find some brilliant tips, but if they are there, they are hard to find  ! The book is so full of irrellevant information   , like it has pictures to show how a 'undo function' works, and it tells me the rgb values of colors like 'wet cement'.. But good to discover there are books about this topic

@Yrizoud
Cool, I'll try XnView

I have seen many sprite sheets like this, but always assumed they were mash ups from the actual strips, like what you see at Spriters Resource.. But in this one it is actually the other way around then!
It is a pity, I can find texture packer software, but no texture extractors..

It would be so nice if you could move sprites from this sheet quickly back and forward to your animation software...

[Ai]

Thanks for the detailed reply AI!

So if I understand correctly Yrizoud suggests exporting files from a spritesheet and Ai suggests importing them into a main document.. Well that is confusing :p

They don't conflict much.
Yrizoud's advice is based on the premise 'well, I can't get the paint program to track this (asset location, filename, etc) for me, so..'
where as my advice is based on the premise '*make* the paint program track this'. Export or import is fairly arbitrary, it's just easier IMO to begin with importing as you should be able to easily get all the filenames for later exports set up that way.

Probably something I'd only get to see if I were working for a larger company, or if I'd learn python scripting myself... . I'd be curious to see your scripts Ai, I am on windows but can probably read the scripts just well enough to understand what is going on!

Python is an arbitrary choice ultimately, it's just one that I have found works for me; there are many other scripting languages.

I've linked one of my scripts below, I'm cleaning up the others to be more understandable.

TSV/CSV: I am completely unfamiliar with this... Do you suggest that I manually create text file where I store information about all the assets? And find some kind of tool that reads and visualises the CSV data for me?

It doesn't really matter how you create it. I used a script to generate mine, then edited it with an ordinary text editor.
I opted for TSV because it's easier to read, edit, and parse. CSV is a mess.

The script I'm using on my current project (which isn't exactly a game, but eh) to keep track of what's happening just reports stats like

Code: [Select]

0987 done    1432 undone    0002 research-needed 0076 change-needed
0512 described 1907 undescribed
and optionally lists exactly what items are present in particular categories.
(it also compares the list of assets with a list of tags, but that's not generally relevant)

Maybe I should make it graph progress over time, that could be motivating.

I have a separate script that searches the TSV. Excuse me while I organize these various things..

I made some notes about Designing Arcade Game Graphics, I'll post them once I dig them up. It is a good book, though a bit dry.

EDIT: Notes are here: Chapter 4 is the most relevant to your problem (and was also the chapter I took most notes on). Ari is not a particularly good artist, but he is a good designer.

EDIT2: oops, I meant to make that publicly accessible. should be fixed now.

[yrizoud]

Fixed-size image organizations are very classic, but there are also some more free-form organizations, for example the Allegro bitmap font "format" :

The top-left pixel color indicates the "delimiting color", and "magic pink" marks transparent areas.
The library will autodetect the rectangles that are of a different color. I think the only constraint is that the characters are laid out horizontally with their top edge at the same y position.
Here I made this font with fixed height and aligned at specific X positions, but I could have made shorter symbols and I could have spaced them randomly.
Such resource can be read directly by a game, the overhead of "auto-detecting" the symbols is insignificant compared to the disk access.