How can I load these images

Question

Though I have been able to create and use animations for small demos in the past using the CreateJS library, i'm currently stumped in trying to understand why Nothing is displaying to the canvas even though I have verified that my animation tiles are all being added. I'm going senile from stepping through the debugger and seeing everything work properly, but getting a completely blank page on reloads. Any ideas are much appreciated!

     var stage, loader;



    function tick() {
            stage.update();
        }

        function generateMap(rekeyed_array, spriteSheet, row_length, col_length, tilesize) {
            for (var x = 0; x < col_length; x++) {
                for (var y = 0; y < row_length; y++) {
                    // z is a onedimentional value mapped from x and y iterators
                    spriteInstance = new createjs.Sprite(spriteSheet, rekeyed_array[z]);
                    var z = x * row_length + y;
                    spriteInstance.x = tilesize * x;
                    spriteInstance.y = tilesize * y;
                    spriteInstance.gotoAndPlay(rekeyed_array[z]);
                    spriteInstance = spriteInstance.clone();
                    stage.addChild(spriteInstance);
                }
            }
            console.groupEnd();
            stage.update();
        }


         //Replace Tiled's map data numbers with the actual Game Object's Names
        function rekeyTiledMapData(spritemappings, array_to_reindex, rows, cols) {
            var reindexedArray = new Array();
            for (var y = 0; y < cols; y++) {
                for (var x = 0; x < rows; x++) {
                    // z is a onedimentional value mapped from x and y iterators
                    var z = y * rows + x;
                    var currentItem = array_to_reindex[z];
                    if (typeof spritemappings[currentItem] === "string") {
                        reindexedArray.push(spritemappings[currentItem]);
                    } else {
                        reindexedArray.push(currentItem);
                    }
                }
            }
            return reindexedArray;
        }


        function getSpriteData(loadedimg) {
            var data = {
                framerate: 60,
                images: [loadedimg],
                frames: [
                    /*middlearth*/
                    [592, 654, 70, 70, 0, 0, 0],
                    /*water*/
                    [562, 434, 70, 70, 0, 0, 0],
                    /*doormid*/
                    [146, 290, 70, 70, 0, 0, 0],
                    /*doortop*/
                    [218, 290, 70, 70, 0, 0, 0],
                    /*grass*/
                    [736, 362, 70, 70, 0, 0, 0]
                ],
                animations: {
                    "sand": {
                        frames: 0,
                        next: "sand",
                        speed: 1
                    },
                    "water": {
                        frames: 1,
                        next: "water",
                        speed: 1
                    },
                    "doormid": [2, 2, "doormid", 1],
                    "doortop": [3, 3, "doortop", 1],
                    "grass": [4, 4, "grass", 1],
                }
            };
            return data;

        }
        var mapdata = [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 11, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 10, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 8, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 6, 6, 6, 7, 7, 7, 6, 6, 6, 6, 0, 0, 0, 0, 0, 0, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5];

        var spritemappings = {
            '0': "water",
            '8': "water",
            '7': "water",
            '5': "sand",
            '6': "grass",
            '10': "doortop",
            '11': "doormid"
        };

        function loadLevel(event) {
            var tileimage = loader.getResult("tiles");
            levelanimations = rekeyTiledMapData(spritemappings, mapdata, 16, 10);
            var spritesheet = new createjs.SpriteSheet(getSpriteData(tileimage));
            generateMap(levelanimations, spritesheet, 16, 10, 70);
        }

        function init() {
            stage = new createjs.Stage("gameCanvas");
            createjs.Ticker.on("tick", tick);
            createjs.Ticker.setFPS(60);
            loader = new createjs.LoadQueue(false);
            loader.addEventListener("complete", loadLevel)
            loader.loadManifest({
                id: "tiles",
                src: "assets/images/level_tiles.png"
            });
        }
        init();
    </script>
</head>

<body>
    <canvas id="gameCanvas" width="1600" height="900"></canvas>
</body>

Answer 1

If that script is a copy and paste, the script in the head is executed before the body is being created. Thats why you are seeing that it is executing correctly, but nothing is actually happening.

I would copy and paste the script tag in the header down below the canvas element.