Question

虽然过去使用CreateJS库我已经能够为小型演示创建和使用动画，但我目前难以理解为什么Nothing正在显示到画布上，即使我已经验证我的动画图块是都被添加了。我正逐步走过调试器并看到一切正常，但在重新加载时得到一个完全空白的页面。任何想法都非常感谢！

     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

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

我会将脚本标签复制并粘贴到canvas元素下方的标题中。

如何加载这些图像

1 个答案: