- Joined
- Mar 18, 2012
- Messages
- 14,897
- Reaction score
- 8,250
- First Language
- English
- Primarily Uses
- RMMV
We get a lot of questions about how to correctly format custom sprites, what sizes they can be, and what the $ and ! mean in front of a sprite sheet name. Hopefully, this guide will help answer some of those questions.
What is a sprite or character sheet?
A sprite or character sheet is simply the graphic image that has the animation frames for a character or characters. They may also show special characters for objects with movement such as doors, levers or chests, or special effects such as flames, fountains or sparkles.
Where do I find these sheets?
Sprite sheets can be found in the graphics folder named characters. If you want to add new sprite sheets, this is where those files will go. You can simply add them to the Characters folder in your project’s files or use the resource manager to import them.
Why are there different kinds of sprite sheets?
When you open the character folder, you will see that some sprite sheets have different symbols at the beginning of the name.
Files with a $ at the beginning of the name (ex. $sprite.png) are typically used to show the animation for a single character. A single character sheet contains a total of 12 frames or cells, arranged in 4 rows and 3 columns. The $ at the beginning of the file tells the program to divide the total size of the image into 4 equal rows and 3 equal columns, like this:
The animations work in the following ways:
Files without a special character (ex. SpriteSheet.png) show all the animation frames for 8 characters, arranged into two rows of 4. This means there will be 12 individual frames across and 8 up and down.
Last, per the MV help manual, characters will be shown 6 pixels above tile so that they appear more natural when on top of buildings. To prevent this for certain items such as doors, a ! is added to the beginning of a file name (ex. !door.png). It will also prevent bush transparency on these files. The ! may be used along with the $ (ex. !$singledoor.png).
Files with a $ at the beginning of the name (ex. $sprite.png) are typically used to show the animation for a single character. A single character sheet contains a total of 12 frames or cells, arranged in 4 rows and 3 columns. The $ at the beginning of the file tells the program to divide the total size of the image into 4 equal rows and 3 equal columns, like this:
The animations work in the following ways:
Files without a special character (ex. SpriteSheet.png) show all the animation frames for 8 characters, arranged into two rows of 4. This means there will be 12 individual frames across and 8 up and down.
Last, per the MV help manual, characters will be shown 6 pixels above tile so that they appear more natural when on top of buildings. To prevent this for certain items such as doors, a ! is added to the beginning of a file name (ex. !door.png). It will also prevent bush transparency on these files. The ! may be used along with the $ (ex. !$singledoor.png).
How does all of this help me make sprites?
One of the most common errors seen when new users create their own character graphics is not properly formatting them for a sprite sheet.
Standard VX/Ace characters are 32 pixels x 32 pixels. For MV the standard is 48 x 48. However, sprites can be most any size, they just need to be formatted properly.
When you are making a sprite character sheet, you have to keep in mind that the program will simply divide the total image size. It cannot detect the edges of your drawings. If your final sprite sheet is 120 pixels wide, it will divide that by 3, creating frames that are 40 pixels wide. For the height it will divide the height of the full image by 4.
Standard VX/Ace characters are 32 pixels x 32 pixels. For MV the standard is 48 x 48. However, sprites can be most any size, they just need to be formatted properly.
When you are making a sprite character sheet, you have to keep in mind that the program will simply divide the total image size. It cannot detect the edges of your drawings. If your final sprite sheet is 120 pixels wide, it will divide that by 3, creating frames that are 40 pixels wide. For the height it will divide the height of the full image by 4.
So what?
This means that if your animation frames are not evenly spaced, you character may get cut off.
For example, let’s say I wanted to make a character that was a bouncing ball. Because it stretches as it goes up, the width and height change. I need to make sure that I am properly spacing each frame so that the whole sheet can be divided evenly.
Here, I have not made sure I have equal sized frames and that the animation frames are evenly positioned within them. As you can see, the program is still dividing my total sheet into 12 equal parts, thus cutting my images into pieces.
What I’m going to do is find the width of my widest pose, which in this case is the first one. The width is 40, but I want a one-pixel border on each side, so I’m bumping it up to 42. Now I will take 42 and multiply it by 3 to get the total width of my sprite sheet, which is 126.
For the height, I’m going to use the last pose, the tallest. It is 53. With a one-pixel border that makes it 55. For the height of my sprite sheet, I multiply 55 x 4 to get 220 for my total sheet height. In Gimp, I am going to create a new sheet that is 126 x 220. I make sure to set the background to transparency.
I’m also going to set my grid to a width of 42 and a height of 55. Last I’m going turn on the grid. Now I can see how RPG Maker will divide the sheet and can position my sprite frames properly into the sheet.
I’m going to make sure that each frame is centered in the box, otherwise, my animation will look jerky or bouncy. For my ball, the position relative to the bottom of the cell will change to give it an appearance of moving upwards.
Your last step will be to make sure to save (export in Gimp) the file with a $ in front of the name – ex. $BouncyThing.png.
You can see now that with proper spacing/positioning and equal sized cells, the editor is correctly dividing my character sheet.
For example, let’s say I wanted to make a character that was a bouncing ball. Because it stretches as it goes up, the width and height change. I need to make sure that I am properly spacing each frame so that the whole sheet can be divided evenly.
Here, I have not made sure I have equal sized frames and that the animation frames are evenly positioned within them. As you can see, the program is still dividing my total sheet into 12 equal parts, thus cutting my images into pieces.
What I’m going to do is find the width of my widest pose, which in this case is the first one. The width is 40, but I want a one-pixel border on each side, so I’m bumping it up to 42. Now I will take 42 and multiply it by 3 to get the total width of my sprite sheet, which is 126.
For the height, I’m going to use the last pose, the tallest. It is 53. With a one-pixel border that makes it 55. For the height of my sprite sheet, I multiply 55 x 4 to get 220 for my total sheet height. In Gimp, I am going to create a new sheet that is 126 x 220. I make sure to set the background to transparency.
I’m also going to set my grid to a width of 42 and a height of 55. Last I’m going turn on the grid. Now I can see how RPG Maker will divide the sheet and can position my sprite frames properly into the sheet.
I’m going to make sure that each frame is centered in the box, otherwise, my animation will look jerky or bouncy. For my ball, the position relative to the bottom of the cell will change to give it an appearance of moving upwards.
Your last step will be to make sure to save (export in Gimp) the file with a $ in front of the name – ex. $BouncyThing.png.
You can see now that with proper spacing/positioning and equal sized cells, the editor is correctly dividing my character sheet.
Full Sprite Sheet (8 Characters)
If you are making multiple characters that all have the same frame size, you can add them to one full sheet. If I want to make the Bouncy Thing in multiple colors, I can add them all to one sheet. The width of my full sheet size will be my single character sheet width size x 4 (126 x 4 = 504) and the height will be my character sheet height x 2 (220 x 2 = 440). Then I can just copy the individual characters into the full sheet. (In Gimp, I like to turn on “Snap to Grid” for this action in both the file I am copying from and to. It makes it easier to make sure I am getting everything and am positioning it correctly into the new sheet.)
Last edited:
