jellysmash_tuto01

Jelly Smash part 1 : Game Tutorial for Flash-Stage3D & ND2Dx

0 Flares Twitter 0 Facebook 0 Google+ 0 Pin It Share 0 Email -- Filament.io 0 Flares ×

Toby needs to jump !

I could make a component out of this feature but I think it is not necessary as I won’t need to reuse it anywhere else and it requires more work. So I’ll code it straight into Toby.as class.

We want Toby to gain momentum while the mouse button is pressed and jump when the mouse button is released. I don’t believe it is necessary to explain how to listen to mouse events (you can check it in the code anyways) but here is the function startMomentum() that is called when we press our mouse button :

private function startMomentum():void
{
	// don't start momentum if it's already in that state or if it's jumping
	if ( isGainingMomentum || isJumping ) return;
	isGainingMomentum = true;

	// stop following the mouse
	followMouseComponent.isActive = false;

	// show our momentum circle
	momentumCircle.visible = true;

	// set it to its minimum size
	momentumSize = momentumMinSize;
}
  1. we first check that Toby is not already gaining momentum or jumping (we never know)
  2. then we deactivate our follow mouse component so Toby stops following the mouse
  3. and finally, we show the momentum circle and set it to its minimum size

Next, in our step() function (remember), we check if Toby is gaining momentum in order to show its progression :

override public function step(elapsed:Number):void 
{
	// the "step" function is called before the "drawNode" function
	// usually you want to put all your logic in there (or in components)

	// is toby gaining momentum ?
	if ( isGainingMomentum )
	{
		// yes make the momentum circle grow
		// we are using the "elapsed" var as it gives us the current time in seconds that has passed between the previous frame rendering and this one
		// this allows us to animate anything at a constant speed regardless of how fast the machine is processing the rendering of our frames
		momentumSize += momentumStepSize * elapsed;

		// if momentum has reached its maximum size, stop it
		if ( momentumSize > momentumMaxSize )
		{
			momentumSize = momentumMaxSize;
			stopMomentum();
		}
		else
		{
			// set momentum circle size
			// we divided our momentum size by 285 (the size of our momentum circle texture) in order to have a value more or less between 0.0 and 1.0 
			// (it can be higher if momentum size is greater than 285)
			momentumCircle.scaleX = momentumCircle.scaleY = momentumSize / 285;

			// set opacity of momentum circle (not necessary but gives a "little something")
			momentumCircle.alpha = momentumCircle.scaleX * 0.5;
		}
	}
}

The more we keep our mouse button pressed, the more momentum Toby will gain. We update our momentum circle size in order to reflect to current momentum Toby has. We also check if maximum momentum has been reached and if so, we call the stopMomentum() function (this function is also called when mouse button is released) :

private function stopMomentum():void
{
	// don't stop if not needed
	if ( !isGainingMomentum || isJumping ) return;
	isGainingMomentum = false;

	// hide momentum circle
	momentumCircle.visible = false;

	// make it jump
	jump();
}
  1. in there we first we check if we were actually gaining momentum or jumping
  2. if everything is right (I believe it’s always good to check for that kind of things in order to prevent bugs from appearing) we just stop our momentum
  3. and hide the momentum circle
  4. then we call the function jump() that will make Toby jump :
private function jump():void
{
	// don't jump if already jumping
	if ( isJumping ) return;
	isJumping = false;

	// to make it look like toby is jumping we are just going to scale it up based on its momentum size
	// whith a minimum of 0.15 and a maximum of 0.7 (0.7 being already quite big as our original texture of toby is 398*348px)
	var size:Number = 0.15 + (momentumSize / momentumMaxSize) * 0.55;

	// now the duration of the jump, we want it to be proportional to its "size" (read "height" as its size is going to fake the fact that toby is jumping)
	var duration:Number = size * 1.0;

	// set up some tweens to scale toby up while he is jumping and down while he is landing
	// (RabbitTween is a fast tweening engine I've developed over the past years)
	var tween:RabbitTween = new RabbitTween().initTween(character, duration, 0.0)
	.setProperty("scaleX", 0.25, size)
	.setProperty("scaleY", 0.25, size)
	.setProperty("ease", null, Expo.easeOut)
	.start();

	tween = new RabbitTween().initTween(character, duration, duration)
	.setProperty("scaleX", size, 0.25)
	.setProperty("scaleY", size, 0.25)
	.setProperty("ease", null, Expo.easeIn)
	.addOnComplete(onJumpCompleteHandler) // set a callback for when the jump is complete
	.start();
}

private function onJumpCompleteHandler():void 
{
	// dispacth a signal
	onLanded.dispatch();

	// not jumping anymore
	isJumping = false;

	// toby can follow our mouse again
	followMouseComponent.isActive = true;

	// this tween will make toby gain its speed slowly so we have a smooth transition between the landing and him starting to move again
	new RabbitTween().initTween(followMouseComponent, 2.0)
	.setProperty("speed", 0.0, followMouseComponent.speed)
	.start();

	// set following speed to 0 to avoid glitches
	followMouseComponent.speed = 0.0;
}

This part looks a bit more complex but is actually very simple. I’m using my own tweening engine “RabbitTween”┬áto change the scale of our character over time based on its momentum size. As Toby jumps he will get bigger and when landing he will get back to its normal size. This should do the trick and fake our jump.

I put a little effort into getting the right size and duration of the animation. Those values might not be the best yet but the point is that I believe that small things like that, if properly adjusted, add to the pleasure of playing a game. Same for the smooth rotation transition a bit earlier.

When the tween completes :

  1. it calls onJumpCompleteHandler() that will dispatch a signal
  2. reactivate our follow mouse component so Toby starts following our mouse again
  3. and start a new tween that will slowly change the follow mouse component speed from 0.0 to what it was set before (again one of those little thing that I think makes it look nicer)

This last trick will make Toby slowly recovering it’s speed instead of just going suddenly from a stationary state to a state where he is moving. The duration of the speed recovering can be adjusted and will probably play a role in the overall game play. We can imagine some kind of item that Toby can pick up and that increases its recovering speed for a short period of time.

The end

That’s it for part one. I hope your enjoyed it and learned a couple of things.

In the second part, we will learn how to add bugs, make them move around the screen, how to smash them and how to use a particle system for various special effects (in fact I’m already using a particle system in this first part to show some smoke when Toby is landing but as I don’t have time to explain it now, I’ll do it in the second part)

See you in next part.

0 Flares Twitter 0 Facebook 0 Google+ 0 Pin It Share 0 Email -- Filament.io 0 Flares ×

Pages: 1 2 3 4

Leave a Comment