为什么我的画布不显示我的精灵？答案

【问题标题】：Why wont my canvas show my sprite?为什么我的画布不显示我的精灵？
【发布时间】：2014-07-11 07:33:12
【问题描述】：

我目前正在学习 javascript，并且正在尝试制作一些游戏来帮助它变得更有趣/有趣。问题是我正在使用 EaselJS 和 CreateJS 来制作游戏，而我才刚刚开始。

Anywho.. 我需要一些帮助来了解为什么我的画布元素不会显示我正在使用的精灵。

这是html文件：

<head>

<!-- Note: All core EaselJS classes are listed here: -->
<script type="text/javascript" src="../EaselJS/src/createjs/events/Event.js"></script>
<script type="text/javascript" src="../EaselJS/src/createjs/events/EventDispatcher.js"></script>
<script type="text/javascript" src="../EaselJS/src/createjs/utils/IndexOf.js"></script>
<script type="text/javascript" src="../EaselJS/src/easeljs/utils/UID.js"></script>
<script type="text/javascript" src="../EaselJS/src/easeljs/utils/Ticker.js"></script>
<script type="text/javascript" src="../EaselJS/src/easeljs/geom/Matrix2D.js"></script>
<script type="text/javascript" src="../EaselJS/src/easeljs/geom/Point.js"></script>
<script type="text/javascript" src="../EaselJS/src/easeljs/geom/Rectangle.js"></script>
<script type="text/javascript" src="../EaselJS/src/easeljs/display/Shadow.js"></script>
<script type="text/javascript" src="../EaselJS/src/easeljs/display/SpriteSheet.js"></script>
<script type="text/javascript" src="../EaselJS/src/easeljs/display/Graphics.js"></script>
<script type="text/javascript" src="../EaselJS/src/easeljs/display/DisplayObject.js"></script>
<script type="text/javascript" src="../EaselJS/src/easeljs/display/Container.js"></script>
<script type="text/javascript" src="../EaselJS/src/easeljs/display/Stage.js"></script>
<script type="text/javascript" src="../EaselJS/src/easeljs/display/Bitmap.js"></script>
<script type="text/javascript" src="../EaselJS/src/easeljs/display/Sprite.js"></script>
<script type="text/javascript" src="../EaselJS/src/easeljs/display/BitmapAnimation.js"></script>
<script type="text/javascript" src="../EaselJS/src/easeljs/display/BitmapText.js"></script>
<script type="text/javascript" src="../EaselJS/src/easeljs/display/Shape.js"></script>
<script type="text/javascript" src="../EaselJS/src/easeljs/display/Text.js"></script>
<script type="text/javascript" src="../EaselJS/src/easeljs/display/DOMElement.js"></script>
<script type="text/javascript" src="../EaselJS/src/easeljs/events/MouseEvent.js"></script>
<script type="text/javascript" src="../EaselJS/src/easeljs/filters/Filter.js"></script>
<script type="text/javascript" src="../EaselJS/src/easeljs/ui/ButtonHelper.js"></script>
<script type="text/javascript" src="../EaselJS/src/easeljs/ui/Touch.js"></script>
<script type="text/javascript" src="../EaselJS/src/easeljs/utils/SpriteSheetUtils.js"></script>
<script type="text/javascript" src="../EaselJS/src/easeljs/utils/SpriteSheetBuilder.js"></script>

<!-- We also provide hosted minified versions of all CreateJS libraries.
    http://code.createjs.com -->

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>

<!-- using this because for some reason the Player and Game files don't work without it -->
<script src="http://code.createjs.com/easeljs-0.5.0.min.js"></script>

<script src="javascript/Player.js"></script>
<script src="javascript/Game.js"></script>

<script type="text/javascript">
    var game;

    var canvas = document.getElementById("gameScreen");
    var stage = new createjs.Stage(canvas);

    function startGame(){
        game = new Game(stage);
        game.StartGame();
    }
</script>

</head>
<body onload="startGame();">
    <div id="test"><p>blah blah blah</p></div>
    <div id="canvasHolder">
        <canvas id="gameScreen" width="500" height="500"></canvas>
    </div>
</body>
</html>

这里是 Game.js：

