Javascript 调整EaselJS动画的大小，同时调整其大小'；在不减慢浏览器速度的情况下播放

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

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

以下是我目前掌握的情况：

imgPlayerARun

是一张精灵纸，高-54px，宽540像素（也称为10帧）。这个图像是用javascript创建的（aka

image=newimage（）

），然后我使用

createjs.SpriteSheet（）

函数和

createjs.BitmapAnimation（SpriteSheet）

对其进行动画制作。这个很好用

但是现在我需要这个动画在远离用户时缩小尺寸（也就是说，当z增大时，动画的尺寸减小）。我可以使用以下简单方法降低图像的高度和宽度属性：

image.height = *newsize;

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

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

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

html:

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

var画布；
var期；
屏幕宽度；
屏幕高度；
var bmpAnimation；
var imgPlayerARun=新图像（）；
函数大小图像（图像）{
如果（图像）{
image.height=image.height*0.75；
image.width=image.width*0.75；
}else alert（“无此类图像”）；
}
函数init（）{
//查找画布并加载图像，等待加载最后一个图像
canvas=document.getElementById（“gameOverlay”）；
IMGPlayerRun.onload=handleImageLoad；
imgPlayerARun.onerror=handleImageError；
imgPlayerARun.src=”http://s14.postimg.org/6sx25uafl/Run.png";
}
函数重置（）{
阶段。移除所有儿童（）；
createjs.Ticker.removeAllListeners（）；
stage.update（）；
}
函数handleImageLoad（e）{
startGame（）；
}
函数startName（）{
//创建一个新舞台并将其指向画布：
stage=newcreatejs.stage（画布）；
//抓取画布宽度和高度，以便以后计算：
屏幕宽度=画布宽度；
屏幕高度=画布高度；
//创建精灵表并指定关联的数据。
var spriteSheet=new createjs.spriteSheet({
//要使用的图像
图片：[imgPlayerARun]，
//每个精灵的宽度、高度和注册点
帧：{宽度：54，高度：54，regX:32，regY:-320}，
//为了降低精灵动画循环的速度，我们将频率设置为4以降低4倍的速度
动画：{
步行：[0,9，“步行”，4]
}
});
//若要保存文件大小，加载的精灵工作表仅包括左向动画
//我们可以使用scaleX=-1翻转显示对象，但在大多数浏览器中这是昂贵的
//相反，我们生成一个新的精灵表，其中包括翻转的动画
createjs.SpriteSheetUtils.addFlippedFrames（spriteSheet，true，false，false）；
//创建BitmapSequence实例以显示和播放精灵工作表：
bmpAnimation=新建createjs.BitmapAnimation（精灵表）；
//设置注册点（它将被定位和旋转的点）
//到框架尺寸的中心：
bmpAnimation.regX=bmpAnimation.spriteSheet.frameWidth/2 | 0；
bmpAnimation.regY=bmpAnimation.spriteSheet.frameHeight/2 | 0；
//开始播放第一个序列：
//walk_h已由addFlippedFrames和生成
//包含右向动画
bmpAnimation.gotoAndPlay（“walk_h”）；//从左向右行走
//设置一个阴影。请注意，阴影非常昂贵。您可以显示数百个阴影
//如果禁用阴影，则为已设置动画的老鼠。
//bmpAnimation.shadow=newcreatejs.shadow（“#454”，0,5,4）；
bmpAnimation.name=“Player1”；
bmpAnimation.direction=90；
bmpAnimation.vX=1；
bmpAnimation.x=16；
bmpAnimation.y=32；
//让每个玩家从一个特定的帧开始
bmpAnimation.currentFrame=10；
阶段。添加儿童（bmpAnimation）；
//我们想在更新画布之前做些工作，
//否则我们可以使用Ticker.addListener（stage）；
createjs.Ticker.addListener（窗口）；
createjs.Ticker.useRAF=true；
createjs.Ticker.setFPS（60）；
}
//如果加载图像时出错（通常是由于404错误），则调用
函数handleImageError（e）{
log（“加载映像时出错：+e.target.src”）；
}
函数tick（）{
//点击测试屏幕宽度，否则我们的精灵就会消失
如果（bmpAnimation.x>=屏幕宽度-16）{
//我们已经到达屏幕的右侧
//我们现在需要向左走才能回到初始位置
bmpAnimation.direction=-90；
bmpAnimation.gotoAndPlay（“步行”）；
调整图像大小（imgPlayerARun）；
}
如果（bmpAnimation.x<16）{
//我们已经到达屏幕的左侧
//我们现在需要走路
bmpAnimation.direction=90；
bmpAnimation.gotoAndPlay（“walk_h”）；
}
//根据方向和速度移动精灵
如果（bmpAnimation.direction==90）{
bmpAnimation.x+=bmpAnimation.vX；
}
否则{
bmpAnimation.x-=bmpAnimation.vX；
}
//更新阶段：
stage.update（）；
}

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

对于这个问题，有人能帮我解决一下吗？当它击中右侧时，它的大小会减小0.75（请参阅不完整的resizeImage（）函数），而不会降低动画/浏览器的性能。（记住

#gameOverlay {
background:green; }

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

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