Readjust Collision boxes.

[narutobilbao]

Hello everyone. I'm new to Phaser, and believe it or not, the first thing I decided to do, was a 2D fighting game. 

 

first of all, i'm spanish, so excuse me for my english.

 

I thought it would be an awesome experience, but the real thing is that I've got so many problems with it that I can't do nearly anything. 

I'm using Phaser for programming it.

 

One of my mayor problems are the collisions. I use spritesheets for the characters, and like in many fighting games, some sprites are smaller than others. (the one for crouching is smaller than the Idle one).

the problem is, that when I want to crouch by pressing a key, the sprite makes it's animation, but the collision box does not adjust the sprite height.

 

at the moment, i've got this:

 

In a "preloader.js" file, with many other different resources, I've got this line.

 

 

this.load.spritesheet('herbal', 'imagenes/spriteSheetHerbal.png', 202, 222);

 

 

In it, I'm sending a width (202) and a height (222) value for every sprite in the spritesheet. I KNOW that in this way, my game does not adjust the width or height like it should (because it takes the width and height for every sprite)

 

My first question here is:

 

1- Is there any other way for loading spritesheets without telling an exact width or height?

 

 

I'm using the arcade physics for the game. I'm using them because it's the only physics system i understand a little bit from the 3 of them. So, my second question is:

 

2- For a fighting game... which physics system should I use? NINJA, P2 or ARCADE? What are the first 2 for? (I really have no clue of them. I've read some information, but still don't understand).

 

 

In another script called "batalla.js", I make the following:

 

 

this.jugador=this.add.sprite(this.world.width - 300, this.world.height - 115, 'herbal');

 

this.jugador.anchor.setTo(.5, .5);

    

this.physics.enable(this.jugador, Phaser.Physics.ARCADE);

    

this.jugador.scale.x= 1;

    

this.jugador.animations.add('stand', [2, 3, 4, 5, 6, 7, 8, 9], 8, true);

this.jugador.animations.add('down', [0], 8, true);

this.jugador.animations.add('defense', [1], 8, true);

this.jugador.animations.add('walk', [10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 21, 22, 23, 24, 25, 26, 27, 28], 8, true);

this.jugador.animations.add('backwalk', [27, 26, 25, 24, 23, 22, 21, 20, 19, 18, 17, 16, 15, 14, 13, 12, 10], 8, true); 

 

 

As you can see, I asing the spritesheet to a variable called "jugador" and then I start the physic system. finally, I create the animations with every sprite.

 

the result of this is that every sprite has the same width and height, and it doesn't matter if I crouch or not, the sprite will have the same height and width.

 

 

I've tried the "setSize()" method, and I've tried to make the collision box smaller by putting it in the update function, and it allows me to crouch, but when I again try to get up, the collision box, makes bugger again, and it fells from the stage, so, that way is not the best for me.

 

 

Now that I've exposed my entire situation, I would like to ask again...

How can I adjust the width and height dinamycally in order to make the game playable?

 

Thank you all for your patience. I attach 1 screenshoot for you to see. 

 

 

 

[drhayes]

First off: AWESOME. 

 

Second: I have no experience making a fighting game myself.

 

I think manually adjusting the bounds on the sprite to match the animation won't work so well. I think you should try creating child sprites that get added to the fighter. Give each child sprite a physics body. Then, based on the current animation, you can check the collision of these invisible child sprites and use them as "hit areas" or "strike areas".

 

For example, you could make a child sprite that covers the size of the parent when ducking. You could make another for an area that is punching. And so on.

[narutobilbao]

Thank you for your help. I've found the way of doing it manually, but it seems rather hard for me to manage that way.

 

I'm going to try out what you're telling me. I haven't got too much knowledge of the parent-child sprite thing. But it could probably be the best way for me to do it. I'll try out that to. Can you give me some advice for using child sprites? Thank you so much again

[fariazz]

You can change the size of the physical body or "bounding box" (not the same as the sprite necessarily).

 

Look at this example: [EDIT] offset bounding box example: http://phaser.io/examples/v2/arcade-physics/offset-bounding-box

 

Basically one thing is the size of the sprite, a different thing is the bounding box of the physical body.

 

You can change the bounding box to whichever dimensions you want.

[drhayes]

Every Phaser.Sprite is also a Phaser.Group, so you can say "this.addChild" inside a Sprite method and put more children in it. The position of that child then becomes relative to the position of its parent adjusted for the parent's anchor.

 

If you have a parent sprite that's 16px wide by 32px tall whose anchor is set to (0.5, 1) then its anchor is at 8,32. You could add a child at (0, -16) with an anchor of (0.5, 0.5) and it would be at the center of its parent.