(function (window){

var START_X_POS = 250;
var START_Y_POS = 20;

var LEFT_KEYCODE = 37;
var RIGHT_KEYCODE = 39;

var SPRITE_SHEET_PATH = "./assets/linkSprite.png"

//at some point add in canvas dimensions for collision stuff
function Game(stage){
    this.gameStage = stage;
    this.Hero = new Player(SPRITE_SHEET_PATH, START_X_POS, START_Y_POS);

    //store the current context
    var instance = this;

    document.onkeydown = function (e){
        instance.handleKeyDown(e);
    };
    document.onkeyup = function (e){
        instance.handleKeyUp(e);
    };

    this.gameStage.addChild(this.Hero);
    this.gameStage.update();
}

Game.prototype.Update = function (){
    this.Hero.tick();
};

Game.prototype.tick = function (){
    this.Update();
    this.gameStage.update();
};

// Starting the game
Game.prototype.StartGame = function () {
    createjs.Ticker.addListener(this);
    // Targeting 60 FPS
    createjs.Ticker.setFPS(60);
};

Game.prototype.handleKeyDown = function (e){
    //the caps constants kinda explain this
    if(e.keyCode === LEFT_KEYCODE){
        this.Hero.direction = -1;
        console.log("handleKeyDown left");
    }else if(e.keyCode === RIGHT_KEYCODE){
        this.Hero.direction = 1;
        console.log("handleKeyDown right");
    }
}

Game.prototype.handleKeyUp = function (e){
    //setting it back to idle animation
    this.Hero.direction = 0;
}

window.Game = Game;
} (window));

这里是 Player.js：

(function (window){

function Player(spriteSheet, startX, startY){
    this.setup(spriteSheet, startX, startY);
}

//spriteSheet is the path to the player sprite
Player.prototype.setup = function (spriteSheet, startPosX, startPosY){
    //load the sprite sheet
    var localSpriteSheet = new createjs.SpriteSheet({
        "animations": {
            "run": [0, 6, "run"],
            "jump": [7, 9, "jump"],
            "idle": [31, 31, "idle"]},
        "images": [spriteSheet],
        "frames":
        {
            "height": 64,
            "width": 64,
            "regX": 0,
            "regY": 0,
            "count": 64
        }
    });

    //use X and Y to position
    this.x = startPosX;
    this.y = startPosY;
    this.sprite = new createjs.Sprite(localSpriteSheet, "idle");

    //1 = right | -1 = left | 0 = idle
    this.direction = 0;
    this.name = "Hero";
};

Player.prototype.tick = function (){
    this.move();

    //now animate the sprite
    if(this.direction === 1){
        this.sprite.gotoAndPlay("run");
    }else if(this.direction === -1){
        this.sprite.gotoAndPlay("run");
    }else{
        this.sprite.gotoAndPlay("idle");
    }
};

Player.prototype.move = function (){
    if(this.direction === 1){
        this.x += 1;
    }else if(this.direction === -1){
        this.x -= 1;
    }else{
        this.x += 0;
    }
};

window.Player = Player;

} (window));

我的问题是我到底做错了什么，为什么我的精灵没有加载到我的画布中？

【问题讨论】：

好的，所以通过调试我发现当我调用 var stage = new createjs.Stage(canvas); 时由于某种原因画布为空。这可能是我的精灵没有被绘制的原因吗？
更改了 index.html 以将所有脚本包含在 startGame() 函数中，现在我收到错误 Uncaught TypeError: undefined is not a function on easeljs-0.5.0.min.js:66
Game.js 文件中有一个问题，我的 createjs.Ticker.addListener(this); 应该是 createjs.Tick.addEventListener(this);。工作正常，该更改没有错误，并将easeljs版本更新为最新版本，但我的精灵仍未被绘制到画布上
看起来你正在将你的英雄添加到舞台上，而不是 Hero.sprite
啊，是的，谢谢。但是html文件中game.StartGame()丢失范围的问题仍然是个问题。

标签： javascript html canvas easeljs createjs

【解决方案1】：

试试这个。

<script type="text/javascript">
    function startGame()
    {
        var game;

        var canvas = document.getElementById("gameScreen");
        var stage = new createjs.Stage(canvas);        

        game = new Game(stage);
        game.StartGame();            
    }
    </script>

【讨论】：

我已经尝试过了，但是在我调用 game.StartGame() 之后，game 中的刻度函数失去了它的作用域，当它尝试在 this.Hero.tick() 中调用 this.Hero.tick() 时抛出一个未定义的错误@
在你的代码中定义的这个“gameStage”在哪里我无法找到，因为tick只会用它来更新
index.html 中的stage 使用game = new Game(stage) 传递到游戏对象中，并在游戏对象中使用this.gameStage = stage 赋予它自己的属性