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.

Leshy Sprite Sheet Tool is an Html5 based tool for creating, packing, and modifying sprite sheets and textures. In addition, all output can be created for a wide variety of formats including XML, JSON, CSS, and ImageMagick scripts. Sep 05, 2015 unity-sprite-cutter. Simple solution for cutting sprites in your game. What it does, exactly, with given GameObject: converts SpriteRenderer to identical MeshFilter/MeshRenderer components. Cuts through the mesh - the Texture itself isn't cut, all magic comes from setting 'cutted' UVs. Returns cutting result as two new GameObjects (so you can. This video will show you how to cut sprite sheet images into multiple images / frames.Join the community slack channel for free: https://join.slack.com/t/max. Sprite Sheet Slicer is by far one of the most basic applications to deal with sprites a user can see. While this is neither good nor bad, it sends a clear message that functionality, in this case. To help manage sprites and avoid using so many images, many games use spritesheets. If you're looking for pre-made, creative graphics, discover Game Sprites and Sheets that may be just the right fit for your needs. Or you could order your own customized game character sprite on Envato Studio.

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.

Resizing

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

• ShoeBox (Windows/OSX)
• ImageSplitter (Browser)
• GIMP (Windows/OSX/Linux)
• Inkscape (Windows/OSX/Linux)
• Vector Magic (Browser)

Platformer With Sprite Sheets

Example code for this example can be downloaded here: spritesheet_example.zip

Sprite Sheet Cutter Program

A quick video of our final program is below, and at the bottom of the page is a video explanation of the program.

This example shows a platformer game using sprite sheets. A good 2D game can involve a lot of graphics. Rather than create and manage a file for each image, games will use a large image made up of several smaller images. For example, this sprite sheet has multiple frames of a player character walking all in one image:

The sprite sheet was downloaded from the ``Platformer Art Deluxe' package at OpenGameArt.org and was created by author Kenney. Here is another sprite sheet that our game uses to build the world:

In addition, I've created a couple backdrops for my game. You can't interact with the backdrops, but I think it is more interesting to have a backdrop than just have a solid color. The backdrop was created using the Tiled Map Editor and Kenney's Buildings sprite sheet.

This is the backdrop for Level 2.

Finally, the code! This code builds off the other platformer examples on this website. I've divided the code up into several files to make it easier to navigate.

The first file just has some variables that represent constant values. It makes the code easier to read by using variables like WHITE and allows me to change the screen size easily.

This class pulls smaller images out of the large sprite sheet. Create an instance of the class and pass in the file name as a parameter to the constructor. Then call getImage with the x, y location of the upper left corner of yorur sprite along with its height and width. You can use a drawing program to get the location of the sprite images you are intersted in.

Sprite Sheet Cutter Program Free

This next file defines platforms we can jump on or run into. At the beginning of the file we create lists for each image we want to use. The lists contain the x, y location of the sprite, along with the width and height. Next is the Platform class that defines a non-moving platform. There isn't much to it. The class passes along the image x, y, width, and height and uses the SpriteSheet class to grab the image.

If you want moving sprites, the next class MovingPlatform adds functionality to its parent class Platform. The class keeps track of its boundaries that it stays in, along with the velocity. The update is complex because a moving platform can 'bump' the user and move him/her. It also needs to keep track of how far the world has scrolled to the left or right.

This file defines each level in the game. There is a parent Level class that all levels should inherit from. Things that all levels have (like a list of platforms) are defined in this parent Level class. After that there is a class for each level.

The player class. This class could be simple, but we will make this player have an animation as he/she moves left and right.

This is the main program to run:

Sprite Sheet Cutter Program