Sprite Sheet Formats and $/!

Discussion in 'Resource Support' started by mlogan, Jun 16, 2016.

  1. mlogan

    mlogan Global Moderators Global Mod

    Messages:
    13,802
    Likes Received:
    7,617
    Location:
    Texas
    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:


    [​IMG]




    The animations work in the following ways:



    [​IMG]




    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.





    [​IMG]





    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.





    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.


    [​IMG]





    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.


    [​IMG]





    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.


    [​IMG]





    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.


    [​IMG]






    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.)


    [​IMG]


     
    Last edited: Aug 4, 2019
    #1
  2. Maidlyn

    Maidlyn Secretly a Mermaid Veteran

    Messages:
    354
    Likes Received:
    114
    Location:
    USA
    First Language:
    English
    Primarily Uses:
    RMMV
    How do I make characters that are two tiles high fit into the 'actor images'?
     
    #2
  3. mlogan

    mlogan Global Moderators Global Mod

    Messages:
    13,802
    Likes Received:
    7,617
    Location:
    Texas
    First Language:
    English
    Primarily Uses:
    RMMV
    If by actor image, you mean the sheet with 8 characters on it, it's explained in the last section.
     
    #3
  4. Maidlyn

    Maidlyn Secretly a Mermaid Veteran

    Messages:
    354
    Likes Received:
    114
    Location:
    USA
    First Language:
    English
    Primarily Uses:
    RMMV
    @mlogan Sorry, I was fairly new to RPG Maker when I posted that. I got it figured out now.
     
    #4
  5. RetroBoy

    RetroBoy Veteran Veteran

    Messages:
    378
    Likes Received:
    259
    First Language:
    English
    What about giant sprites?


    Like the Dragon and the Boss Monsters?


    How does sizing and scaling for them work?
     
    #5
  6. mlogan

    mlogan Global Moderators Global Mod

    Messages:
    13,802
    Likes Received:
    7,617
    Location:
    Texas
    First Language:
    English
    Primarily Uses:
    RMMV
    The formatting works the same for all sprites, regardless of size.


    The difference would be, you would need to think of collision scripts/plugins for them, but as far as actually making them and getting them to display correctly - it's the same process.
     
    #6
    RetroBoy likes this.
  7. Shaz

    Shaz Veteran Veteran

    Messages:
    37,714
    Likes Received:
    11,421
    Location:
    Australia
    First Language:
    English
    Primarily Uses:
    RMMV
    Also remember, if you make a sprite larger than the default grid size (32x32 for XP, VX and Ace, 48x48 for MV), when you use that sprite on an event in the editor you will only see as much as can be contained on a single tile.  But it will show the full sprite when you play the game.


    The other thing about giant sprites is that funny things happen to them when you walk in front of tiles with a star passage setting (like the tops of trees).  If the character moves in front of the tile, the tile will appear in front, sometimes chopping off part of the sprite.  A partial fix for this in MV is my conversion of Neon Black's Large Sprite fix, but Victor and Yanfly have both written plugins that change mapping that should both overcome the problem (Victor's plugin lets you use tile priorities similar to XP, and Yanfly has a Doodads plugin that keeps map elements as a complete unit rather than breaking them up into tile-sized portions).  The only fix in Ace is Neon Black's script.
     
    Last edited by a moderator: Jan 12, 2017
    #7
    RickRiffs69 and mlogan like this.
  8. Vincent Chu

    Vincent Chu Writer and translator Veteran

    Messages:
    177
    Likes Received:
    545
    First Language:
    English
    Primarily Uses:
    RMMV
    My goldfish memory vaguely recalls watching a youtube video by Echo607 on making taller sprites.
     
    Last edited: Oct 3, 2017
    #8
  9. bhindi1224

    bhindi1224 NOT Indian Okra Veteran

    Messages:
    295
    Likes Received:
    167
    First Language:
    English
    Primarily Uses:
    RMMV
    This post in particular is helpful to me understanding the formats RPG Maker MV uses.

    @Vincent Chu - I'm loving watching echo607 on youtube. I'm glad to hear she's back after being gone a long time. If i'm correct, the video you're talking about is here: click here.
     
    #9
    mlogan likes this.
  10. Marquise*

    Marquise* Veteran Veteran

    Messages:
    4,650
    Likes Received:
    7,995
    First Language:
    French-Canadian
    I taped the numbers on my computer. :3 You know, in case I decide to make something more normal than... Monsters? LOL

    Thank-you!
     
    #10
  11. Vincent Chu

    Vincent Chu Writer and translator Veteran

    Messages:
    177
    Likes Received:
    545
    First Language:
    English
    Primarily Uses:
    RMMV
    I know it's been said that sprites can be any size but what is the max size for MV. I mean surely it can't be bigger than a 256 by 256 map?
    Also, I've been wondering, can a sprite image be a big rectangular house with gardens and fences that stays still?
     
    #11
    Marquise* likes this.
  12. Sharm

    Sharm Pixel Tile Artist Veteran

    Messages:
    12,615
    Likes Received:
    10,300
    Location:
    USA
    First Language:
    English
    Primarily Uses:
    N/A
    I think the upper limit might be slowdown, haven't tried it, but there's no point in having something bigger than your screen. Also, yes, it can be a full house and yard that sits still, but interactions with the main sprite get strange. It's not a good alternative to parallax or doodads.
     
    #12
    Marquise* and Vincent Chu like this.
  13. Vincent Chu

    Vincent Chu Writer and translator Veteran

    Messages:
    177
    Likes Received:
    545
    First Language:
    English
    Primarily Uses:
    RMMV
    About interactions getting strange, can I not just set most of the tiles impassible and then also allow the player to talk/trigger the house to give a show text and show choice event like Go inside? Yes/No if Yes teleport player etc?
     
    #13
    Marquise* likes this.
  14. Sharm

    Sharm Pixel Tile Artist Veteran

    Messages:
    12,615
    Likes Received:
    10,300
    Location:
    USA
    First Language:
    English
    Primarily Uses:
    N/A
    Make a sample image and try it out, you'll see what I mean.
     
    #14
    Marquise* and Vincent Chu like this.
  15. Vincent Chu

    Vincent Chu Writer and translator Veteran

    Messages:
    177
    Likes Received:
    545
    First Language:
    English
    Primarily Uses:
    RMMV
    I'd like to except I still don't really know how to use GIMP to format my houses into working sprite(sheets). Can someone please explain how?
     
    #15
  16. Sharm

    Sharm Pixel Tile Artist Veteran

    Messages:
    12,615
    Likes Received:
    10,300
    Location:
    USA
    First Language:
    English
    Primarily Uses:
    N/A
    Aaand we're officially derailed. Please start a new thread.
     
    #16
  17. Rishi Raj Jain

    Rishi Raj Jain Pokemon MV Maker Veteran

    Messages:
    204
    Likes Received:
    46
    Location:
    India
    First Language:
    English
    Primarily Uses:
    RMMV
    May I ask how the spritesheet works:
    Left - Center - Right - Center - Left
    Or
    Left - Center - Right - Left
    Actually I'm making a Hopping/Bouncing Character Spritesheet, which consist of Takeoff - Midair - Landed.
    But I'm not sure of the Positioning.
     
    #17
  18. mlogan

    mlogan Global Moderators Global Mod

    Messages:
    13,802
    Likes Received:
    7,617
    Location:
    Texas
    First Language:
    English
    Primarily Uses:
    RMMV
    Center - Right - Center - Left - Center

    :)
     
    #18
    Rishi Raj Jain likes this.
  19. Rishi Raj Jain

    Rishi Raj Jain Pokemon MV Maker Veteran

    Messages:
    204
    Likes Received:
    46
    Location:
    India
    First Language:
    English
    Primarily Uses:
    RMMV
    Then it will be very hard to set a Bouncing Character, as the Frames are Landed, Takeoff, Midair. Where Landed has to be in the Center (idle Frame)

    Can you suggest me something.
     
    #19
  20. Shaz

    Shaz Veteran Veteran

    Messages:
    37,714
    Likes Received:
    11,421
    Location:
    Australia
    First Language:
    English
    Primarily Uses:
    RMMV
    Check the animation on quick events - doors, chests. They go by rows rather than columns, so you can have 4 frames that loop if needed.

    If you need more help with that, I suggest starting your own thread in the relevant Support forum for the engine you're using, as further discussion on that would be off-topic here.
     
    #20
    Marquise* likes this.

Share This Page