A canvas example of an object pool
This will be just a quick canvas examples post on a object pool module and a little additional code that will make use of such a module. An object pool is what I have come to call a collection of display objects that are a fixed set of such objects rather than something where they are being added and removed on the fly. So in other words an object pool is a fixed collection of objects that are to be used over and over again, rather than a collection of objects that created and destroyed as needed.
So these objects will often contain properties like x and y for the current position as well as width, and height as one might expected with just about any display object in a simple 2d canvas project. Depending on the nature of the canvas project they will often have additional properties like heading, pixels per second, max hit points, damage, and so forth. However the main point of this canvas example is just to show one way of how to go about creating a collection of these kinds of objects.
There is creating a collection of objects as just an empty array, and then have code that pushes new display objects into the collection, and then purge them out when some kind of condition happens that will result in that happening. However there is also creating an array of display objects once, and when doing so making the fixed pool of a certain set length. I can then have an active property of a display object that is used to set if the display object is currently being used or not.
So then an object pool is a way of creating a collection of objects where I am setting fixed amounts of display objects rather than just pushing them in and out out as needed. That way I know for sure I will never end up with some kind of run away situation in which objects keep getting added. More objects means more overhead to have everything running, and although many computers are fast, I still think it terms of less is more when having display objects in a project. So then in this post I will be going over an example that involves a fixed object pool. This will involve a module that can be used to create a pool object, and a bunch of additional pubic methods to work with that pool, and also some additional code that is used to demo that module.
1 - The pool.js file
So the main event of this post is then the pool.js file that I have work out here for this canvas example. In this module I have a few public methods, but there are two main methods or interest. There is the create method to create a new pool object, and then an update method to update the pool. The create method will take an argument object and here I can define properties for the object pool such as the count of objects, and methods that will be called for an object spawn, update, and purge for example. The update method is then what will be called to update the state of an pool object by way of passing the pool object alone with a seconds value.
Another public method of interest here I is the main public spawn method that will not really spawn new objects into the pool of course, but just activates ones that are not being used from the pool each time the main pool module spawn method is called. In the event that there is no inactive object available the method will just not activate a new object as it just can not be done because of the fixed nature of the pool. A similar effect could be achieved with the alliterative to an object pool, by setting some kind of limit for spawning. In a project where I must have an additional object added eventually, I could have some kind of backlog count maybe, but that might be a matter for another post.
I then have just a few additional public methods for now that might end up being expanded with additional stuff that feel should be there in this object pool module. One such method is my move by pps method that just wraps up some code that I find myself typing over and over again so it should be pulled into some kind of module if not this one. I do not want to go to nuts with methods when it comes to this module, at least not for this canvas example at least. My reasoning is that this will likely be a module that I will be copying into other projects, and then mutate the code a little with application specific changes.
2 - The draw.js module
So this is very much a canvas example, so there is of course the draw.js module for drawing to a canvas element. This time around I wanted to make things simple, so there is mainly just one method to draw a background, and another to just draw the state of an object pool. After that there is just one additional method for drawing a version number from a main state object which is something that I aim to start doing for all of these canvas examples.
3 - Main.js
So now I just need a main.js file to make use of the pool, and draw modules that I went over above. Here I create and inject a canvas element into a main container element. I then also make a reference to the canvas element in my main state object that I will be creating here in this file. The state object will also contain two object pools, one for just simple box objects, and another for shot objects that the boxes will be firing out all over the place.
In here I also have my main app loop where I am updating the stat of the pool, by calling the update method of the Pool module and pass the state object I want to update along with a value that is the number of seconds that has passed sense the last update. I am also of course using my draw methods to render the current state of the pool.
4 - Conclusion
This post was yet another exercise of creating something that I find myself creating over and over again each time I make another canvas example. Just about any game or animation type thing will involve creating at least one if not more pools of display objects that are used for rendering enemy object sprites, power ups, or anything else to that effect.
I wanted to go in a different direction with this example, but I did not quite get around to it. I might get around to putting a little more time into this one when I get some more time though. I would like to make it so that there is more than one pool and they interact with each other.