How to make sprites

10 Best Pixel Art Software & Programs for Developers (2022 Update)

2D Sprites are the visual building blocks of almost all mobile games and the pixel art style that has become synonymous with video games is still a popular choice amongst game developers today. With pixel art and 2D sprites, you can quickly animate your game objects and create a dynamic viewing experience for your players.

Knowing how to work with sprites and pixel art has become an essential skill for all mobile game developers. Read on to find out how to make your own sprites and where to find resources for making your own pixel art!

Note: we have collected more free resources for game developers at the end of this site. Make sure to check these out as well!

What are Pixel Art and Sprites?

Pixel Art

Pixel art is a digital art form where color is applied to individual pixels to create an image. The term Pixel Art was first published in 1982, although the concept had existed for at least 10 years before hand.

Pixel art is saved in file formats that use lossless data compression such as GIF or PNG format. JPEG format is not recommended as it uses lossy compression that leaves artifacts in your images.

Pixel art can be categorized into two main forms, isometric and non-isometric. Isometric pixel art has a 3-dimensional appearance even though the image is still a 2D shape.

Non-isometric pixel art presents one side of an object, such as the top or front.

Get beautiful apps from experts. We are your partner to develop modern tailored apps for iOS & Android.

Sprites

Sprites are animations such as characters or objects that can be used in your mobile game. They can be made from any imaginable image source and animated in a number of ways. They’re one of the most used visual components for mobile game development and have a long history within the game development industry.

A basic example of an animated sprite can be seen below:

This simple animation looks like one 256×256 sized image but it’s actually a 512×256 image that moves the image frame to create a bouncing effect.

This 512×256 image is known as a sprite sheet and is the reason you can animate your sprites. A sprite animation simply shows a different part of a sprite sheet at different times to create an animation. There are a wide range of possible animations for sprites but the above example shows the most basic use of a sprite.

Why Should You Use Sprites?

Easy Scene Creation

If you had to create every scene of your game as one image, it would make things a lot harder to edit later on. With sprites, you can add and remove visual elements as you please without having to edit any of the other visual components of your scene. This makes it easier to design complex game scenes and introduce new characters and objects for your players to interact with.

Better Performance

Sprites also offer a performance enhancement as it places less pressure on your game to repeatedly call multiple images to appear on screen. Instead, a sprite sheet is called and then a different part of it is displayed as desired. It’s much easier for your game to call an image once and display it in a multitude of ways, rather than repeatedly calling for new image sources.

How to Make Pixel Art with these 10 Tools

We’ve already covered how sprites work but now it’s time to start making them. To make it easier for you to experiment with sprite creation, you can use one of the pixel editor tools listed below. They’re all free to download or use online and can help you to create the pixel art for your sprite sheet.

1. PiskelApp

PiskelApp is a free online pixel editor with an emphasis on sprite creation. It allows you to save your pixel art online and also has an import function so you can use it to edit your existing pixel art. PiskelApp has a simple user interface and is a great choice if you want to dive right into creating your sprite sheet.

2. Pixie

Pixie is another fully functional online pixel editor. Although it’s not as well suited to sprite sheet creation as PiskelApp, it’s still very easy to use and is a good choice for anyone looking to let their imagination run wild. The white canvas is the standard starting point for this tool and encourages free hand drawing rather than rigid grid designs.

3. Pixlr

Pixlr is a slightly more advanced pixel editor in comparison to the previous editors with a large range of drawing tools. It offers the same online saving feature as PiskelApp but isn’t as well suited to sprite sheet creation. If you want to avoid the 16-bit style that PiskelApp encourages, check out this tool instead.

4. GrafX2

GrafX2 is a bitmap paint program that includes a number of tools and effects that make it especially useful for designing game graphics, pixel art and sprite sheets. It’s free to download and available on all major desktop platforms

5. GIMP

GIMP is an open source image editor for desktop that can be used for everything from photo manipulation to creating original artwork. You can also use GIMP to create your pixel art and sprite sheets. Although there is a bit of a learning curve for beginners, GIMP is a powerful tool that can cater for almost all image editing needs. You can see a tutorial on setting up GIMP for pixel art here:

6. PyxleOS

If you’re looking for a stripped down tool that lets you focus on creating great pixel art, you should check out PyxleOS. This open source desktop application is specifically designed for the creation of pixel art and it’s extremely easy to pick up and use.

7. LunaPic

8. GraphicsGale

