0

我正在尝试使用easel.js 导入和播放精灵表。我是 JS 和 create 库的新手。但从我目前所读的内容来看，这就是您导入 spritesheet 的方式（机器人图像包含多张小图片，每张图片代表一个框架）。但是当我尝试运行我的 html 文件时，我在 chrome 控制台上收到以下错误。“未捕获的 TypeError：animate.gotoAndPlay 不是函数”我不明白为什么我不断收到此错误。文档和其他在线资源显示我正在正确使用它。一些见解将不胜感激

   <!DOCTYPE html>
    <html lang="en">
    <meta charset="UTF-8">
    <title>test</title>
    
    
    
    <!-- load EaselJS and PreloadJS -->
    <script src="https://code.createjs.com/1.0.0/createjs.min.js"></script>
    <script src="https://code.createjs.com/1.0.0/preloadjs.min.js"></script>
    
    
    
    <script>
    
    
    function init(){
    var stage = new createjs.Stage(document.getElementById("canvas"))
    var robot = new createjs.SpriteSheet({images: ["robot.png"], frames: [[0,0,946,1053,0,658.8,0],[946,0,946,1053,0,658.8,0],[1892,0,946,1053,0,658.8,0],[2838,0,946,1053,0,658.8,0],[3784,0,946,1053,0,658.8,0],[4730,0,946,1053,0,658.8,0],[5676,0,946,1053,0,658.8,0],[6622,0,946,1053,0,658.8,0],[0,1053,946,1053,0,658.8,0],[946,1053,946,1053,0,658.8,0],[1892,1053,946,1053,0,658.8,0],[2838,1053,946,1053,0,658.8,0],[3784,1053,946,1053,0,658.8,0],[4730,1053,946,1053,0,658.8,0],[5676,1053,946,1053,0,658.8,0],[6622,1053,946,1053,0,658.8,0],[0,2106,946,1053,0,658.8,0],[946,2106,946,1053,0,658.8,0],[1892,2106,946,1053,0,658.8,0],[2838,2106,946,1053,0,658.8,0],[3784,2106,946,1053,0,658.8,0],[4730,2106,946,1053,0,658.8,0],[5676,2106,946,1053,0,658.8,0],[6622,2106,946,1053,0,658.8,0],[0,3159,946,1053,0,658.8,0],[946,3159,946,1053,0,658.8,0],[1892,3159,946,1053,0,658.8,0],[2838,3159,946,1053,0,658.8,0],[3784,3159,946,1053,0,658.8,0],[4730,3159,946,1053,0,658.8,0],[5676,3159,959,1052,0,658.8,-1],[6635,3159,971,1050,0,658.8,-3],[0,4212,983,1045,0,658.8,-8],[983,4212,995,1039,0,658.8,-14],[1978,4212,1005,1031,0,658.8,-22],[2983,4212,1005,1031,0,658.8,-22],[3988,4212,1005,1031,0,658.8,-22],[4993,4212,1005,1031,0,658.8,-22],[5998,4212,1005,1031,0,658.8,-22],[7003,4212,1005,1031,0,658.8,-22],[0,5257,1005,1031,0,658.8,-22],[1005,5257,1005,1031,0,658.8,-22],[2010,5257,1005,1031,0,658.8,-22],[3015,5257,1005,1031,0,658.8,-22],[4020,5257,1005,1031,0,658.8,-22],[5025,5257,994,1040,0,658.8,-13],[6019,5257,981,1046,0,658.8,-7],[7000,5257,968,1050,0,658.8,-3],[0,6307,955,1053,0,658.8,0],[955,6307,944,1053,0,658.8,0]],
            animations:{
                instance:[0,25]
            }
        });
    
        var animate = new createjs.Bitmap(robot);
        animate.x = 0;
        animate.y = 0;
    
        robot.getAnimation("instance").frequency = 2;
        robot.getAnimation("instance").next = "instance";
        animate.gotoAndPlay("instance");
    
    
        stage.addChild(animate);
        Ticker.setFPS(30);
        Ticker.addListener(stage)
    
    
    
    }
    
    
    
    </script>
    
    <body onload="init();">
    <div>
        <canvas id="canvas" width="960" height="540"></canvas>
    </div>
    
    </body>
    
    
    
    </html>
4

0 回答 0