Best method - re-size and align images after animation "Spriter"

brett-nortonbrett-norton Member, BASIC Posts: 64

Hi all,

Just wondering what method to add to my workflow for when i have my key frames from spriter. The different animations have different image sizes and dont align with each other what is the best method to correct this?

Or am i simply missing something?

Thanks in advance.

Comments

  • SocksSocks London, UK.Member Posts: 12,822
    edited May 2017

    @brett-norton said:
    The different animation/ [frames] have different image sizes and dont align with each other . . .

    There are two ways, the first is pretty convoluted, resource hungry, painfully slow and inflexible, and that would be to have GameSalad resize both the width and height, X position and Y position for every frame of your image sequence at runtime.

    The second would be to change the canvas size of your image sequence so all the frames are the same size.

  • SocksSocks London, UK.Member Posts: 12,822
    edited April 2017

    @adent42 and @ForumNinja

    It would be fantastically useful - in numerous situations - to be able to read an image asset's pixel size, for example you could size an actor to match the size of an image . . . GameSalad, of course, already does this when dragging an image into the Actors pane, but it would be great if users could access these numbers.

  • ToqueToque Member Posts: 1,187

    I resize them to be all the same. It can be hard if the entire image changes in every frame.

    I try to keep something the same in every frame so I can align them.

  • brett-nortonbrett-norton Member, BASIC Posts: 64

    Ok so i have been inputting a frame into adobe illustrator and creating a canvas large enough to contain the biggest frame then making them align that way. Is this a good method then? I was hoping for a better method.

    Im suprised sprite doesnt have an anchor point to self alighn them that would be great.

  • brett-nortonbrett-norton Member, BASIC Posts: 64

    DOES THIS SOUND LIKE THE SOLUTION??

    **Step 7) (Aligning the assembled key-frame to the canvas crosshair) Now that your first key frame is properly assembled, you might want to make sure that the entire frame (all sprites collectively) is aligned to the “canvas crosshair” in a manner that will be most useful for game engines. The point where the vertical and horizontal lines bisect the canvas represent coordinate 0,0 for the frame. If you tell a game engine to draw your frame to the screen at a given coordinate, it will place the animation based on this 0,0 point as it's pivot point or “hotspot”. In the case of this example, for a platformer character, you'd likely want the 0,0 coordinate (canvas cross-hair) centered near the feat of the character. To move all sprites at once you can press Cntrl+A to instantly select all objects on the canvas or left click and drag a selection rectangle to select all of the objects. You can then use the arrow keys or click and drag on any of the selected objects to move everything at once to properly align the frame

  • ToqueToque Member Posts: 1,187
    edited May 2017

    @brett-norton said:
    Ok so i have been inputting a frame into adobe illustrator and creating a canvas large enough to contain the biggest frame then making them align that way. Is this a good method then? I was hoping for a better method.

    Im suprised sprite doesnt have an anchor point to self alighn them that would be great.

    That's how I do it. I know no other way.

    I make the canvas size set to the largest sized image needed.

    Using layers can help too. Each frame on a different layer.

  • brett-nortonbrett-norton Member, BASIC Posts: 64

    Ahh yea layers would help hugely.. adobe tends to put out odd random number out now and again like 512x513 what would be the next step run it through another program to set them all 512x512 and what about optimizing file sizes what software do you use?

  • SocksSocks London, UK.Member Posts: 12,822

    @brett-norton said:
    Ahh yea layers would help hugely.. adobe tends to put out odd random number out now and again like 512x513 what would be the next step run it through another program to set them all 512x512 and what about optimizing file sizes what software do you use?

    Can you draw a square around your animation within Spriter ?

  • brett-nortonbrett-norton Member, BASIC Posts: 64

    Not that im aware of as of yet whats the science behind doing that?

  • SocksSocks London, UK.Member Posts: 12,822

    @brett-norton said:
    Not that im aware of as of yet whats the science behind doing that?

    What is preventing you from drawing straight lines ?

  • brett-nortonbrett-norton Member, BASIC Posts: 64

    Im unsure what you mean.. could you explain a little

  • SocksSocks London, UK.Member Posts: 12,822

    @brett-norton said:
    Im unsure what you mean.. could you explain a little

    I was simply asking if you were able to draw a square around your animation within Spriter, I'm not sure how else to describe what I mean . . . like I say I don't know Spriter at all or how it works.

  • brett-nortonbrett-norton Member, BASIC Posts: 64

    I get what you mean, i guess i could put an X or an image to the side of the animation as a reference point to alighn the images up and then just cut that out from the images in illustrator.. i will give that a try tommorow.

    Thanks for the help again guys. Appreciate it.

  • ToqueToque Member Posts: 1,187
    edited May 2017

    @brett-norton said:
    Ahh yea layers would help hugely.. adobe tends to put out odd random number out now and again like 512x513 what would be the next step run it through another program to set them all 512x512 and what about optimizing file sizes what software do you use?

    513 to 512 would not make much difference to me in an animation.

    I use idraw now they call it graphic.

    So yes. I would make a square box 512x512.. Outline strike 1 pixel and alpha on the stroke 1%.

    Can't see it with the naked eye but my software recognizes it and saves as 512x512.

    If you could do that right all in Spriter then it would export 512x512 animation png sequence and you don't have the different image sizes.

    I'm pretty sure adobe does layers.

Sign In or Register to comment.