Making Mario 2 - Let's animate!

When I last left off, I had devised a way to generate pixel sprites using CSS and jQuery. (See the blog post here)

But notably, it didn't _do_ anything.

So, how do we manage animation with divs?
This was slightly more difficult than I thought it would be. Because most of the animation would be event driven, I had to come up with a good scheme to manage it all. The biggest hurdle was making it non-sprite specific. I wanted to have a generic method to deal with all my sprites animation needs.

I decided that to facilitate the animation, I would stack the frames on top of each other, and then simply hide the inactive frames and show only the active one. It appears to work fairly well.

The basic flow is this:
Press key -> animate -> release key -> kill animation

There is a few exceptions, but we'll cover those in a minute.

First and foremost, a number of sprites could be animated at any given time, so I needed to create a queue to handle them all. It's a simple struct that will store a bit of information about the sprite:

• The frame order for the animation. This is stored in an array and will contain the div names. i.e. ["marioStartWalk", "marioMidWalk"]
• If the animation is reversed or not. (Difference between facing left or right. The reverse sprites _must_ end with "Reverse" i.e. marioStartWalkReverse, etc...)
• The prefix for the divs. (All sprite divs or "frames" related to the animation need to start with the same prefix. i.e. marioStartWalk, marioEndWalk, etc...)
• The current frame that needs shown. This will always start with zero as it's the first array element.
• Whether the animation is active.
• The stop frame. This is the div that will be shown when the animation stops.

Here's what I came up with for the animate() method:

	animate = function(frameOrder, isReversed, prefix, id, stopFrame) {
	/*
	* Determine if this is our first run,
	* or if the animation is currently stopped
	*/
	if( animationQueue[id] == undefined ||
	animationQueue[id].active == false){
	//Go ahead and set the sprite's parameters
	animationQueue[id] = {
	frameOrder : frameOrder,
	isReversed : isReversed,
	prefix : prefix,
	currentFrame : 0,
	active : true,
	stopFrame : stopFrame};
	}
	//Determine if the sprite should be reversed.
	reverse = animationQueue[id].isReversed == true?'Reverse':'';
	//Hide all frames
	$('div[id^="' + animationQueue[id].prefix + '"]')
	.css({'visibility' : 'hidden'});
	//Make the appropriate frame visible.
	if(animationQueue[id].currentFrame < animationQueue[id].frameOrder.length) {
	$('#' + animationQueue[id]
	.frameOrder[animationQueue[id].currentFrame] + reverse)
	.css({'visibility' : 'visible'});
	} else {
	animationQueue[id].currentFrame = 0;
	$('#' + animationQueue[id].frameOrder[0] + reverse)
	.css({'visibility' : 'visible'});
	}
	//Incriment the frame for next execution
	animationQueue[id].currentFrame += 1;
	}

view raw gistfile1.js hosted with ❤ by GitHub

The takeaway here is that we add the sprite to the queue, turn it to active and display the appropriate frame.

Why am I managing it this way? Well, Javascript is notoriously difficult to manage simultaneous keyboard inputs with. So, I had to come up with a way to account for things like holding run and then hitting the jump button. In essence, I'm threading.