GraphicsGale is an animation graphic editor that’s available in both free and paid options. The free version still allows you to create and save pixel art in png format, which is all you need for your sprite sheet. GraphicsGale is an easy to use tool with a wide range of tools for image creation.

9. Paint.net

Paint.net is free image and photo editing software for Windows. This is a powerful tool with a great community behind it to show you how to create pixel art and sprite sheets. You can find many pixel art tutorials, such as the one below, on YouTube.

10. Make Pixel Art

Make Pixel Art is a fun online tool that lets you start drawing your pixels straight away. Although it might be considered a little basic compared to some of the other tools, it could be your best bet if you need to quickly sketch an idea or prototype an object or character for your game.

If you’d like to follow along with the next section of this post, you can redraw the plant sprite with one of the tools from above or else download it here!

How to Use Sprites with Felgo

Now that you have created a sprite, it’s time to test them on your mobile phone! For displaying sprites you can use Felgo, a cross platform game engine specialized for 2d games. Here is a code example that displays an animated pixel art sprite in Felgo:

Click on the Run button above to open this code in your browser and run it on your mobile device (iOS & Android are supported). You can change the source code in the web editor and see the effect immediatelly on your device with Felgo Live Code Reloading. See this quick video how you can use Felgo Live Reload to speed up your game development process:

Make Your Own Sprites and Use Them With Felgo

And that’s it! Adding a sprite to your game is that simple with the SpriteSequenceVPlay and SpriteVPlay component — just 23 lines of code including newlines for a complete game!

It’s important to set the frameWidth and frameHeight properties to be the size you’d like the sprite to appear in your game. you can use the component properties such as frameCount and frameRate to customize your animation.

Download Felgo Now and Create Pixel Perfect Games!

Do you want to create a game 60% faster than with other game engines like Unity, Corona or Cocos2D?

See Felgo highlights and the tutorials below how you can:

How to make sprites

Step 1 of this guide will be how this software will make spriting easier for you.

Ever tried to work with templates but you keep drawing over them or mesing it up in a different way? Layers is your friend here.

Gamemaker has a well done spiting tool included in it but what it really lacks is layers and that can make spriting difficult, especially the animations.

When you start aseprite open up a template to begin with. in this guide I’ll use the RPGM2k3 charset template. The rpgmaker software has set restrictions on size of each set and the file itself after all.
Although this shows a RPGm2k3 file the same process can be applied to the other makers. The difference is that they are more flexible when it comes to sizes and colours.

Next up you can create a new layer on top of the first one and import the actual character base, I copied one from a different file here.

You can either choose to have these two as a seperate file or to «flatten them» to merge the layers together. just remember to replace the green with the mask colour. The mask colour is the transparent colour that lets you see the layers below.

Not flattening them is actually the easiest but I did it anyway for this guide.

so it’s time to get to work. First of all create yet another new layer.

Make sure that you choose to work on the upper layer.

Simply draw as you usually would, but use the mask (transparent colour) to erase unwanted pixels or you will have lots of yellow/red when you hide the bottom layer.
If you hide the top layer where you work you’ll see what is below
Or you can hide the bottom layer to see what you’ve actually done.

Keep working until you have your charsets complete.

At this point it is a good idea to flatten the layers together or move right ahead to the saving options. Alternatively remove the bottom layer completely. But for this you need to make sure that you have a whole character when the removing is done.

Since I flattened the charset base and coloured background together I had to manually remove the background. This can easily be done with the Replace Colour tool (shift+R). Just make sure that the layer isn’t locked. And look out for a too high tolorance that will include more colours than you want to change.

As you might already know RPGmakers are rather picky when it comes to colour depth. A file should have no more than 256 colours and have a BPP of 8.
So to achieve this we need to make a palette first of all, simply choose «create palette from current sprite» and it will save all the colours of your picture as the palette on the side.

Next up limit the bpp by changing the colour mode from RGB to Indexed.

And all that is left is to save the file as a PNG

If the image is RGBA, it’ll be saved as 24bpp. If it’s indexed (Sprite > Color Mode > Indexed), it will be saved with 8bpp.

How to create a sprite sheet

How to create a sprite sheet

What is a sprite sheet?

Sprite sheets already exist since the first days of computer games. The idea is to create one big image that contains all animations of a character instead of dealing with many single files.

Types of sprite sheets

Sprite strips and animation strips

An animation strip is the simplest form of a sprite sheet: It’s just placing each animation frame next to each other. All frames have the same size, and the animation is aligned in each frame.

