如何加载这些图像

Question

尽管过去我已经能够使用CreateJS库为小型演示创建和使用动画，但我目前很想了解为什么即使在我已验证所有动画图块都已添加的情况下，画布上却什么也不显示的原因。 我要一步步地通过调试器，然后看一切正常，但是在重新加载时却获得了一个完全空白的页面。 任何想法都非常感谢！

     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

如果该脚本是复制和粘贴，则在创建正文之前执行头部的脚本。 这就是为什么您看到它正在正确执行，但实际上什么都没有发生的原因。

我将把script标签复制并粘贴到canvas元素下方的标题中。