3. Multiple Sprites (Groups)

So much effort

The code we’ve written so far is absolutely fine if we only have a few sprites in our game but as our games become larger and more complex it will quickly become a huge coding task and could end up looking something like this:

window.onload = function(){
    CVSetCanvas(document.getElementById('canvas1'));

    var myImage = new CVSurface({
	width: 80,
	height:80
    });
    myImage.circle();

    mySprite1 = new MyBall(function(s){ s.image = myImage; });
    mySprite2 = new MyBall(function(s){ s.image = myImage; });
    // ... repeat for 3 - 49
    mySprite50 = new MyBall(function(s){ s.image = myImage; });
    
    CVSetLoopFunction(function(){
	CVClearCanvas();
	mySprite1.update();
	mySprite2.update();
        // ... repeat for 3 - 49
	mySprite50.update();

	mySprite1.draw();
	mySprite2.draw();
        // ... repeat for 3 - 49
	mySprite50.draw();
    });
    CVInit();
    CVMainloop();
}

As you can see, it’s gonna be a bit of a pain in the ass. It is also extremely bad programming practice. The more experienced programmers amongst you will probably have already figured out that this can be simplified with arrays and for loops and you would be right. However, we’re way ahead of you. Introducing CVSpriteGroup. This is a built-in class that comes free of charge. You’re welcome! Let’s re-write the last bit of code to use CVSpriteGroup and after we’ll go over the changes.

window.onload = function(){
    CVSetCanvas(document.getElementById('canvas1'));

    var myImage = new CVSurface({
	width: 80,
	height:80
    });
    myImage.circle();
    mySpriteGroup = new CVSpriteGroup();
    for(var i = 0; i < 50; i++){
        mySpriteGroup.add( new MyBall(function(s){ s.image = myImage; }) );
    }
    
    CVSetLoopFunction(function(){
	CVClearCanvas();
	mySpriteGroup.update();
	mySpriteGroup.draw();
    });
    CVInit();
    CVMainloop();
}

• To start off we create an instance of the built-in CVSpriteGroup class and named it mySpriteGroup.
• Next we create a for loop that will iterate 50 times. Each time the loop executes we call the add() method of our mySpriteGroup object. There are two options for this. You can create an instance of your sprite and assign it to a variable then pass the variable name in as an argument for add(). Or you can do it the way we have where you assign the object directly into a slot in the CVSpriteGroup object. Either way is perfectly acceptable and the decision really depends on how you need to use the sprites.
• The last thing we did was to remove any sprites from our loop function and replaced them with our mySpriteGroup object calling update() and draw() respectively. These methods call update() and draw() on all sprites contained within the CVSpriteGroup. Check the documentation for more CVSpriteGroup methods.

Where are all the sprites?!

If you ran the code above you will undoubtedly have noticed a flaw in our code. There still only appears to be one sprite. Well this is because they are all being drawn in exactly the same place. Unacceptable! Lets fix it at once. Replace your for loop with this:

for(var i = 0; i < 50; i++){
    mySpriteGroup.add( new MyBall(function(s){
        s.image = myImage;
        s.dx = i/10;
        s.dy = i/10;
    }) );
}

Before running the script you will also need to change MyBall’s initialize() method. Go ahead and remove this.dx = 1; and this.dy = 1; and now your script is ready to be run.