Tile sets

A tile set is not different from a sprite sheet: It contains building blocks for game levels. This is an example for a tile map:

It’s easy for a game to retrieve the sprites since they all have the same width and height. The disadvantage is that the sprites waste a lot of memory because of all the additional transparency.

Optimized sprite sheets

The developers of game engines are aware of the wasted memory in the simple sprite sheets and started to optimize the space. The easiest way is to remove the transparency surrounding the sprite and shrink it to the bounding box.

The even more efficient way is to use polygon outlines to cut the sprites.

Trimming a sprite using its bounding rect

Trimming a sprite using a polygon

The game engine now needs additional information to draw the sprite: It needs to know where the sprite is located and how much transparency was removed.

This information can be stored in a data file that is shipped with the sprite sheet. It does not only contain the coordinates but can also contain names for the sprites and other meta information.

With this data file it’s much easier to tell the game engine that you want to draw a Banana sprite — instead of paint the sprite at position (299,192).

This is an example of for an optimized sprite sheet, and it’s data file might look like:

Creating a sprite sheet

The easiest way to create optimized sprite sheets is using TexturePacker. TexturePacker is a tool that specializes in creating sprite sheets. The free version allows you to create sprite strips and tile maps.

Download TexturePacker from here — it’s available for Windows, macOS and Linux:

How to create a sprite strip

Creating a sprite sheet requires nothing more than dragging your sprites onto TexturePacker:

TexturePacker takes all image files in the folder and packs the sheet for you. It supports a big range of image formats including PhotoShop’s psd files and even Flash movies (.swf).

When you are using the free version, you’ll have to change 3 options from the default values. This is no restriction because you need them set to create a sprite strip:

How to create an optimized sprite sheet

Sprite strips are a good start — but also a waste of memory in many cases. If you plan to create a game, you should optimize the sprite sheet.

The first thing is to select the game engine you plan to use. TexturePacker supports 30+ engines and can be extended to support any new one.

Click the Data Format button in the settings. Select the engine you plan to use from the dropdown:

TexturePacker automatically applies optimized default settings for the game engine. It also writes a data file with the required sprite information when you press Publish.

Visit our tutorial section for detailed instructions how to use the sprite sheets for games.

how to make a Sprite

ive used an online srpite service http://spritegen.website-performance.org/ but i want to know how to make them by myself.

How can i save an image that it should be so small but when used on my web site it comes out normal size?

2 Answers 2

Trending sort

Trending sort is based off of the default sorting method — by highest score — but it boosts votes that have happened recently, helping to surface more up-to-date answers.

It falls back to sorting by highest score if no posts are trending.

Switch to Trending sort

Sprites aren’t about making the image itself small, it’s about decreasing filesize by packing several images into one.

Take a look at Yahoo’s icon sprite. Notice that they have all their section icons stacked vertically in one large image. They then use CSS to position the background to only show a small window of the sprite image, thus giving you just the icon.

In the end, it’s up to you how you arrange your sprite. Check out the bottom of Amazon’s sprite.

Either way, hopefully that helps gives you a better idea of the concept of sprites.

CSS sprites are a way to reduce the number of HTTP requests made for image resources referenced by your site. Images are combined into one larger image at defined X and Y coorindates. Having assigned this generated image to relevant page elements the background-position CSS property can then be used to shift the visible area to the required component image.

So there is nothing magical involved: you simply need to pack all your pictures into a single giant image with your favourite graphics tool and insert them as CSS background. Just look at this CSS sprite by Google:

Not the answer you’re looking for? Browse other questions tagged sprite css-sprites or ask your own question.

Related

Hot Network Questions

Subscribe to RSS

To subscribe to this RSS feed, copy and paste this URL into your RSS reader.

By clicking “Accept all cookies”, you agree Stack Exchange can store cookies on your device and disclose information in accordance with our Cookie Policy.

An Introduction to Spritesheet Animation

Spritesheets have been used in games for a long time. Classic games such as Legend of Zelda: A Link to the Past and even modern games like Cut the Rope have used them. In this article, we’ll talk about what spritesheet animation is and how to code it, and we’ll also demonstrate how they can be used in a small game. I’ll be using JavaScript for the code, but you should be able to follow along in any language.

This tutorial is part of a special collaboration between an artist, an animator and a gamedev!

Before we can begin talking about how to code a spritesheet animation, we should first define a few terms: animation, sprite, and spritesheet.

