Question

所以我一直在寻找使用Javascript创建游戏的最佳方式，并且认为EaselJS可能效果最好（如果有更好的库，请告诉我们）。

我刚刚开始，但我似乎无法加载精灵工作......我不太确定问题是什么，因为它与画布连接，它正在加载库.. 。这是javascript控制台错误：

    Uncaught TypeError: Cannot read property 'length' of null easeljs-0.7.1.min.j
s:12
        b._calculateFrames easeljs-0.7.1.min.js:12
        b.initialize easeljs-0.7.1.min.js:12
        a easeljs-0.7.1.min.js:12
        init index.html:3
        onload

所以是的......如果你能帮助我，那就太棒了......这是src代码：

function init() {
        var stage = new createjs.Stage(document.getElementById("demoCanvas"));
        var jazaSheet = new createjs.SpriteSheet ({
            "frames": {
                "width": 15,
                "height": 16,
                "numFrames": 8,
                "regX": 0,
                "regY": 0
            },
            "animations":{
                "walkDown": [0, 1, "walkDown", 2], 
                "images": ["http://imgur.com/bLfR7TO.png"]
            }
        });
        var jaza = new createjs.Sprite(jazaSheet);
        jaza.x = 0;
        jaza.y = 0;
        jaza.goToAndPlay("walkDown");

        stage.addChild(jaza);
        Ticker.setFPS(60);
        Ticker.addListener(stage);
        stage.update();
    }

编辑：好的，所以我已经改变了，但我仍然无法让它显示在画布上......

function init() {
var stage = new createjs.Stage(document.getElementById("demoCanvas"));
var jazaSheet = new createjs.SpriteSheet ({
    "frames": {
        "width": 15,
        "height": 16,
        "numFrames": 8,
        "regX": 0,
        "regY": 0
    },
    "animations":{
        "walkDown": [0, 1, "walkDown", 2]
    },
    "images": ["http://imgur.com/bLfR7TO.png"]
});
var jaza = new createjs.Sprite(jazaSheet);
jaza.x = 100;
jaza.y = 100;
jaza.gotoAndPlay("walkDown");

stage.addChild(jaza);
createjs.Ticker.setFPS(60);
stage.update();

}

Answer 1

我看了一下，你可以看到班级here的来源。

基本上，您的参数对象中有拼写错误。从images

中取出animations对象

 var jazaSheet = new createjs.SpriteSheet ({
        "frames": {
            "width": 15,
            "height": 16,
            "numFrames": 8,
            "regX": 0,
            "regY": 0
        },
        "animations":{
            "walkDown": [0, 1, "walkDown", 2]
        },
        "images": {
            ["http://imgur.com/bLfR7TO"]
        }
    });

说明：

_calculateFrames()函数使用私有变量images。行464创建一个以array.length作为一个参数的循环。由于数组为null（参数中为拼写错误），因此抛出TypeError异常。

如何用EaselJS创建一个精灵？

1 个答案: