在播放时调整 EaselJS 动画的大小而不会降低浏览器的速度

Question

我正在创建一个基于浏览器的足球经理游戏。

我还处于早期阶段，并且正在学习中。我从过去的项目中获得了一些编程经验。我正在使用 2D，同时通过减小尺寸等来模拟 z 轴以考虑感知距离。我已经计算了我的“z 轴”所需的尺寸缩减公式，但现在正在尝试实现它。

这是我目前所拥有的：

imgPlayerARun 是我拥有的精灵表 - 高 54 像素，宽 540 像素（又名 10 帧）。该图像是用 javascript（又名image = new Image()）创建的，然后我使用createjs.SpriteSheet() 函数和createjs.BitmapAnimation(spriteSheet) 对其进行动画处理。这很好用。

但是现在我需要这个动画在“远离”用户移动时减小尺寸（也就是当 z 增加时动画尺寸减小）。我可以使用简单的方法减少图像的高度和宽度属性：

image.height = *newsize;

但是，由于我已经在开始时将此图像输入到 spritesheet 中，因此动画不会自行调整大小。

这是我每次调整大小都必须重建精灵表和动画的情况吗？如果是这样，这不会减慢我的浏览器速度吗？ （好像玩家沿着 z 轴运行，那么几乎每隔几个像素就需要调整大小）还有其他方法吗？

这是一些显示我的问题的简化代码：

html:

<script src="http://code.createjs.com/easeljs-0.6.0.min.js"></script><style type="text/css"></style>
<canvas id='gameOverlay' width='748' height='440'></canvas>
<script type="text/javascript" src="../libraries/jquery.js"></script>

css:

#gameOverlay {
background:green; }

JavaScript：

var canvas;
var stage;
var screen_width;
var screen_height;
var bmpAnimation;

var imgPlayerARun = new Image();

function resizeImage(image) {
    if(image) {
        image.height = image.height*0.75;
        image.width = image.width*0.75;
    } else alert("No such image");
}

function init() {
    //find canvas and load images, wait for last image to load
    canvas = document.getElementById("gameOverlay");

    imgPlayerARun.onload = handleImageLoad;
    imgPlayerARun.onerror = handleImageError;
    imgPlayerARun.src = "http://s14.postimg.org/6sx25uafl/Run.png";
}

function reset() {
    stage.removeAllChildren();
    createjs.Ticker.removeAllListeners();
    stage.update();
}

function handleImageLoad(e) {
    startGame();
}

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: [imgPlayerARun], 
        // width, height & registration point of each sprite
        frames: { width: 54, height: 54, regX: 32, regY: -320 }, 
        // To slow down the animation loop of the sprite, we set the frequency to 4 to slow down by a 4x factor
        animations: {
            walk: [0, 9, "walk", 4]
        }
    });

    // to save file size, the loaded sprite sheet only includes left facing animations
    // we could flip the display objects with scaleX=-1, but this is expensive in most browsers
    // instead, we generate a new sprite sheet which includes the flipped animations
    createjs.SpriteSheetUtils.addFlippedFrames(spriteSheet, true, false, false);

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

    // set the registration point (the point it will be positioned and rotated around)
    // to the center of the frame dimensions:
    bmpAnimation.regX = bmpAnimation.spriteSheet.frameWidth/2|0;
    bmpAnimation.regY = bmpAnimation.spriteSheet.frameHeight / 2 | 0;

    // start playing the first sequence:
    // walk_h has been generated by addFlippedFrames and
    // contained the right facing animations
    bmpAnimation.gotoAndPlay("walk_h");     //walking from left to right

    // 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 = "Player1";
    bmpAnimation.direction = 90;
    bmpAnimation.vX = 1;
    bmpAnimation.x = 16;
    bmpAnimation.y = 32;

    // have each Player start at a specific frame
    bmpAnimation.currentFrame = 10;
    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;
        bmpAnimation.gotoAndPlay("walk");
        resizeImage(imgPlayerARun);
    }

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

    // 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();
}

到目前为止，它实际上并没有调整大小。动画只是从左到右再回来。

对于这个问题，有人可以帮助我，当它碰到右侧时，它的大小会减小 0.75（请参阅不完整的 resizeImage() 函数），而不会降低动画/浏览器的性能。 （请记住，这将扩大到更多玩家定期缩小尺寸）

Answer 1

您可以缩放任何显示对象，包括 Sprites (BitmapAnimation)、位图等。我的建议是在舞台上缩放包含所有内容的容器。请注意，您目前无法设置宽度/高度，您必须确定新的比例，并使用 scaleX/scaleY 属性。

var originalWidth = 800;
var newWidth = 600;
var ratio = newWidth / originalWidth;
container.scaleX = container.scaleY = ratio;

缩放舞台本身是可能的，但会引起一些有趣的问题，因此不建议这样做。