Manipulating pre-made game assets
Written by Kenney on 06/09/2016
Sometimes pre-made game assets aren't exactly in the format you hoped for. Imagine finding a spritesheet while the game engine you're using doesn't support sprite sheets, or having to plow through hundreds of separate files.
Using solely free tools (preferably for all platforms) we'll be doing various common tasks.
Create a sprite sheet
To pack separate sprites to a sprite sheet we'll use ShoeBox (Windows/OSX). After installing open the program and drag all the sprites you want to pack onto the Sprite Sheet panel. After dropping, ShoeBox will generate the sprite sheet.
Aren't satisfied with the result or like to export to a different format? Hit Settings where you can change file names, cropping, extruding, padding and more. Some engines only support 'power of two' images, there's an option for that too. Once you're done you can save the sprite sheet image plus XML file (information on the positioning of elements in the sheet) to your disk.
Extract a sprite sheet
To separate images from a sprite sheet we'll be using ShoeBox (Windows/OSX) again. Drag the sprite sheet you want to extract onto the Extract Sprites panel. The preview will show which elements will be separated, tweak the settings until you're satisfied.
This method doesn't work if you'd like to keep transparent pixels around the separate images (uniform size), for this you'll need a tile sheet cutter.
Extract a tile sheet
If you need all images from a sprite sheet in a uniform size method you'll need to use ImageSplitter (Browser). Select an image (middle) and upload it. Click the Split Image tab on the top of the screen and input the number of rows and columns the tile sheet has.
Select PNG and click Split Image to download a ZIP archive with the images extracted.
For resizing use GIMP (Windows/OSX/Linux). Open a sprite image and select Image > Scale Image... in the new dialog you can set the size in pixels or percentage. Note that pixel art doesn't scale very well unless the size is a power of two.
Vector to bitmap
To open and edit vector files we'll be using Inkscape (Windows/OSX/Linux). Click File > Open... to open a vector file (EPS, SVG etc.). Once the file is opened you can edit sizing, colors and shapes. If you're done, click File > Export PNG Image..., in the new dialog you can select what to export (the whole document, a drawing, a selection or a custom rectangle). Click the Page tab and then Export to save the complete document.
Bitmap to vector
This is slightly more complicated and finicky. Vector and bitmap formats aren't interchangeable and any of the tools available simply try to redraw the bitmap image to vector. The best one I've found is Vector Magic (Browser), it's not free but you can try it a couple of times. Upload a bitmap image and follow the steps to create a vector version, this works best on flat and simply geometry.
Tile sheet to map
Tiled (Windows/OSX/Linux) is a popular tool to create levels and maps. To create a new map click File > New.... Depending on the map set the orientation to orthogonal (most RPG's), isometric (The Sims) or hexagonal (Civilization). At this point it's important for you to know the tile size, most common sizes are power of two (16x, 32x, 64x etc.).
Once you've created the document click the New Tileset icon, browse to the tile sheet you'd like to use and input the same tile size as you did in the dialog for creating the map. If done correctly you should be able to create a map using the tiles, if the tiles aren't properly cut you probably made a mistake with the tile size values or margin/spacing.
Software used in this guide
For more tools check our resource page!
Reading time: about 3 minutes
Buttons that clickby Kenney
User experience designby Robert Dunlap
Beginner guide to game developmentby Kenney