Additional resources you may find useful:

Animation

Back in 1872, Eadweard Muybridge was commissioned to prove whether a horse lifted all four legs off the ground at once when it ran. To do so, he set up a series of cameras along a track and took pictures in quick succession as a horse ran by. This process allowed him to capture 16 pictures of the horse’s run. In one of the pictures, the horse did indeed have all four legs off the ground.

Muybridge’s «The Horse in Motion» photos with the first photo removed.

Muybridge later repeated the experiment and placed each photo onto a device that could project the photos in rapid succession to give the illusion of the horse running, creating the first movie projector.

The process of changing images in quick succession to give the illusion of movement is called animation.

Sprite

A sprite is a single graphic image that is incorporated into a larger scene so that it appears to be part of the scene.

Sprites are a popular way to create large, complex scenes as you can manipulate each sprite separately from the rest of the scene. This allows for greater control over how the scene is rendered, as well as over how the players can interact with the scene.

It is not uncommon for games to have tens to hundreds of sprites. Loading each of these as an individual image would consume a lot of memory and processing power. 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.

Spritesheet

When you put many sprites into a single image, you get a spritesheet.

Spritesheets are used to speed up the process of displaying images to the screen; It is much faster to fetch one image and display only a part of that image than it is to fetch many images and display them.

Spritesheet animation is nothing more than taking a spritesheet and changing which sprite is rendered in quick succession to give the illusion of movement, much like a film projector displaying a movie.

Parts of a Spritesheet

Spritesheets are made up of two parts: frames and cycles

A frame is a single image (or sprite) from the spritesheet. Going back to the Muybridge’s horse example, each picture of the horse in the image would be a frame.

When the frames are put in an order that creates a continuous movement, it creates a cycle.

Putting the photos of the horse in the order that they were taken produces a «run» cycle since the horse is running (as opposed to a «walk» or «idle» cycle).

Coding Spritesheet Animations

There are three parts to coding a spritesheet animation:

Creating the Image

We’ll start by creating the function (or class) that will handle our spritesheet animation. This function will create the image and set its path so that we can use it to draw.

Since different spritesheets can have different frame sizes, we’ll need to pass the frame width and height so that we can accurately calculate how many frames are in a row and column of the image. We’ll use this information later to draw the animation to the screen.

Updating the Image

To update the spritesheet animation, all we have to do is change which frame we will draw. Below is the spritesheet divided into each of its frames and numbered.

At every frame of the game, we’ll update the spritesheet. However, we don’t want the animation to switch to the next frame every frame, so we need to tell our spritesheet how many frames to wait before transitioning.

It is important to note that not every spritesheet has a sprite in every available frame (such as the image of Muybridge’s «The Horse in Motion»). If we were to try to animate our spritesheet with an empty frame, there would be a blip in the animation every time the blank frame is drawn to the screen.

To compensate for this, we will also tell the spritesheet what the last frame number is, so that we don’t animate empty frames.

The modulo operator for the counter prevents integer overflow.

Drawing the Image

Drawing an image from a spritesheet works in exactly the same way as drawing an image from a tile map.

We calculate the row of the image we want to draw by taking the modulo of the current frame and the number of frames per row. We calculate the column by dividing the current frame by the number of frames per row.

With the spritesheet function in place, we can now use it to create a spritesheet animation:

Multiple Cycles in One Spritesheet

The above code will work for any spritesheet containing one cycle. However, it is not uncommon for a spritesheet to hold multiple cycles, meaning that there will be multiple animations in a single spritesheet.

We will need to change how our spritesheet works in order to handle multiple animations from a single spritesheet.

Creating the Image

Since the image remains the same between animations, we will divide our spritesheet into two functions: one for the image and one for each animation from the spritesheet.

A spritesheet will hold the information about the image and the frame sizes.

Updating and Drawing the Image

An animation will be in charge of updating and drawing the spritesheet.

Since the spritesheet contains more frames than any single animation will need, we’ll need to know which frame number to start and end the animation. Using this information, we’ll create an array of frame numbers so that we can use currentFrame to access the correct frame number.

Putting the Spritesheet to Use

With the animation ready to handle any spritesheet, we can use it to make a simple Canabalt-style infinite runner:

Hit Space to jump.

You can find the full source code for this in our GitHub repo. What’s your high score?

Extra Resources

If you’re looking for creative game graphics, we have affordable Game Sprites and Sheets on GraphicRiver, which may be just the solution your game needs.