JavaScript Object Pool
During the development of my Galaxian style HTML5 game, I wanted to make an object pool of the bullets that my ship and enemies could use to help keep my performance high and unnecessary garbage collection low. However, after 30 minutes of Google searching for an object pool in JavaScript, it seemed that no one had posted any examples. I was quite baffled that no one had made one, so I developed my own simple object pool for JavaScript.
The Code
* The object to be held within the Object Pool.
*/
function Obj() {
this.inUse = false; // Is true if the object is currently in use
/*
* Sets an object not in use to default values
*/
this.init = function(/*values*/) {
/*code to initialize object to default values*/
};
/*
* Spawn an object into use
*/
this.spawn = function(/*values if any*/) {
/*code to set values if any*/
this.inUse = true;
}
/*
* Use the object. Return true if the object is ready to be
* cleared (such as a bullet going of the screen or hitting
* an enemy), otherwise return false.
*/
this.use = function() {
if (/*object is ready to be reused*/) {
return true;
} else {
/*code to use object*/
return false;
}
};
/*
* Resets the object values to default
*/
this.clear = function() {
/*code to reset values*/
this.inUse = false;
};
}
/**
* The Object Pool. Unused objects are grabbed from the back of
* the array and pushed to the front of the array. When using an
* object, if the object is ready to be removed, it splices the
* array and pushes the object to the back to be reused.
*/
function Pool() {
var size = 20; // Max objects allowed in the pool
var pool = [];
/*
* Populates the pool array with objects
*/
this.init = function() {
for (var i = 0; i < size; i++) {
// Initialize the objects
var obj = new Obj();
obj.init(/*values*/);
pool[i] = obj;
}
};
/*
* Grabs the last item in the list and initializes it and
* pushes it to the front of the array.
*/
this.get = function(/*values*/) {
// If the last item in the array is in use, the pool is full
if(!pool[size - 1].inUse) {
pool[size - 1].spawn(/*values if any*/);
pool.unshift(pool.pop());
}
};
/*
* Uses any alive objects in the pool. If the call returns true,
* the object is ready to be cleared and reused.
*/
this.use = function() {
for (var i = 0; i < size; i++) {
// Only use objects that are currently in use
if (pool[i].inUse) {
if (pool[i].use()) {
pool[i].clear();
pool.push((pool.splice(i,1))[0]);
}
} else {
// The first occurrence of an unused item we can
// break looping over the objects.
break;
}
}
};
}
Explanation
I wanted the pool to have constant creation and deletion of objects, so used push() and pop() methods of JavaScript arrays to accomplish this. When the pool requests a new object, it takes one off the back (providing it’s not already in use), populates it’s values, then pushes it to the front of the array.
When the pool traverses the array, it checks to see if an object is ready to be reused (via the Object’s own function) and then uses the JavaScript method slice() to remove that object from the array and push it to the back, making it ready to be reused. I decided to use the back of the array for usable objects instead the front in case I wanted to ever use a for-each loop to iterate over the array (since they can only start from the front).
Ready to go
Please feel free to take the code for your own use. Of course you’ll have to modify it a bit so your Obj() will be created properly as well as when to determine it is ready to be cleared and reused, but this should help in getting started. Just replace all the
/*code here*/ comments with your code and voila! A fully function object pool for your JavaScript game.