javascript - EaselJS( Sprite 动画不会在对 Angular 线方向播放)

Question

我遇到一个问题，游戏 Sprite 动画在对 Angular 线移动期间不播放，它只是卡在对 Angular 线动画的第一帧。如果有人知道发生了什么，我将不胜感激。

function init() {

    'use strict';

    var menuSelected = false;

    var shape = new createjs.Shape();
    var g = shape.graphics;
    shape.graphics.beginFill("#ffffff").drawRect(100, 300, 450, 100, 25);

    var $container, canvas, stage, canvasW, canvasH,
        manifest, totalLoaded, queue,
        map1, mapTiles, game, mapWidth, mapHeight, tileSheet, tiles, board,
        player, playerSheet, firstKey,
        keysPressed = {
            38: 0,
            40: 0,
            37: 0,
            39: 0
        };

    $container = document.getElementById("container");
    canvasW = 640;
    canvasH = 416;

    map1 = [
        [2, 1, 1, 0, 0, 0, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1],
        [2, 1, 1, 1, 0, 0, 0, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1],
        [2, 1, 1, 1, 0, 0, 0, 1, 1, 1, 0, 0, 0, 0, 1, 1, 1, 1, 1, 1],
        [2, 1, 1, 1, 1, 0, 0, 0, 1, 0, 0, 0, 0, 0, 0, 1, 1, 1, 1, 1],
        [2, 1, 1, 1, 1, 1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1, 1, 1, 1],
        [2, 1, 1, 1, 1, 1, 0, 0, 0, 0, 1, 1, 1, 0, 0, 0, 0, 1, 1, 1],
        [2, 1, 1, 1, 1, 1, 1, 0, 0, 1, 1, 1, 1, 1, 0, 0, 0, 1, 1, 1],
        [2, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 0, 0, 0, 1, 1],
        [2, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 0, 0, 0, 1, 1],
        [2, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 0, 0, 0, 0],
        [2, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 0, 0, 0, 0],
        [2, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 0, 0, 0],
        [2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 1, 1, 1, 1, 1, 1, 1, 1],
    ];
    mapTiles = {};

    function buildMap(map) {

        var row, col, tileClone, tileIndex, defineTile;

        if (!board) {
            board = new createjs.Container();
            board.x = 0;
            board.y = 0;
            stage.addChild(board);
        }

        mapWidth = map[0].length;
        mapHeight = map.length;

        defineTile = {
            walkable: function (row, col) {
                if (map[row][col] === 0) {
                    return false;
                } else {
                    return true;
                }
            }
        };

        tileIndex = 0;
        for (row = 0; row < mapHeight; row++) {
            for (col = 0; col < mapWidth; col++) {
                tileClone = tiles.clone();
                tileClone.name = "t_" + row + "_" + col;
                tileClone.gotoAndStop(map[row][col]);
                tileClone.x = col * tileSheet._frameWidth;
                tileClone.y = row * tileSheet._frameHeight;
                mapTiles["t_" + row + "_" + col] = {
                    index: tileIndex,
                    walkable: defineTile.walkable(row, col)
                };
                tileIndex++;
                board.addChild(tileClone);
            }
        }

    }

    function addPlayer(x, y) { 
        player.x = x * tileSheet._frameWidth + (tileSheet._frameWidth / 2);
        player.y = y * tileSheet._frameHeight + (tileSheet._frameHeight / 2);
        player.speed = 6;
        player.height = 96;
        player.width = 96;
        player.gotoAndStop("standDown");
        board.addChild(player);
    }

    function moveChar(char, dirx, diry) {       
        if (dirx === 0) {
             char.y += diry * char.speed;
           }
        if (diry === 0) {
               char.x += dirx * char.speed;
        }
    }

    document.addEventListener("keydown", function (e) {
        keysPressed[e.keyCode] = 1;
        if (!firstKey) { firstKey = e.keyCode; }
    });

    document.addEventListener("keyup", function (e) {
        if (keysPressed[88] === 1) {
            menuSelected = !(menuSelected); 
        }

        keysPressed[e.keyCode] = 0;
        if (firstKey === e.keyCode) { firstKey = null; }
        if (player.currentAnimation == "walkDown") { player.gotoAndStop("standDown");}
        if (player.currentAnimation == "walkRight") { player.gotoAndStop("standRight");}
        if (player.currentAnimation == "walkUp") { player.gotoAndStop("standUp");}
        if (player.currentAnimation == "walkLeft") { player.gotoAndStop("standLeft");}
        if (player.currentAnimation == "walkDiagUpRight") { player.gotoAndStop("standDiagUpRight");}
        if (player.currentAnimation == "walkDiagUpLeft") { player.gotoAndStop("standDiagUpLeft");}
        if (player.currentAnimation == "walkDiagDownRight") { player.gotoAndStop("standDiagDownRight");}
        if (player.currentAnimation == "walkDiagDownLeft") { player.gotoAndStop("standDiagDownLeft");}
    });

    function detectKeys() {
        if (keysPressed[38] === 1) {    
            if (player.currentAnimation !== "walkUp") { player.gotoAndPlay("walkUp"); }
            moveChar(player, 0, -1);
        }
        if (keysPressed[40] === 1) {   
            if (player.currentAnimation !== "walkDown") { player.gotoAndPlay("walkDown"); }
            moveChar(player, 0, 1);
        }
        if (keysPressed[37] === 1) { 
            if (player.currentAnimation !== "walkLeft") { player.gotoAndPlay("walkLeft"); }
            moveChar(player, -1, 0);
        }
        if (keysPressed[39] === 1) {    
            if (player.currentAnimation !== "walkRight") { player.gotoAndPlay("walkRight"); }
            moveChar(player, 1, 0);
        }

        // diagonal movement
       if (keysPressed[38] === 1 && keysPressed[37] === 1) {
            player.gotoAndPlay("walkDiagUpLeft");
        }
        if (keysPressed[38] === 1 && keysPressed[39] === 1) {
            player.gotoAndPlay("walkDiagUpRight");
        }
        if (keysPressed[40] === 1 && keysPressed[37] === 1) {
            player.gotoAndPlay("walkDiagDownLeft");
        }
        if (keysPressed[40] === 1 && keysPressed[39] === 1) {
            player.gotoAndPlay("walkDiagDownRight");
        }  
    }

    function handleTick() {
        detectKeys();
        if (menuSelected === true) {
            stage.addChild(shape);
        }
        if (menuSelected === false) {
            stage.removeChild(shape);
        }
        stage.update();
    }

    function gameInit() {
        manifest = [
            {src: "img/tileset.png", id: "tiles"},
            {src: "img/swordsman-spritesheet.png", id: "player"}
        ];
        totalLoaded = 0;

        function handleLoadComplete(event) {
            totalLoaded++;
            if (totalLoaded < manifest.length) {
                console.log(totalLoaded + "/" + manifest.length + " loaded");
            }
        }

        function handleFileLoad(event) {
            var img, audio;
            if (event.item.type === "image") {
                img = new Image();
                img.src = event.item.src;
                img.onload = handleLoadComplete;
            } else if (event.item.type === "sound") {
                audio = new Audio();
                audio.src = event.item.src;
                audio.onload = handleLoadComplete;
            }
        }

        function handleComplete(event) {
            buildMap(map1);
            addPlayer(3, 4, 0);
        }

        queue = new createjs.LoadQueue(false);
        queue.installPlugin(createjs.SoundJS);
        queue.addEventListener("fileload", handleFileLoad);
        queue.addEventListener("complete", handleComplete);
        queue.loadManifest(manifest);

        canvas = document.getElementById("canvas");
        stage = new createjs.Stage(canvas);
        stage.enableMouseOver(30);
        createjs.Touch.enable(stage);
        createjs.Ticker.setFPS(30);
        createjs.Ticker.useRAF = true;
        createjs.Ticker.addEventListener("tick", handleTick);

        tileSheet = new createjs.SpriteSheet({
            images: ["img/tileset.png"],
            frames: {
                height: 32,
                width: 32,
                regX: 0,
                regY: 0,
                count: 3
            }
        });

        tiles = new createjs.Sprite(tileSheet);

        playerSheet = new createjs.SpriteSheet({
             animations: {
                    standRight:[0],
                    standDown:[32],
                    standLeft:[57],
                    standUp:[8],
                    standDiagUpRight:[16],
                    standDiagUpLeft:[24],
                    standDiagDownLeft:[48],
                    standDiagDownRight:[40],
                    walkDiagUpRight:[16,23,"walkDiagUpRight"],
                    walkDiagUpLeft:[24,31,"walkDiagUpLeft"],
                    walkDiagDownRight:[39,46,"walkDiagDownRight"],
                    walkDiagDownLeft:[47,55,"walkDiagDownLeft"],
                    walkRight:[0,7,"walkRight"], 
                    walkLeft:[57,63,"walkLeft"], 
                    walkUp:[8,15,"walkUp"], 
                    walkDown:[32,39,"walkDown"]},
            images: ["img/swordsman-spritesheet.png"],
            frames: {width:96, height:96, regX:48, regY:48 }
        });

        player = new createjs.Sprite(playerSheet);

    }
    gameInit();
}

Answer 1

您的 sprite 动画永远没有机会在对 Angular 线上运行，因为您在每个刻度上调用 detectKeys()，如果对 Angular 键组合评估为真，它会重新开始动画。通过首先检查您的玩家是否已经在 gotoAndPlay 之前行走，您在常规行走动画中有了正确的想法，如下所示:

if (keysPressed[38] === 1) {    
    if (player.currentAnimation !== "walkUp") { player.gotoAndPlay("walkUp"); }
    moveChar(player, 0, -1);
}

您也需要为您的对 Angular 线执行此操作。像这样的东西:

if (keysPressed[38] === 1 && keysPressed[37] === 1) {
    if(player.currentAnimation !== "walkDiagUpLeft") { player.gotoAndPlay("walkDiagUpLeft"); }
}