animation and collisions with different sized sprites?

[ErrorNull]

Hello! I just started out with Phaser last week and total noob, though I do have experience with html and javascript. I've studied through a number of the 2D platform tutorials and they are great! To further my learning I trying to redo a couple stages of Zelda 2, and got the basics of walking animation done. That spritesheet contains images that are each 18x32 pixels. I am moving on to adding the crouching and attacking animations but have found these sprites are of different size than the walking animations. Crouching is 18x27 pixels, and the individual crouch-attach sprites are 34x26 .. because link is extending his sword. I'm not sure how to adjust for collision detection here with these differing sprite sizes. I don't believe that a phaser spritesheet can have 'frames' of different sizes. is there where I should be looking into the P2 physics and away from Arcade? Can someone please direct me to maybe an existing tutorial I've missed that will reveal how to work this in? Thank you! Here's what I have so far.. https://rpg-hero-uncut-errornull.c9users.io/v0_02/

 

[Penagwin]

I haven't used Arcade physics myself, I can only say that P2 has MUCH more flexible hit boxes and general physics abilities.

 

In terms of tutorials, https://www.codeandweb.com/physicseditor/tutorials/phaser-p2-physics-example-tutorial is quiet decent (albeit they want you to use their 20$ product), you don't have to use Physics Editor I believe you can just specify the polygons, but the tutorial itself is what I used.

[ErrorNull]

thanks penagwin, i'll take a closer look into the P2 physics system. I do like the much more precise collision boundaries that can be done with P2.. and i don't plan to have dozens of zelda enemies on screen at once.. so i'll give it a shot. 

But I'm still curious, is it possible to have different-sized frames within a single phaser spritesheet? i thoughts are no. And anyone created game characters that perform attacks or actions that include different size frames (like compared to the other animated frames like for walking, etc), how did you approach collision detection? Use of multiple spritesheets?

[Penagwin]

I can look at my code a bit later, but basically you can do something like `body.clearShapes()` and then re-add the new collision polygon just like you would before. For the sprites you can use Texture Packer (I have no affiliation with CodeAndWeb, but phaser works really well with their products) which does have a free version. You can use This Tutorial to create animations with the sprite sheet.

[drhayes]

The googleable term you're looking for is "sprite atlas", when the frames are different sizes.

I use Texture Packer too and really like it. It even has a CLI for integrating into makefiles and stuff.

[ErrorNull]

thanks penagwin and drhayes for the further advise! i read more about using a texture atlas and that looks like my solution! This was one useful article that clarified: http://www.joshmorony.com/how-to-create-animations-in-phaser-with-a-texture-atlas/ 

Texture Packer was also mentioned as a tool to create the texture atlas file and json file, but i'll first try this other free tool to see how it goes. https://www.leshylabs.com/apps/sstool/

Now that I have a path to make animations that contain different-sized sprites, my next concern is collision. Does Phaser assign a single unchanging collision definition to an atlas-based animation (of different sized sprites) - like based on the first frame? Or is it possible to define a different collision size for each sprite of different sizes?

I've come across some references to body.updateCollisionMask(). Penagwin, you also mentioned body.clearShapes(). Is this how I can achieve dynamically changing collision definition for each different sized sprite?

 

[Penagwin]

Disclaimer, I actually patched Phaser to support scalable collision boxes ( I should make a pull request).  You can see how I did that at this gist. Basically you just patch that function and call `this.player.body.loadPolygon("physics", "player", 1, 1)`. The "physics" is the polygon collection key, and the "player" is the polygon key. Then it's x and y scaling.

 

Later to change the polygon, you can do `this.player.body.clearShapes();` then `this.player.body.loadPolygon("physics", `crouching`, 1, 1);` or whatever.

Another thing you could do is, say your player model has a beak facing the right, and you want to make the player face the left:

`

this.player.body.clearShapes();

this.player.body.loadPolygon("physics", "player", -1, 1);

`

 

TL;DR: You clearShapes() then load a new polygon when you change frames

[samme]

Yes, spritesheet frames are uniform but atlas frames can be different sizes.

There's only one Arcade Physics body per sprite and Phaser doesn't resize it when changing frames. But I think you can define these and look them up pretty easily:

var bodySizesByFrameName = {
  frame1: {
    x:      X,
    y:      Y,
    width:  WIDTH,
    height: HEIGHT
  },
  frame2: {
    /* etc */
  }
};

// …

body.setSize( width, height, offsetX, offsetY );

 

[ErrorNull]

Thanks penagwin and samme for your continued direction. I will try to apply those suggestions shortly. for now, here's what i have accomplished so far: http://onsiteon.hoster908.com/v0_06/

All done with the texture atlas, so awesome. As you can see, my next step is to address those two things:

1. somehow align each frame within the walking animation so it's anchored to the center. for now it looks like it's anchored to the left x=0.. resulting in when character is stepping on his stride forward, that is the widest frame size, and looks like he's jumping forward.

2. i'd like the collision box to dynamically resize within each frame to accommodate his legs as he steps forward and back.

Feel free to view the page source and skim through the main.js file if you have more ideas for me. Thank you!