PNG SpriteSheet Size

Hi,

I’m new to Synfig and when following the official tutorials after completing the last one I wanted to see how an exported spritesheet would look. I saw that the result was way beyond what I expected. The spritesheet was HUGE! Is there a way to control the size. I’d like to create a spritesheet for importing into GameMaker Studio, but a simple walk animation much like in the official tutorials is to large for GameMaker Studio to handle and can’t be imported.

Any help would greatly be appreciated.

Hay CB40,
I’m new to Synfig too, but maybe I can look and help. Which tutorial do you mean? Can you link it, please?
I’m looking at this one right now: https://www.youtube.com/watch?v=PwzNL5nZDqI

I also don’t know GameMaker, I use the Phaser-Framework (HTML5,JS) for Games. So my question, do you need an XML or JSON file for this too?

Greetz

Hi, I’m referring to the Official Tutorial on the Synfig website, when you click “Training Course” and pay what you think is fair to access the content. I finished the last video in that course regarding creating a walk animation. I unfortunately even in the docs on the the website could not find much information besides very basic information regarding spritesheets. The problem is when I exported as png-spritesheet, the result was a spritesheet that was something like 4000x200 for example (I don’t remember the exact size right now). It was just way to large for me to import into GameMaker Studio.

Hi,
a little demo explanation about spritesheets animation :slight_smile:
For this I will create a rotating, color changing star, 64x64, 120 frames.

  • First you must define the size of your sprite (and the duration).
    For example i’m using 64x64
    Let’s change Canvas’ size in menu Canvas/Properties (F8)

  • Create your animation

  • Render your spritesheet File/Render (F9)
    Select png-spritesheet as Target/target
    On the right there is the parameters button, click on it
    Uncheck “Add to an existing file”
    Then select you direction: horizontal or vertical

Your spritesheet could be linear, so all the sprites in a row or a columns. It means you define the number of frames equal to the ones of your animation.
OR
Your spritesheet could be a grid. Define a max number of frames per row or columns, it will automatically expand.
In my example, I set Horizontal/12, with 121 frames there is one star alone down-left.

When you render, it produces your png-spritesheet :slight_smile:


TestStarSprite.sifz (1.01 KB)

Your can export the frames and join them with montage of imagemagick
imagemagick.org/Usage/montage/

Thanks for the demo. I loaded and tried it out. How did you get the multiple rows of 12? I saw that Image Span was set to 12 under image Area and that Image span was checked under the Other tab. When I clicked on Parameters, I also noticed that Direction was set to horizontal, but Rows is set to 1 and can’t be changed and Columns is set to 121. The rendered file is then one long row of each frame with a image dimensions of 7744 x 64.

That sheet was not properly intalled as the size was not acceptance

Oh I get it now. You can make it into a grid easy. Just set it horizonal then decrease number of columns and the number of rows will auto expand. And you have a grid.