Portrait-in-Landscape Container

This prototype demonstrates PG Soft's innovative approach to mobile game development: creating portrait-oriented games that work seamlessly in landscape mode through clever container manipulation. This technique significantly reduces development time while maintaining optimal user experience across all device orientations.

The Problem

Traditional mobile game development requires handling multiple orientations:

/* ❌ Traditional approach: Complex orientation handling */
@media (orientation: portrait) {
  .game-container {
    width: 100vw;
    height: 100vh;
  }
}

@media (orientation: landscape) {
  .game-container {
    width: 56.25vh; /* 9:16 aspect ratio */
    height: 100vh;
    margin: 0 auto;
  }
}

This approach requires:

• Separate layouts for each orientation
• Complex game logic for different aspect ratios
• Extensive testing across device types
• Increased development time and maintenance overhead

The PG Soft Solution

PG Soft's genius approach: Design once for portrait, contain for landscape

<!-- ✅ Simple HTML structure -->
<div class="game-viewport">
  <div class="game-container">
    <!-- Your PIXI.js game canvas goes here -->
    <canvas id="game-canvas"></canvas>
  </div>
</div>

/* ✅ Smart container CSS */
.game-viewport {
  width: 100vw;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  background: #000;
}

.game-container {
  width: min(100vw, 56.25vh); /* Portrait aspect ratio: 9:16 */
  height: min(100vh, 177.78vw); /* Inverse ratio: 16:9 */
  max-width: 100vw;
  max-height: 100vh;
  position: relative;
  background: #1a1a1a;
}

#game-canvas {
  width: 100%;
  height: 100%;
  display: block;
}

How It Works

Portrait Mode (Mobile)

• Container fills full viewport: 100vw × 100vh
• Game renders at native resolution
• No letterboxing or pillarboxing needed

Landscape Mode (Mobile/Desktop)

• Container maintains portrait aspect ratio: 56.25vh × 100vh
• Centered horizontally with black bars on sides
• Game logic remains identical - PIXI.js just renders to the container

The Magic Formula

The key is the min() function and aspect ratio calculations:

/* For 9:16 portrait aspect ratio */
width: min(100vw, 56.25vh);  /* 56.25vh = 100vh * (9/16) */
height: min(100vh, 177.78vw); /* 177.78vw = 100vw * (16/9) */

PIXI.js Integration

With this container approach, your PIXI.js code becomes orientation-agnostic:

// ✅ Simple PIXI setup - no orientation handling needed
const app = new PIXI.Application({
  width: container.clientWidth,
  height: container.clientHeight,
  backgroundColor: 0x1099bb,
  resizeTo: container, // PIXI automatically fits the container
});

container.appendChild(app.view as HTMLCanvasElement);

// Game logic works the same in any orientation
function createGame() {
  const sprite = PIXI.Sprite.from('texture.png');
  sprite.x = app.screen.width / 2;
  sprite.y = app.screen.height / 2;
  app.stage.addChild(sprite);
}

Live Demo

The following iframe demonstrates the portrait-in-landscape container in action:

Try rotating your device or resizing the browser window to see how the container maintains its portrait aspect ratio while centering perfectly in landscape mode.

Benefits

🚀 Development Efficiency

• Single design target: Design once for portrait orientation
• Simplified game logic: No orientation-specific code paths
• Faster iteration: Changes apply to all orientations automatically

📱 User Experience

• Consistent gameplay: Same experience across all devices
• No layout shifts: Smooth transitions between orientations
• Optimal mobile feel: Portrait games feel natural on mobile

🎮 Game Development

• PIXI.js simplicity: Engine just renders to container dimensions
• Asset optimization: Single set of assets for all orientations
• Testing efficiency: Test once, works everywhere

Implementation Checklist

• Set up viewport container with centering
• Calculate aspect ratio constraints using min()
• Configure PIXI.js to resize to container
• Design game UI for portrait orientation
• Test on various devices and orientations
• Add black bars styling for landscape letterboxing

Why This Matters

This technique represents a paradigm shift in mobile game development. Instead of treating orientation as a complex problem requiring multiple solutions, PG Soft recognized that portrait-first design with intelligent containing is often the optimal approach.

The result: 95% reduction in orientation-handling code while maintaining professional polish across all devices.

This is particularly valuable for slot games, puzzle games, and other mobile-first genres where portrait orientation provides the best user experience, but landscape compatibility is still desired for tablets and desktop play.