为什么我的精灵不会出现在我的背景之上？

Question

我一直在练习在我将要制作的游戏中使用 sprite，并且已经观看和阅读了一些教程，我认为我已经接近让我的 sprite 出现，所以我终于可以开始我的游戏了，但是在练习时我无法让它工作，我没有 2 个单独的教程，我可以让精灵和背景自己出现，但不能让它们一起工作，我也一直在使用 EaselJS。一些精灵动画代码也是从教程中复制的。

<!DOCTYPE HTML>
<html>
    <head>
       <meta charset="UTF-8">
       <title>sprite prac<title>

       <!-- EaselJS library -->
       <script src="lib/easel.js"></script>
        <script>



            // Initialize on start up so game runs smoothly
            function init() {

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

               bg = new Image();
               bg.src = "img/grassbg.jpg";
               bg.onload = setBG;
               stage.addChild(background);

                imgMonsterARun = new Image();
                imgMonsterARun.onload = handleImageLoad;
                imgMonsterARun.onerror = handleImageError;
                imgMonsterARun.src = "img/MonsterARun.png";

               stage.update();
            }

            function handleImageLoad(e) {
                startGame();
            }

            // Simple function for setting up the background
            function setBG(event){
               var bgrnd = new Bitmap(bg);
               stage.addChild(bgrnd);
               stage.update();
            }

            function startGame() {
    // create a new stage and point it at our canvas:
    stage = new createjs.Stage(canvas);

    // grab canvas width and height for later calculations:
    screen_width = canvas.width;
    screen_height = canvas.height;

    // create spritesheet and assign the associated data.
    var spriteSheet = new createjs.SpriteSheet({
        // image to use
        images: [imgMonsterARun], 
        // width, height & registration point of each sprite
        frames: {width: 64, height: 64, regX: 32, regY: 32}, 
        animations: {   
            walk: [0, 9, "walk"]
        }
    });

    // create a BitmapAnimation instance to display and play back the sprite sheet:
    bmpAnimation = new createjs.BitmapAnimation(spriteSheet);

    // start playing the first sequence:
    bmpAnimation.gotoAndPlay("walk");   //animate

    // set up a shadow. Note that shadows are ridiculously expensive. You could display hundreds
    // of animated rats if you disabled the shadow.
    bmpAnimation.shadow = new createjs.Shadow("#454", 0, 5, 4);

    bmpAnimation.name = "monster1";
    bmpAnimation.direction = 90;
    bmpAnimation.vX = 4;
    bmpAnimation.x = 16;
    bmpAnimation.y = 32;

    // have each monster start at a specific frame
    bmpAnimation.currentFrame = 0;
    stage.addChild(bmpAnimation);

    // we want to do some work before we update the canvas,
    // otherwise we could use Ticker.addListener(stage);
    createjs.Ticker.addListener(window);
    createjs.Ticker.useRAF = true;
    createjs.Ticker.setFPS(60);
}

//called if there is an error loading the image (usually due to a 404)
function handleImageError(e) {
    console.log("Error Loading Image : " + e.target.src);
}

function tick() {
    // Hit testing the screen width, otherwise our sprite would disappear
    if (bmpAnimation.x >= screen_width - 16) {
        // We've reached the right side of our screen
        // We need to walk left now to go back to our initial position
        bmpAnimation.direction = -90;
    }

    if (bmpAnimation.x < 16) {
        // We've reached the left side of our screen
        // We need to walk right now
        bmpAnimation.direction = 90;
    }

    // Moving the sprite based on the direction & the speed
    if (bmpAnimation.direction == 90) {
        bmpAnimation.x += bmpAnimation.vX;
    }
    else {
        bmpAnimation.x -= bmpAnimation.vX;
    }

    // update the stage:
    stage.update();
}




        </script>

    </head>

    <body onload="init();">
       <canvas id="canvas" width="500" height="500" style="border: thin black solid;" ></canvas>
    </body>
</html>

Answer 1

您在一些地方使用了一些非常古老的 API，这些 API 可能受支持也可能不受支持，具体取决于您的 EaselJS 版本。你从哪里得到你引用的 easel.js 脚本？

假设您的 EaselJS 版本与您正在使用的 API 相匹配，则存在一些问题：

您将 background 添加到舞台。没有 background，所以你添加它时可能会出错。您已经在 setBackground 方法中添加了 bgrnd，这应该没问题。 如果您在此处遇到错误，那么这可能是您的主要问题。
您不需要在每次添加内容时更新舞台，只需在您希望舞台 "refresh" 时更新舞台。在您的代码中，您在设置背景后更新，并在 init() 结束时再次更新。这些将一个接一个地发射。

您的控制台是否出现错误？那将是开始调试的好地方。如果您仍然遇到问题，我还建议您发布代码以展示实际演示，这将有助于确定发生了什么。

如果你有更新版本的 EaselJS:

BitmapAnimation 现在是 Sprite，不支持 direction。要翻转精灵，请使用 scaleX=-1
Ticker 不再使用 addListener。相反，它使用 EventDispatcher。 createjs.Ticker.addEventListener("tick", tickFunction);

您可以在 http://code.createjs.com, and you can get updated examples and code on the website and GitHub 获得新版本的 CreateJS 库。

为什么我的精灵不会出现在我的背景之上？

Why wont my sprite appear on top of my background?

html

javascript

css

2d-games

easeljs