EaselJS - 性能问题

Question

我用easelJS库实现了一个简单的赛车游戏。这是我第一次体验它，所以我可能做错了。尽管60fps和createjs.Ticker.timingMode = createjs.Ticker.RAF;

，我的精灵的移动并不顺畅

让我粘贴一些代码。 game.js

function init() {
  keys = new Keys();

  canvas = document.getElementById('canvas');
  stage = new createjs.Stage(canvas);
  stage.mouseEventsEnabled = true;
  stage.mouseMoveOutside = false;

  // Maximise the canvas
  canvas.width = CANVAS_WIDTH;
  canvas.height = CANVAS_HEIGHT;

  localPlayer = new Bike();
  localPlayer.init();

  setEventHandlers();
}

function setEventHandlers() {
  window.addEventListener("keydown", onKeydown, false);
  window.addEventListener("keyup", onKeyup, false);
  createjs.Ticker.addEventListener("tick", tick);
  createjs.Ticker.timingMode = createjs.Ticker.RAF;
}

function tick() {
  if (localPlayer.getSprite()) localPlayer.update();
  stage.update();
}

Keys只是一个处理向上和向下按箭头的类。 Bike是一个摩托车类，负责更新和绘制spritesheet。

bike.js

...

  function init() {
    img.onload = handleImageLoad;
    img.src = '/img/bikeSprite.png';
  }

  function handleImageLoad() {
    var spriteSheet = new createjs.SpriteSheet({
      // image to use
      images: [img],
      // width, height & registration point of each sprite
      frames: {
        width: 42,
        height: 42,
        regX: 21,
        regY: 21
      }
    });

    sprite = new createjs.Sprite(spriteSheet);
    sprite.regX = sprite.spriteSheet.frameWidth / 2 | 0;
    sprite.regY = sprite.spriteSheet.frameHeight / 2 | 0;
    sprite.gotoAndStop(BIKE_START_FRAME);

    sprite.x = (CANVAS_WIDTH / 2) - 20;
    sprite.y = (CANVAS_HEIGHT / 2) + (GRASS_HEIGHT / 2) + 50;
    stage.addChild(sprite);
  }

然后是我的主要更新方法：

function update() {
    clutch = keys.action ? true : false;

    // Thrust can happen only if clutch is not present.
    thrust = (!clutch && keys.up) ? true : false;

    // Turning
    if (keys.left) angleVel = -TURN_ANGLE;
    if (keys.right) angleVel = TURN_ANGLE;

    if (!keys.left && !keys.right) angleVel = 0;

    // Custom animation
    if (sprite && (!keys.left || !keys.right)) sprite.stop();

    velXY[0] *= (1 - friction);
    velXY[1] *= (1 - friction);

    angle += angleVel;

    if (angle >= MAX_ANGLE || angle <= -MAX_ANGLE) {
      angle = 0;
    }

    forward = angleToVector(angle);

    if (thrust) {
      if (angleVel === 0) {
        velXY[0] += forward[0] * SPEED * ACC * clutchFactor;
        velXY[1] += forward[1] * SPEED * ACC * clutchFactor;
      } else {
        velXY[0] += forward[0] * SPEED;
        velXY[1] += forward[1] * SPEED;
      }
    }

    if(keys.up && clutch) {
      if (clutchFactor < MAX_CLUTCH) {
        clutchFactor += 0.1;
      }
    } else {
      if (clutchFactor > MIN_CLUTCH) {
        clutchFactor -= 0.1;
      }
    }

    sprite.x += velXY[0];
    sprite.y += velXY[1];

    velocity = Math.sqrt((velXY[0] * velXY[0]) + (velXY[1] * velXY[1]));
    velocity = parseFloat(velocity).toFixed(2);

    if (sprite.x > canvas.width) {
      sprite.x = sprite.x % canvas.width;
    } else if (sprite.x < 0) {
      sprite.x = canvas.width + (sprite.x % canvas.width);
    }

    if (sprite.y > canvas.height) {
      sprite.y = sprite.y % canvas.height;
    } else if (sprite.y < 0) {
      sprite.y = canvas.height + (sprite.y % canvas.height);
    }

    if (keys.left) {
      if (leftOffset >= TURN_OFFSET) {
        leftOffset = 0;
        sprite.reverse();
      } else {
        leftOffset++;
      }
    }

    if (keys.right) {
      if (rightOffset >= TURN_OFFSET) {
        rightOffset = 0;
        sprite.forward();
      } else {
        rightOffset++;
      }
    }
  }

这些是我的全局：

var canvas
  , stage
  , keys
  , track
  , localPlayer = {};

我还有自定义方法reverse和forward：

createjs.Sprite.prototype.reverse = function() {
    var currentFrame = this._currentFrame
        , numFrames = this.spriteSheet.getNumFrames(this.currentAnimation);

    if (currentFrame <= 0) {
        currentFrame = numFrames - 1;
    } else {
        currentFrame--;
    }

    this.gotoAndStop(currentFrame);
};

createjs.Sprite.prototype.forward = function() {
    var currentFrame = this._currentFrame
        , numFrames = this.spriteSheet.getNumFrames(this.currentAnimation);

    if (currentFrame >= numFrames) {
        currentFrame = 0;
    } else {
        currentFrame++;
    }

    this.gotoAndStop(currentFrame);
};

我目前的应用可在此处测试： https://speedwayjs.herokuapp.com/ 你可以看到它不是非常流畅。