Измените размер анимации EaselJS, пока он играет, не замедляя работу браузера.

Question

Я занимаюсь созданием игры на основе футбольного менеджера на основе браузера.

Я нахожусь на ранних стадиях и изучаю, когда я иду. У меня есть опыт программирования из прошлых проектов. Я использую 2D, моделируя ось z, уменьшая размер и т. Д., Чтобы учитывать воспринимаемое расстояние. Я рассчитал формулу уменьшения размера, необходимую для моей оси «z», но теперь я пытаюсь ее реализовать.

Вот что я до сих пор:

imgPlayerARun является спрайт лист у меня есть - 54px высокий на 540 пикселей в ширину (так называемый 10 кадров). Это изображение создается в javascript (aka 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

Вы можете масштабировать любые отображаемые объекты, включая спрайты (BitmapAnimation), растровые изображения и т. д. - Моя рекомендация заключалась бы в масштабировании контейнера на этап со всем в нем. Обратите внимание, что вы не можете установить ширину/высоту, вам нужно будет определить новую шкалу и использовать свойства scaleX/scaleY.

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

Возможно масштабирование самой сцены, но это вызовет некоторые интересные проблемы, поэтому не рекомендуется.