public render(viewport : Viewport) {
    let context = viewport.getContext();
    let dimensions = viewport.getDimensions();

    this.renderEnergyBar_(context, dimensions);
    this.renderNearShipEnergyDisplay_(context, dimensions);
  }

  public render(viewport : Viewport) {
    let dimensions = viewport.getDimensions();
    let x = Math.floor(this.repel_.getPosition().x - dimensions.left - this.animation_.width / 2);
    let y = Math.floor(this.repel_.getPosition().y - dimensions.top - this.animation_.height / 2);

    this.animation_.render(viewport.getContext(), x, y);
  }

  public render(viewport : Viewport) {
    if (!this.bomb_.isValid()) {
      this.invalidate();
      return;
    }

    let dimensions = viewport.getDimensions();
    let x = Math.floor(this.bomb_.getPosition().x - dimensions.left - this.animation_.width / 2);
    let y = Math.floor(this.bomb_.getPosition().y - dimensions.top - this.animation_.height / 2);

    if (!this.bomb_.isMine() && this.bomb_.isBouncing()) {
      this.bouncingAnimation_.render(viewport.getContext(), x, y);
    } else {
      this.animation_.render(viewport.getContext(), x, y);
    }
  }

 public render(viewport : Viewport) {
   let context = viewport.getContext();
   context.save();
   context.fillStyle = '#000';
   context.fillRect(0, 0, context.canvas.width, context.canvas.height);
   for (let i = 0; i < this.layers_.length; ++i) {
     this.layers_[i].forEach(function (drawable) {
       drawable.render(viewport);
     });
   }
   context.restore();
 }

  public render(viewport : Viewport) {
    if (!this.burst_.isValid()) {
      this.invalidate();
      return;
    }

    let animation = this.burst_.isActive() ? this.activeAnimation_ : this.inactiveAnimation_;
    let dimensions = viewport.getDimensions();
    let x = Math.floor(this.burst_.getPosition().x - dimensions.left - animation.width / 2);
    let y = Math.floor(this.burst_.getPosition().y - dimensions.top - animation.height / 2);

    animation.render(viewport.getContext(), x, y);
  }

  public render(viewport : Viewport) {
    if (!this.bullet_.isValid()) {
      this.invalidate();
      return;
    }

    if (Labs.BULLET_TRAILS) {
      let animation = this.game_.getResourceManager().getSpriteSheet('bulletTrails').getAnimation(3 + this.bullet_.getLevel());
      new Effect(this.game_, animation, this.bullet_.getPosition(), Vector.ZERO, Layer.TRAILS);
    }

    let dimensions = viewport.getDimensions();
    let x = Math.floor(this.bullet_.getPosition().x - dimensions.left - this.animation_.width / 2);
    let y = Math.floor(this.bullet_.getPosition().y - dimensions.top - this.animation_.height / 2);
    let animation = this.bullet_.isBouncing() ? this.bouncingAnimation_ : this.animation_;

    animation.render(viewport.getContext(), x, y);
  }

  public render(viewport : Viewport) {
    if (!this.player_.isValid()) {
      this.game_.getPainter().unregisterDrawable(this.layer_, this);
      return;
    }

    let context = viewport.getContext();
    let dimensions = viewport.getDimensions();

    if (!this.player_.isAlive) {
      let millis = Timer.ticksToMillis(this.localPlayer_.getRespawnTimer());
      let seconds = Math.floor(millis / 1000);
      let tenths = Math.floor((millis % 1000) / 100);
      let time = seconds + '.' + tenths;
      context.save();
      context.font = Font.playerFont().toString();
      context.fillStyle = Palette.friendColor();
      context.fillText(time, dimensions.width / 2, dimensions.height / 2);
      context.restore();
      return;
    }

    this.localPlayer_.getExhaust().forEach((e : Exhaust) => {
      const image = this.resourceManager_.getImage('exhaust');
      const x = Math.floor(e.position.x - dimensions.left - image.tileWidth / 2);
      const y = Math.floor(e.position.y - dimensions.top - image.tileHeight / 2);
      image.render(context, x, y, e.frame);
    });

    super.render(viewport);

    let x = Math.floor(dimensions.width / 2);
    let y = Math.floor(dimensions.height / 2);
    if (this.localPlayer_.isSafe()) {
      context.save();
      context.font = Font.playerFont().toString();
      context.fillStyle = Palette.friendColor();
      context.textAlign = 'center';
      context.textBaseline = 'top';
      context.fillText('Safety - weapons disabled.', x, y - 50);
      context.restore();
    }
  }

  /**
   * This function renders the given |player| with an override for |direction| and
   * |position|. It's used to share player rendering code between PlayerSprite
   * and DecoySprite.
   */
  public static renderPlayer(game : Game, viewport : Viewport, player : Player, direction : number, position : Vector) {
    let resourceManager = game.getResourceManager();
    let shipImage = resourceManager.getImage('ship' + player.ship);

    let dimensions = viewport.getDimensions();
    let context = viewport.getContext();

    let x = Math.floor(position.x - dimensions.left - shipImage.tileWidth / 2);
    let y = Math.floor(position.y - dimensions.top - shipImage.tileHeight / 2);

    shipImage.render(context, x, y, direction);

    // Draw a label for the player's name.
    let name = player.name;
    let bounty = player.bounty;
    let isFriend = player.isFriend(game.simulation.playerList.localPlayer);
    context.save();
    context.font = Font.playerFont().toString();
    context.fillStyle = isFriend ? Palette.friendColor() : Palette.foeColor();
    context.textAlign = 'center';
    context.textBaseline = 'top';
    context.fillText(name + '(' + bounty + ')', x + shipImage.tileWidth / 2, y + shipImage.tileHeight);
    context.restore();

    // Draw a presence indicator for the player if applicable.
    let presenceImage : Image | null = null;
    if (player.hasPresence(Player.Presence.AWAY)) {
      presenceImage = resourceManager.getImage('presenceAway');
    } else if (player.hasPresence(Player.Presence.TYPING)) {
      presenceImage = resourceManager.getImage('presenceTyping');
    }

    if (presenceImage) {
      let speechX = x + shipImage.tileWidth - Math.floor(presenceImage.tileWidth / 2);
      let speechY = y - Math.floor(presenceImage.tileHeight / 2);
      presenceImage.render(context, speechX, speechY);
    }
  }

  public render(viewport : Viewport) {
    let map = this.map_;
    let dimensions = viewport.getDimensions();
    let context = viewport.getContext();

    let tileWidth = this.tileset_.tileWidth;
    let tileHeight = this.tileset_.tileHeight;

    context.save();
    let halfWidth = Math.floor(dimensions.width / 2);
    let halfHeight = Math.floor(dimensions.height / 2);

    // Render one extra tile around the top and left in case we have a large
    // rock that's only partially protruding into the viewport.
    let leftTile = Math.floor((dimensions.x - halfWidth) / tileWidth) - 1;
    let topTile = Math.floor((dimensions.y - halfHeight) / tileHeight) - 1;
    let numHorizTiles = Math.ceil(dimensions.width / tileWidth) + 1;
    let numVertTiles = Math.ceil(dimensions.height / tileHeight) + 1;

    // Don't render tiles before 0th index.
    topTile = Math.max(topTile, 0);
    leftTile = Math.max(leftTile, 0);

    // Don't draw tiles past the map width/height.
    if (topTile + numVertTiles >= map.getHeight()) {
      numVertTiles = map.getHeight() - topTile - 1;
    }

    if (leftTile + numHorizTiles >= map.getWidth()) {
      numHorizTiles = map.getWidth() - leftTile - 1;
    }

    for (let y = topTile; y <= topTile + numVertTiles; ++y) {
      for (let x = leftTile; x <= leftTile + numHorizTiles; ++x) {
        let tileNum = map.getTile(x, y);
        if (tileNum == TileType.NONE) {
          continue;
        }

        let tileProperties = map.getTileProperties(tileNum);
        let index = tileProperties['index'];
        if (!tileProperties['animated']) {
          this.tileset_.render(context,
            x * tileWidth - dimensions.x + halfWidth,
            y * tileHeight - dimensions.y + halfHeight,
            index);
        } else {
          // Animated tile.
          if (!this.animations_[index]) {
            this.animations_[index] = this.resourceManager_.getSpriteSheet('anim' + index).getAnimation(0);
            this.animations_[index].setRepeatCount(-1);
          }
          this.animations_[index].render(context,
            x * tileWidth - dimensions.x + halfWidth,
            y * tileHeight - dimensions.y + halfHeight);
        }
      }
    }

    context.restore();
  }