← Back to home
Workshop series

Game Object Size Depends on Orientation

Adaptive Layout for a Poki HTML5 Game Section 8 of 11

12. Game Object Size Depends on Orientation

Sticker size is not scaled the same way in every orientation.

In LevelStickerSizeResolver:

private resolveScale(): number {
  if (this.screen.getOrientation() === 'land') {
    return this.resolveLandscapeScale();
  }

  return this.resolvePortraitScale();
}

In portrait, scale grows from virtual width:

const virtualWidth = this.screen.getVirtualSize().width;
const extraRatio = Math.max(
  0,
  (virtualWidth - LevelStickerSizeResolver.BASELINE_VIRTUAL_WIDTH) /
    LevelStickerSizeResolver.BASELINE_VIRTUAL_WIDTH,
);

In landscape, scale grows from virtual height:

const virtualHeight = this.screen.getVirtualSize().height;

The object size follows the axis that actually defines useful gameplay space.