EaselJS stops running after only three iterations of a nested 3x3 for loop

Question

I'm working out a simple tile system, using a tilesheet loaded with createjs.LoadQueue. The tilesheet itself seems to be working fine and loading correctly. In order to keep the test simple, it builds a quick tile like this:

var baseTile = new Array();
baseTile[0] = 0;
baseTile[1] = 1;
baseTile[2] = 2;
baseTile[4] = 4;
baseTile[5] = 5;
baseTile[6] = 6;
baseTile[7] = 7;
baseTile[8] = 8;
baseTile[9] = 9;

var i = 0;

for ( var y = 0; y < 3; y++) {
    for ( var x = 0; x < 3; x++) {
        // create a new Bitmap for each cell
        var sprite = new createjs.Sprite(tilesheet);
        sprite.gotoAndStop(baseTile[i]);

        sprite.x = x * 40;
        sprite.y = y * 40;

        // add bitmap to stage
        stage.addChild(sprite);
        i++;
        console.log(i);
    }
}

In order to build structures, it loops through an array of tiles. However, it only creates the first top three tiles, and then fails, acting as if it can't see "var sprite" anymore. This is the error that it produces: Uncaught TypeError: Cannot read property 'undefined' of null easeljs-0.7.0.min.js:12

I am using EaselJS 0.7.0 and Preloadjs 0.4.0. Has anyone encountered this before?

Answer 1

you missed the fourth baseTile ...

var baseTile = new Array();
baseTile[0] = 0;
baseTile[1] = 1;
baseTile[2] = 2;
baseTile[3] = 3; //You forgot this one
baseTile[4] = 4;
baseTile[5] = 5;
baseTile[6] = 6;
baseTile[7] = 7;
baseTile[8] = 8;
baseTile[9] = 9;