Question

我一直在练习使用精灵来制作我要制作的游戏并观看和阅读一些教程，我认为我已经接近让我的精灵出现所以我终于可以开始我的游戏但是在练习的时候我无法得到它工作，我没有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，根据您的EaselJS版本，可能支持也可能不支持。你在哪里得到你引用的easel.js脚本？

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

您将background添加到舞台。没有background，因此您在添加时可能会收到错误。您已经在bgrnd方法中添加setBackground，这应该没问题。 如果您在此处收到错误，那么这可能是您的主要问题。
只要您想让舞台“刷新”，您就无需在添加任何内容时更新舞台。在您的代码中，您在设置背景后更新，并在init（）结束时立即再次更新。这些将一个接一个地开火。

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

如果你有更新版本的EaselJS：

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

您可以在http://code.createjs.com获取新版本的CreateJS库，并且可以在website和GitHub上获取更新的示例和代码。

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

1 个答案: