onlinebitmaptools logo

Bitmap sprite animator

World's simplest bitmap tool

This is a free browser-based utility that creates sprite animations from bitmap sprite sheets or bitmap sprite strips. The input sprite strip can be either horizontal or vertical and you can customize the frame size and specify the starting position of the first frame. Additionally, you can change the background color of the sprites, control the playback speed, choose which frames get animated, and set the movement direction of the animation. Created by graphics designers from team Browserling.
announcement check out our new project!
We just created something new for all science fans – SCIURLS – a neat science news aggragator. Check it out!
Sprite Size and Position
Sprite width.
Sprite height.
Start point X.
Start point Y.
Sprite numbers to skip.
Input and Output Background
Using these options you can change the background color of all animation frames.
Background color of input sprites. (If this field is left blank then the background isn't changed.)
Input background color tone deviation in percentage. (0% – only specified color, 10% – more color shades.)
The new background color.
Animation and Zoom
Play the bitmap animation.
Frame refresh rate (in milliseconds). (For example, 40ms = 25fps.)
Animation direction.
Animation zoom level. (100% – original sprite size.)
Bitmap sprite animator tool What is a bitmap sprite animator?
This online program animates bitmap images (ending with extension .bmp) that contain sprites. A sprite is a single drawing that contains one frame of an animation in a series of drawings that contains the full animation. A sprite sheet is an image that contains many sprites laid out one after another in one file and it may contain multiple animations. Sprite sheets are often used in computer games as game character animations can be saved in a single file rather than several files. All frames that are part of the same animation must be the same size and placed next to each other vertically or horizontally. This sequence of sprites is called an animation strip. When you load a sprite sheet in this tool, it creates an animation by running through the frames in an animation strip. It quickly displays one sprite after another, creating a flipbook-like illusion of character movement. The animation frames can move from left to right, right to left, top to bottom, or bottom to top. Depending on the location and layout of the sprites in your sheet, you can change the direction of the animation in the options. You can also adjust the width and height of a frame and specify the starting position of the animation strip via x and y coordinates (upper left corner has coordinates 0, 0). To set the input bitmap in motion, enable the "Play the Animation" option. Using the frame speed option, you can adjust the duration of one frame (in milliseconds). The zoom option lets you zoom in and zoom out the sprites. By default, the zoom level is 100% but you can make the animation to be twice as small by setting it to 50% or twice as large by setting it to 200%. If the animation is paused, all sprite frames in a sprite strip are highlighted and numbered in the input screen. If you don't want to animate any of the frames, you can skip them by entering their numbers in the skip-sprite option. For example, if you enter "2" in this option, then the second sprite frame will be skipped. If you need to skip multiple sprites, then separate them with a comma (for example, "5, 7, 8, 9") or using a range (for example, "5-9"). You can also add or change the sprite background color in the animation. For example, if the sprite sheet has no background (sprite sheet is transparent), then you can add a background color to it by entering the color "transparent" in the input-background color field and entering the new color in the output-background color field. To change an existing background in all sprites, enter the color of the current background color and the new background color in the options. Optionally, you can set the percentage of color tone deviation from the given color. For example, if the background is white and a little bit gray, then you can enter 10% in this option and it will match both white and 10% of gray colors. The colors can be entered using their names, hex codes, and RBG and RGBA codes.
Bitmap sprite animator examples Click to use
Genie of the Lamp
This is a bitmap animation of Genie from the second mission of our favorite game Metal Slug X. The bitmap sheet contains a set of twelve animation sprites in which the Genie comes out of a magic lamp. We play the animation at 200 milliseconds (0.2 seconds) per frame, which is 5 frames per second. The frames in the animation strip go from left to right. The starting position of the first sprite is x = 0, y = 0 (upper left corner of the bmp). The dimensions of one frame are 62 by 103 pixels and the size of the output animation is twice as large (zoom is set to 200%).
This is a bitmap animation of Genie from the second mission of our favorite game Metal Slug X. The bitmap sheet contains a set of twelve animation sprites in which the Genie comes out of a magic lamp. We play the animation at 200 milliseconds (0.2 seconds) per frame, which is 5 frames per second. The frames in the animation strip go from left to right. The starting position of the first sprite is x = 0, y = 0 (upper left corner of the bmp). The dimensions of one frame are 62 by 103 pixels and the size of the output animation is twice as large (zoom is set to 200%).
This is a bitmap animation of Genie from the second mission of our favorite game Metal Slug X. The bitmap sheet contains a set of twelve animation sprites in which the Genie comes out of a magic lamp. We play the animation at 200 milliseconds (0.2 seconds) per frame, which is 5 frames per second. The frames in the animation strip go from left to right. The starting position of the first sprite is x = 0, y = 0 (upper left corner of the bmp). The dimensions of one frame are 62 by 103 pixels and the size of the output animation is twice as large (zoom is set to 200%).
Required options
These options will be used automatically if you select this example.
Sprite width.
Sprite height.
Start point X.
Start point Y.
Sprite numbers to skip.
Background color of input sprites. (If this field is left blank then the background isn't changed.)
Input background color tone deviation in percentage. (0% – only specified color, 10% – more color shades.)
The new background color.
Play the bitmap animation.
Frame refresh rate (in milliseconds). (For example, 40ms = 25fps.)
Animation direction.
Animation zoom level. (100% – original sprite size.)
Sonic the Hedgehog
In this example, we animate a sprite sheet made by Shinbs. The Sonic sprite sheet contains four horizontal animation strips. We decided to animate the second strip where Sonic is running. As the size of one sprite is 40px by 50px, we move the starting frame to the position (10, 50). There is extra space at the end of the sprite strip so we remove the two empty frames at the end by entering the frame numbers 9 and 10 in the sprites to skip field. We also change the background color of the animation by replacing the input background hex color #cedde3 (gray) with the new color #ffce38 (yellow). We play the animation at 10fps by giving a duration of 100ms to each frame and keep the zoom level at 2x.
In this example, we animate a sprite sheet made by Shinbs. The Sonic sprite sheet contains four horizontal animation strips. We decided to animate the second strip where Sonic is running. As the size of one sprite is 40px by 50px, we move the starting frame to the position (10, 50). There is extra space at the end of the sprite strip so we remove the two empty frames at the end by entering the frame numbers 9 and 10 in the sprites to skip field. We also change the background color of the animation by replacing the input background hex color #cedde3 (gray) with the new color #ffce38 (yellow). We play the animation at 10fps by giving a duration of 100ms to each frame and keep the zoom level at 2x.
In this example, we animate a sprite sheet made by Shinbs. The Sonic sprite sheet contains four horizontal animation strips. We decided to animate the second strip where Sonic is running. As the size of one sprite is 40px by 50px, we move the starting frame to the position (10, 50). There is extra space at the end of the sprite strip so we remove the two empty frames at the end by entering the frame numbers 9 and 10 in the sprites to skip field. We also change the background color of the animation by replacing the input background hex color #cedde3 (gray) with the new color #ffce38 (yellow). We play the animation at 10fps by giving a duration of 100ms to each frame and keep the zoom level at 2x.
Required options
These options will be used automatically if you select this example.
Sprite width.
Sprite height.
Start point X.
Start point Y.
Sprite numbers to skip.
Background color of input sprites. (If this field is left blank then the background isn't changed.)
Input background color tone deviation in percentage. (0% – only specified color, 10% – more color shades.)
The new background color.
Play the bitmap animation.
Frame refresh rate (in milliseconds). (For example, 40ms = 25fps.)
Animation direction.
Animation zoom level. (100% – original sprite size.)
Walking Cat
In this example, we create an animation from a vertical sprite strip. We set the frame size to 400×200 pixels, set the direction of frames to be from top to bottom, starting from the zero coordinate. We animate all frames except the last one (13th frame) and set the refresh rate to 100 milliseconds for each sprite. We also add a blue background to the walking cat animation by entering the color "transparent" in the input background option and the color "RGB(56, 153, 255)" in the output background color. The sprites are kept at their original size (zoom 100%).
In this example, we create an animation from a vertical sprite strip. We set the frame size to 400×200 pixels, set the direction of frames to be from top to bottom, starting from the zero coordinate. We animate all frames except the last one (13th frame) and set the refresh rate to 100 milliseconds for each sprite. We also add a blue background to the walking cat animation by entering the color "transparent" in the input background option and the color "RGB(56, 153, 255)" in the output background color. The sprites are kept at their original size (zoom 100%).
In this example, we create an animation from a vertical sprite strip. We set the frame size to 400×200 pixels, set the direction of frames to be from top to bottom, starting from the zero coordinate. We animate all frames except the last one (13th frame) and set the refresh rate to 100 milliseconds for each sprite. We also add a blue background to the walking cat animation by entering the color "transparent" in the input background option and the color "RGB(56, 153, 255)" in the output background color. The sprites are kept at their original size (zoom 100%).
Required options
These options will be used automatically if you select this example.
Sprite width.
Sprite height.
Start point X.
Start point Y.
Sprite numbers to skip.
Background color of input sprites. (If this field is left blank then the background isn't changed.)
Input background color tone deviation in percentage. (0% – only specified color, 10% – more color shades.)
The new background color.
Play the bitmap animation.
Frame refresh rate (in milliseconds). (For example, 40ms = 25fps.)
Animation direction.
Animation zoom level. (100% – original sprite size.)
All bitmap tools
Didn't find the tool you were looking for? Let us know what tool we are missing and we'll build it!
Quickly convert a BMP file to the base-64 encoding.
Quickly convert base-64 encoding to a BMP file.
Quickly convert an opaque bitmap to a transparent bitmap.
Quickly create a bitmap file from random colorful pixels.
Quickly change the width/height of a bitmap.
Quickly animate a bitmap sprite sheet.
Coming soon These bitmap tools are on the way
Edit and Draw Bitmaps
Create and edit bitmaps in your browser.
Change Bitmap Colors
Substitute one color for another in a bitmap.
Change Bitmap Depth
Change the number of bits per pixel of a bitmap.
Blur a Bitmap
Blur areas of a bitmap.
Sharpen a Bitmap
Sharpen any bitmap area.
Pixelate a Bitmap
Increase pixel size in any bitmap area.
Convert a Bitmap to Grayscale
Leave only grayscale tones in a bitmap.
Duplicate a Bitmap
Make copies of bitmaps and paste them together.
Rotate a Bitmap
Rotate a bitmap by any angle.
Crop a Bitmap
Select a region from a bitmap.
Skew a Bitmap
Skew a bitmap by an arbitrary angle.
Shift a Bitmap
Shift a bitmap to the left or right.
Add a Border to a Bitmap
Add a border around or inside of a bitmap.
Flip a Bitmap Vertically
Turn a bitmap upside-down.
Flip a Bitmap Horizontally
Make a mirror copy of a bitmap.
Convert Bitmap to Webp
Convert a BMP to a Webp.
Convert Webp to Bitmap
Convert a Webp to a BMP.
Convert Bitmap to PNG
Convert a BMP to a PNG.
Convert PNG to Bitmap
Convert a PNG to a BMP
Convert Bitmap to JPEG
Convert a BMP to a JPG.
Convert JEPG to Bitmap
Convert a JPG to a BMP.
Convert Bitmap to BPG
Convert a BMP to a BPG.
Convert BPG to Bitmap
Convert a BPG to a BMP.
Convert GIF to Bitmap
Save GIF frames as BMP images.
Convert BMP to GIF
Convert a bitmap to a single-frame GIF.
Convert Bitmap to Data URI
Create a Data URL scheme of a bitmap.
Convert Data URI to Bitmap
Convert a Data URL scheme back to a bitmap image.
Destroy a BMP
Destroy parts of a bitmap and make it glitchy.