Friday, January 29, 2016

Implementing the Overhead kick

Man with all these different posts, how are you keeping track of which one you should submit first?

Hahahaha

Okay so here we're going to figure out how to implement the overhead kick.  We're just using a rough sketch for the "prototype."  Honestly "prototype" is starting to take on the meaning "Rushed and half assed."  Using unfinished assets, half baked code, unplanned levels.  But that's okay.  Spending a full ass of time is just not practical.  Not to answer those important early questions.
Until now we've been using a pixel as an orientation.  That pixel gets lined up by the code to make sure the animations play in the right place.  


These are two frames from the current 'Jump Kick' animation.  The character doesn't actually go any higher in the image, we let box2d take care of that.  We didn't have to pay attention to the vertical distance in the drawing at all, we just moved it up a tiny bit mostly by accident.  Also please ignore how much bigger one is than the other, thanks.  

Can we do the same thing for our overhead kick?  Can we just delete the white space at the bottom of the image and stick an orientation pixel in there?  Can we just not do that and let the animation determine how high we go?  Can we please be lazy??

No sir.  Not for us, not here.  We have a box2d body that the animation is attached to.  When it jumps, we stay stuck to it.  It makes it easy to handle gravity and ground interactions.  If we don't use the box2d gravity then there might be something strange later, like the player thinks he's doing an overhead kick but really his box2d body falls to its sad death.  So we will use the box2d physics and give the body a push up.  Not unlike the time I made the mistake of helping a girl in a short skirt climb up a metal pole.  Yes both of us didn't think that one through very well.

So yes we will push our box up and then it will fall down with gravity.  Let's look at the overhead kick again with a fake little red happy box2d body.



For our first question we can ask: how high does the box need to go?  Does the box need to stay in sync at the bottom of the character?

Well, yes if we want the character to be able to move right or left while kicking.  If they can do an overhead kick while moving and we want them to be able to jump up on different platforms, yeah the red body box has to stay at about the bottom of the character in the image.


Beyond that we probably don't want a normal gravity interaction with some of our attacks or jumps.  For example as we saw earlier, when we let go of the right button we don't want our guy to slide to a stop slowly.  It's disconcerting to see our character do that.  Other objects look fine but when our in game persona isn't under our direct control it feels uncomfortable.  When we are walking in real life and we want to stop we don't slide to a stop while waiting for ground friction to do its magic on us.

For now we are setting our speed to 0 when the player lets go of the button.  Later we might use a fixture and adjust the friction setting as detailed here: http://www.iforce2d.net/b2dtut/fixtures

Which brings us back to the overhead flip.  We can see that the time spent going up and the time spent going down are very short.  To capture this effect in the game lets first try increasing the gravity for just the character.  Then we'll increase the force of the push.  Later to get some fancy "flying through the air" effect we could try setting her gravity lower during the animation or attack.



Here we set up the bounding boxes for attack, hurt, and orientation.  (Can't see the last one)

Then we use the gdx texture packer to put all the files into an atlas.











Next we load them all up in an XML file to read them into the program.  (Making sure to duplicate the frames that last for .1 seconds instead of .05 seconds.)



Then after loading up the animation and adding a new state and input method (all of which I'll go into excruciating detail with later) we've got our overhead kick!

The last thing is to add another button to the HUD.  Scene2d is not well documented in terms of table layouts and getting things to line up.  It's less like programming and more like playing the lottery.

*Time passes*
Well we played long enough and got what we wanted for now:



And here's the code so you don't have to keep rolling the dice;
controls = new Table();
controls.setHeight(stage.getHeight());
controls.setWidth(stage.getWidth());
controls.align(Align.bottom);
controls.add(touchPad.getTouchPad()).expandX().align(Align.bottomLeft).padRight(stage.getWidth()*.8f);
controls.add(kickButton).maxHeight(stage.getHeight() / 4)
        .maxWidth(stage.getHeight() / 4).align(Align.bottomRight).expandX();
controls.add(kickButton2).maxHeight(stage.getHeight() / 4).expandX()
        .maxWidth(stage.getHeight() / 4).align(Align.bottomLeft);

I gotta say, this new attack makes hitting the high flying bottles a lot more rewarding..  Waiting and trying to get the timing is just difficult enough to be satisfying and not so hard that it feels cheap.

No comments:

Post a Comment