Here's an example:

	$('body').keydown( function(e) {
	//88 is the 'X' key which is jump
	if(e.which == '88') {
	/*
	* Some basic checks to make sure the
	* jump sprite isn't currently animated
	*/
	if (animationQueue['marioWalk'] == undefined ||
	animationQueue['marioJump'] == undefined ||
	animationQueue['marioJump'].active == false) {
	var reverse = lastKey == '37' ? true : false;
	//Kill the walk animation
	stopAnimation('marioWalk','marioWalkInterval');
	//Start the jump animation
	animate( ["marioJump"],
	reverse,
	"mario",
	"marioJump",
	"marioStand");
	/*
	* So, in order to continue running
	* when the jump key is pressed, I
	* had to simulate a keypress through
	* jQuery. Also, because jump is a
	* single frame, we kill it immediately
	* after the interval passes.
	*/
	var triggerKey = lastKey;
	jumpInterval = setInterval( function () {
	stopAnimation('marioJump','jumpInterval');
	/*
	* The key array helps determine if
	* the user hasn't released the run
	* key yet. It's a workaround for
	* dealing with simultaneous key
	* presses.
	*/
	if (keyArray.indexOf(triggerKey) != -1) {
	continueRun = $.Event("keydown");
	continueRun.ctrlKey = false;
	continueRun.which = triggerKey;
	$('body').trigger(continueRun);
	}
	}, 1000 );
	}
	}
	//Right arrow is 39, Left arrow is 37
	if( ( e.which == '39' || e.which == '37' ) &&
	( animationQueue['marioJump'] == undefined ||
	animationQueue['marioJump'].active == false ) ) {
	/*
	* If the sprite doesn't exists
	* or it's in an off state, animate.
	*/
	if(animationQueue['marioWalk'] == undefined ||
	animationQueue['marioWalk'].active == false) {
	//To prevent a race condition, kill the interval.
	stopAnimation('marioWalk','marioWalkInterval');
	//Determine direction
	var reverse = e.which == '37' ? true : false;
	//Animate
	marioWalkInterval = window.setInterval(
	'animate( ["marioStartWalk",
	"marioMidWalk",
	"marioEndWalk",
	"marioMidWalk"],
	' + reverse + ',
	"mario",
	"marioWalk",
	"marioStand")', 80 );
	} else if ( lastKey == "" || lastKey != e.which ) {
	//This compensates for multiple button presses
	stopAnimation('marioWalk','marioWalkInterval');
	}
	//Add the key to the array so we know a button is engaged
	lastKey = e.which;
	if (keyArray.indexOf(e.which) == -1) {
	keyArray.push(e.which);
	}
	}
	});

view raw gistfile1.js hosted with ❤ by GitHub

There is a couple interesting things going on here. I'm using setInterval() for the animation calls. This is so I don't lock the browser waiting for the animation to finish and preventing the user from doing things like hitting the jump while walking / running. I'm also using an array to manage the key strokes. When the jump animation thread kicks off, it loses scope of the right / left arrow key presses. So, I check an array stack to see if the key is still being held down. If it is, and it was the same key that was being held prior to the jump, then Mario will continue walking / running when the jump animation ceases.

The final (and simplest) piece is stopping the animation:

	$('body').keyup( function(e) {
	if(e.which == '39' || e.which == '37') {
	/*
	* Once the user releases the key
	* remove it from the stack
	*/
	if( keyArray.indexOf( e.which ) != -1 ) {
	keyArray.splice( keyArray.indexOf( e.which ) , 1 );
	}
	//Kill the animation with the release of the control.
	if (animationQueue['marioJump'] == undefined ||
	animationQueue['marioJump'].active == false) {
	stopAnimation('marioWalk', 'marioWalkInterval');
	}
	}
	});
	function stopAnimation(id, threadName) {
	/*
	* Because of the nature of how
	* clearInterval() works, I had
	* to use an eval here. Not proud
	* of it, but it works. :p
	*/
	eval("window.clearInterval(" + threadName + ");");
	/*
	* We only need to worry about default
	* animation on existing sprites
	*/
	if(animationQueue[id] != undefined){
	reverse = animationQueue[id].isReversed == true?'Reverse':'';
	//Put the state inactive
	animationQueue[id].active = false;
	//Hide all but the stopFrame
	$('div[id^="' + animationQueue[id].prefix + '"]')
	.css({'visibility' : 'hidden'});
	$('#' + animationQueue[id].stopFrame + reverse)
	.css({'visibility' : 'visible'});
	}
	}

view raw gistfile1.js hosted with ❤ by GitHub

And here it is put together. Controls are simple: Left and right arrows for movement animation. 'X' for jump.

I know what you're thinking: "Why the heck doesn't it MOVE?" Well, movement will be next weeks post ^__^. Here, I was simply dealing with animation. Believe it or not, they're unrelated. For me, this was really cool. We have graphics, and animation, using divs. Neat!

Hope you enjoyed this. If you want clarification on anything, feel free to leave comments in the post.
Final Note: Blogger keeps stripping my Javascript. If the game panel displays as a black line, let me know and I'll get it fixed.