Steering – Queue

Steering behavior is a great way to make your game characters move in a lifelike manner. After reading a great set of tutorials by Fernando Bevilacqua here, I thought I’d implement what he did using Wade.

This post will cover his ninth (?) article (Queue). I suggest you give the article a quick read because I’m just going to jump right into how to do this in Wade.

A Few Notes Before I Get Started

This demo uses Wade 4.0.1

I use Wade as a framework and write the javascript code myself (i.e. I’m not using the online editor)

The assets in the demo, were downloaded from here, and are the intellectual property of Craftpix

Final Results Preview

Move the mouse around and the leader follows. When she moves, you should see a pack of monsters chasing behind her. As she passes through the gaps in the wall, the monsters should sort of jostle each other and queue their way through the opening. On mouse down she will stop moving and fire her weapon. If you kill all the monsters, you’ll have to restart the demo. You can use the scroll wheel to zoom in and out. (Note: you may have to click the window once initially to give it focus).

﻿﻿﻿﻿﻿﻿

Monster

If you’ve followed the previous steering posts, you’ll know that I am using two sprites to check for obstacle detection and avoidance. If you want to see these in the demo, then set the following parameter in the main app to true:

The actual braking calculation is done in the Steering library and is the same as outlined in the aforementioned tutorial

// calculate a braking vector for the scene object
// return the vector that is the inverse and scaled down from the
// passed in vector. Used to provide a braking effect if the scene object
// has an object in front of it and so should queue.
Steering.prototype.brake = function(vel) {
var brakeVec = {x:vel.x*this.braking, y:vel.y*this.braking};
wade.vec2.scaleInPlace(brakeVec,-1);
return brakeVec;
}; // end brake

Conclusion

Keep in mind that steering behavior is not the same as path-finding. If you move the character to the edge of the wall in the demo, the monsters may continue to try to get to her through the wall.

Download and extract the zip file, load steeringQueue.html in your browser to see it in action.

The code contains a lot of comments, so I hope it is easy to follow. Feel free to play around and use the code however you want.