[P2] animating sprite + custom shape

[titmael]

Hi,

 

I didn't find examples or explainations for it and my question is pretty simple :

 

My player has animations (from a spritesheet). How to load custom collisions shapes and apply for each frame ? Because the player is moving and performing actions, the shape is not always the same and I need to load a custom shape for each frame.

 

Thx

[ZoomBox]

I think a simple test in the update loop would be OK:

update(){

    if(this.frame == 5){

        //remove the old shape and add the new one

    } else if(this.frame == 8){

        // same

    }

}

[titmael]

I wonder if there is a better way to do it

[lewster32]

There's no way to include body shapes in the animation set so I'd say this, with maybe a cleaner way to access the right body for the frame (an array of shapes with indices matching the relevant frames maybe?) put into the update method of an extended sprite would probably be the best way to do it.

[titmael]

You both tell me the same, snif I'll have to do with it. Strange nobody had this need

[lewster32]

Most games make do with very simple collision bounds, or collections of rectangles for the bits that matter. When you get complex shapes that need accurate collision, those shapes are usually characters with separate collision shapes for each of their 'parts' - head, body, arms, legs etc.

[titmael]

ok. Is there a way to load spritesheet where each image isn't the same size as others ?

[lewster32]

This is what texture atlases are for. Sprite sheets need uniform frame sizes, texture atlases include information for each frame separately.

[titmael]

Nice, I just bough TexturePacker, very easy to use

[lewster32]

I love TexturePacker - great piece of software with so many time saving features.

[titmael]

Yep, I bought the package with Physics, really worth it !

 

To get a nice rectangle shape for animations I did that in the update function of my Enemy class :

if(this.lastFrame != this.animations.currentFrame.name){    this.body.clearShapes();    this.body.addRectangle(this.texture.width, this.texture.height, 0, 0, 0);    this.lastFrame = this.animations.currentFrame.name;}

So at every animated frame, rectangle is update. This works only for animations (not if you set this.frame = X)

[ZoomBox]

Since this operations are quite heavy (removing and adding a body) I would suggest you to add simpler bodies like circles, but that's just a suggestion depending on what you need.

 

There's no way to include body shapes in the animation set so I'd say this, with maybe a cleaner way to access the right body for the frame (an array of shapes with indices matching the relevant frames maybe?) put into the update method of an extended sprite would probably be the best way to do it.

Yeah that's what I thought but I was just explaining how I see it working.

[titmael]

Since this operations are quite heavy (removing and adding a body) I would suggest you to add simpler bodies like circles, but that's just a suggestion depending on what you need.

 

That's what my piece of code do, it adds a rectangle 

[titmael]

Arf, still have a weird prob : updating the shape when walking looks ok :

 

 

but when updating for a smaller frame :

 

Any idea ? I searched but didn't find any good reason

[ZoomBox]

Yes I was just saying that circles are (I think) easier shapes since it's just some kind of distance constraint (a position and a radius).

 

Edit: About your new problem, it is because you don't set the right offset, it is centered to the center of your sprite when it is at its maximum height. You shoud add an offset when addin the shape.

 

For instance:

this.body.addRectangle(width, height, 0, 20, 0);

Now, how to know the correct exact offset ? No idea.

[titmael]

Hmm it's centered to the center of the sprite ? Shouldn't it be on top left (if I don't use anchor.setTo(.5)) ??

[ZoomBox]

I suppose. But just try console.log(this.achor);

[titmael]

Damned you are right. I guess I'll have to get the first frame size and play with the offset. Gonna try and share

[titmael]

Very nice, I did that :

 

In the init of my "classe" :

this.defaultSize = {width: this.texture.width, height: this.texture.height};

Then in the update function :

if(this.lastFrame != this.animations.currentFrame.name){    var offsetX = (this.defaultSize.width - this.texture.width) / 2,        offsetY = (this.defaultSize.height - this.texture.height) / 2;    this.body.clearShapes();    this.body.addRectangle(this.texture.width, this.texture.height, offsetX, offsetY, 0);    this.lastFrame = this.animations.currentFrame.name;}