调整EaselJS动画的大小，同时'It’It’s播放时不会放慢浏览器的速度

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

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

到目前为止，我拥有的是：

imgPlayerARun是一张我有-54px高乘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（）函数），而不会降低动画/浏览器性能。（请记住，这将扩大到更多玩家定期缩小规模）