如何加載這些圖像

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元素下方的標題中。