Question

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

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

这是我到目前为止所拥有的：

imgPlayerARun是我的精灵表 - 54像素高，540像素宽（又名10帧）。此图片是在javascript（又名image = new Image()）中创建的，然后我使用createjs.SpriteSheet()函数和createjs.BitmapAnimation(spriteSheet)为其设置动画。这很好。

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

image.height = *newsize;

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

我是否需要在每次调整大小时重建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

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

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

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

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

1 个答案: