Using EaselJS, my spritesheet-based map is not showing up

Question

I have a random map that generates based on a level and a set of Tile ID's, constructed using a Height Map generator I wrote using the BitmapData extension.

I've confirmed that the Tile IDs are generated correctly and can be modified to cycle through a set of tiles and changing circumstances.

The actual base image that holds the tiles is loaded and I was able to draw it separately.

However... after I update the stage when the function finishes building, I don't see any map at all and I don't understand why. I've tried to add to a container and to the stage directly, neither method is working.

Could anyone identify the problem?

function buildBackground()
{
    var mapSeed = Math.round(Math.random() * 2);

    var channel = Object.create(createjs.BitmapDataChannel);
    var channelOptions = channel.RED | channel.GREEN | channel.BLUE;

    var offsets = [new createjs.Point(0, 0), new createjs.Point(0, 0)];
    var interpolateType = "cos";

    var TileMap = new Array();

    accessMap = new createjs.BitmapData(null, 200, 200);
    accessMap.perlinNoise(100, 100, 6, mapSeed, true, false, channelOptions, true, offsets, interpolateType);

    var BitmapLayout = new createjs.Bitmap(accessMap.canvas);

    BitmapLayout.scaleX = 5;
    BitmapLayout.scaleY = 4;

    BitmapLayout.x = 0;
    BitmapLayout.y = 0;

    var gridSizeX = 10;
    var gridSizeY = 7;

    heightMap = new Array();

    for (x = 0; x < gridSizeX; x++)
    {
        heightMap[x] = new Array();
        for (y = 0; y < gridSizeY; y++)
        {
            heightMap[x][y] = 0;
        }
    }


var pixelPoint = new createjs.Point();
var darkest_pixel = 1;
var brightest_pixel = 0;

for (x = 0; x < gridSizeX; x++)
{
    for (y = 0; y < gridSizeY; y++)
    {
        pixelPoint.x = Math.round((x/gridSizeX) * accessMap.width) + 1; 
        pixelPoint.y = Math.round((y/gridSizeY) * accessMap.height) + 1;

        heightMap[x][y] = accessMap.getPixel(pixelPoint.x, pixelPoint.y);

        heightMap[x][y] /= 0xffffff;

        if (heightMap[x][y] < darkest_pixel) {
            darkest_pixel = heightMap[x][y];
        }

        heightMap[x][y] = Math.round(heightMap[x][y] * (Math.random() * 3));
    }
}

for (x = 0; x < gridSizeX; x++)
{
    TileMap[x] = new Array();
    for (y = 0; y < gridSizeY; y++)
    {
        TileMap[x][y] = 0;
        TileMap[x][y] = Math.round(heightMap[x][y] * (Math.random() * 5));
    }
}



var bitmap = new createjs.Bitmap(preload.getResult("BackgroundTiles"));

var BackgroundTileObjData = {
    images: [bitmap],
    frames: {width: 100, height: 100}
};

var BackgroundTileInfo = new createjs.SpriteSheet(BackgroundTileObjData);

var frameSize = 100;

var graphic = new createjs.Graphics();


for (x = 0; x < gridSizeX; x++)
{
    for (y = 0; y < gridSizeY; y++)
    {
        var TileID = TileMap[x][y];

        var levelModifier = 1;
        var tile = new createjs.Sprite(BackgroundTileInfo);
        tile.gotoAndStop(TileID);
        tile.x = 100 * x;
        tile.y = 100 * y;

        stage.addChild(tile);

    }
}

stage.update();
console.log("Tile SpriteSheet?");

}

Answer 1

As the EaselJS documentation states for SpriteSheet objects :

SpriteSheets are an object with two required properties (images and frames), and two optional properties (framerate and animations). This makes them easy to define in javascript code, or in JSON.

images : An array of source images. Images can be either an HTMlimage instance, or a uri to an image. The former is recommended to control preloading.

Instead you pass a createjs.bitmap object which is neither. So basically if you change your SpriteSheet object to :

var BackgroundTileObjData = {
 images: [bitmap.image],
frames: {width: 100, height: 100}};

//or even this should work : 
//images: ['/uri/to/your/tile/image']

It should work.