Author Topic: How to deal with spritesheets with multisize sprites in them?  (Read 2303 times)

test84

  • Key Contributor
  • *****
  • Posts: 1328
  • Karma: +0/-0
  • ت
    • View Profile
    • My personal site.
Hi,

Take a look at this please:




As you can see in this spritesheet from SMB1, the mario in first frame is 14x18 pixels but that size changes in next frames, so when I want to set size in loadGraphics, I donno what I should say for the size.

If I set the largest size, it will have empty corners and problems with finding next frames because of the wrong result in multiplication.

What should I do?

Thanks in advance.
blog, twitter, Check out my award winning game, Rot Gut:

Arkeus

  • Contributor
  • ****
  • Posts: 321
  • Karma: +1/-0
    • View Profile
    • I, Arkeus
You need to create a sprite sheet where all the frames are the same size. Copy each frame over to a new sprite sheet that has each frame the size of the biggest frame.

cai

  • Contributor
  • ****
  • Posts: 465
  • Karma: +0/-0
  • the illest of villains
    • View Profile
    • Brandon Cash
Definitely just have it as the largest size.  Using multiple sizes in one spritesheet will get super messy super quick and will not be worth it.

If you need to adjust the bounding box based on what's happening, you could do that on a per-animation basis fairly easily.  Most older games don't even bother with that--I'd be willing to bet Mario's bounding box is the same no matter what.
Follow me on Twitter | Come join us at #flixel on irc.freenode.net!

test84

  • Key Contributor
  • *****
  • Posts: 1328
  • Karma: +0/-0
  • ت
    • View Profile
    • My personal site.
Thanks dudes.

But if I do this, then it will not be pixel perfect, as the original mario is, it will have empty spaces on corners.
blog, twitter, Check out my award winning game, Rot Gut:

cai

  • Contributor
  • ****
  • Posts: 465
  • Karma: +0/-0
  • the illest of villains
    • View Profile
    • Brandon Cash
That's fine--just adjust your bounding box to match the sprite and it'll work great!
Follow me on Twitter | Come join us at #flixel on irc.freenode.net!

test84

  • Key Contributor
  • *****
  • Posts: 1328
  • Karma: +0/-0
  • ت
    • View Profile
    • My personal site.
That's fine--just adjust your bounding box to match the sprite and it'll work great!

umm, would you please kindly elaborate more on how to do so?
blog, twitter, Check out my award winning game, Rot Gut:

zuperxtreme

  • Contributor
  • ****
  • Posts: 254
  • Karma: +0/-0
    • View Profile
    • Buddah
You can add callbacks on a per-frame basis, depending on the frame you can set the width/height and offsets.
..."without order nothing exists, without chaos nothing evolves"... 
Zoklet.net

reacher

  • Member
  • **
  • Posts: 12
  • Karma: +0/-0
    • View Profile
umm, would you please kindly elaborate more on how to do so?
I believe the offset property is what you want to adjust.

test84

  • Key Contributor
  • *****
  • Posts: 1328
  • Karma: +0/-0
  • ت
    • View Profile
    • My personal site.
I edited the spritesheet and everything works but it's not pixel perfect, i.e. you can sometimes walk in the air!

and here is my current spritesheet that everything is 18x18 (and that causes waking in the air bug)
blog, twitter, Check out my award winning game, Rot Gut:

Arkeus

  • Contributor
  • ****
  • Posts: 321
  • Karma: +1/-0
    • View Profile
    • I, Arkeus
You can change the bounding box to not be as wide by doing something like:

width = 14;
offset.x = 2;

After you load your graphic. That way the bounding box will start 2 pixels over, and only be 14 pixels wide (even though the graphic will still be 18 pixels wide.

test84

  • Key Contributor
  • *****
  • Posts: 1328
  • Karma: +0/-0
  • ت
    • View Profile
    • My personal site.
You can change the bounding box to not be as wide by doing something like:

width = 14;
offset.x = 2;

After you load your graphic. That way the bounding box will start 2 pixels over, and only be 14 pixels wide (even though the graphic will still be 18 pixels wide.

Even though I don't get what this did, but solved one case. I'm sure there will be another case that we need to enlarge our bounding box.

I think I can achieve same effect with editing my spritesheet and have everything in 16x18, that's atleast what I understood from offset's info on API docs.

The problem is we should have different bounding boxes for different animation frames to get pixel perfect collision, I donno how Mario did it with NES assembly!
« Last Edit: Fri, Jun 3, 2011 by test84 »
blog, twitter, Check out my award winning game, Rot Gut:

cai

  • Contributor
  • ****
  • Posts: 465
  • Karma: +0/-0
  • the illest of villains
    • View Profile
    • Brandon Cash
I donno how Mario did it with NES assembly!
They didn't!  Mario only had one bounding box, and it really only changed when the player changed (i.e. swimming mario, small mario, large mario).

Just use width/height and offset to change the bounding box and it will behave like 99% of old console games.  If you want pixel-perfect collision, you can use PhotonStorm's Flixel Power Tools.
Follow me on Twitter | Come join us at #flixel on irc.freenode.net!

test84

  • Key Contributor
  • *****
  • Posts: 1328
  • Karma: +0/-0
  • ت
    • View Profile
    • My personal site.
Aha, where should I change the bounding box? I should write callback function for changes in animation, right? how should I do that?
blog, twitter, Check out my award winning game, Rot Gut:

cai

  • Contributor
  • ****
  • Posts: 465
  • Karma: +0/-0
  • the illest of villains
    • View Profile
    • Brandon Cash
Just set width/height and offset.x/offset.y.  I wouldn't use a callback, I would just do it whenever the animation needs to change.
Follow me on Twitter | Come join us at #flixel on irc.freenode.net!

test84

  • Key Contributor
  • *****
  • Posts: 1328
  • Karma: +0/-0
  • ت
    • View Profile
    • My personal site.
Thanks man.
blog, twitter, Check out my award winning game, Rot Gut: