CASCADA Framework

Appearance

ViewportManager ​

Utility for managing adaptive viewport.

Import ​

typescript
import { ViewportManager } from "@utils/ViewportManager";

Constructor ​

typescript
constructor(scene: Phaser.Scene)

Parameters ​

  • scene - Phaser scene

Example ​

typescript
const viewportManager = new ViewportManager(this);

Methods ​

init(callback?) ​

Initialize with optional callback for tracking changes.

typescript
init(callback?: (width: number, height: number) => void): void

Example ​

typescript
viewportManager.init((width, height) => {
  console.log(`Viewport changed: ${width}x${height}`);
  this.repositionUI(width, height);
});

getSize() ​

Get current viewport size.

typescript
getSize(): { width: number; height: number }

Returns ​

Object with viewport width and height.

Example ​

typescript
const { width, height } = viewportManager.getSize();
console.log(`Size: ${width}x${height}`);

isLandscape() ​

Check landscape orientation.

typescript
isLandscape(): boolean

Returns ​

true if width > height

Example ​

typescript
if (viewportManager.isLandscape()) {
  this.enableWideControls();
}

isPortrait() ​

Check portrait orientation.

typescript
isPortrait(): boolean

Returns ​

true if height >= width

getAspectRatio() ​

Get aspect ratio.

typescript
getAspectRatio(): number

Returns ​

Number (width / height). Example: 1.777 for 16:9

Example ​

typescript
const ratio = viewportManager.getAspectRatio();
if (ratio > 2) {
  console.log("Ultrawide display detected!");
}

getDeviceType() ​

Detect device type.

typescript
getDeviceType(): "mobile" | "tablet" | "desktop"

Returns ​

  • "mobile" - if minimum size < 768
  • "tablet" - if 768-1024
  • "desktop" - if > 1024

Example ​

typescript
const deviceType = viewportManager.getDeviceType();

if (deviceType === "mobile") {
  this.enableTouchControls();
}

calculateOptimalZoom() ​

Calculate optimal zoom.

typescript
calculateOptimalZoom(): number

Returns ​

Recommended zoom level based on viewport.

setWorldBoundsProportional(baseSize) ​

Set world bounds proportional to viewport.

typescript
setWorldBoundsProportional(baseSize: number = 2000): void

Parameters ​

  • baseSize - base world size (default 2000)

Example ​

typescript
// World will be proportional to viewport
viewportManager.setWorldBoundsProportional(2000);

destroy() ​

Disable resize tracking.

typescript
destroy(): void

Events ​

resize ​

Fires on viewport size change.

typescript
// Automatically handled via init() callback
viewportManager.init((width, height) => {
  // Called on every resize!
});

Usage Examples ​

Basic Usage ​

typescript
export class MyScene extends Phaser.Scene {
  private viewportManager!: ViewportManager;

  create() {
    this.viewportManager = new ViewportManager(this);

    this.viewportManager.init((width, height) => {
      this.adaptToViewport(width, height);
    });
  }

  private adaptToViewport(width: number, height: number) {
    console.log(`New size: ${width}x${height}`);
    console.log(`Device: ${this.viewportManager.getDeviceType()}`);
    console.log(
      `Orientation: ${
        this.viewportManager.isLandscape() ? "Landscape" : "Portrait"
      }`
    );
  }
}

UI Adaptation ​

typescript
viewportManager.init((width, height) => {
  // Position UI relative to size
  this.healthBar.setPosition(16, 16);
  this.minimap.setPosition(width - 216, height - 216);

  // Adapt by device
  const deviceType = viewportManager.getDeviceType();

  if (deviceType === "mobile") {
    this.minimap.setScale(0.5);
  } else {
    this.minimap.setScale(1);
  }
});

Adaptive Zoom ​

typescript
viewportManager.init((width, height) => {
  const zoom = viewportManager.calculateOptimalZoom();
  this.cameras.main.setZoom(zoom);
});

See Also ​

MIT Licensed

Copyright © 2025