ScreenManager03 / 15

Fitting the board to the screen

Keep the whole board visible when the window changes size.

In Block Puzzle, ResponsiveLayoutComponent scales the board and pieces. contain fits them inside the available area, and padding leaves space around the edges. layout.json

"responsiveLayout": {
  "type": "ResponsiveLayoutComponent",
  "data": {
    "area": { "padding": { "top": 16, "right": 16, "bottom": 16, "left": 16 } },
    "scale": { "mode": "contain", "min": 0.45, "max": 1.08 }
  }
}
Landscape screen
120 score
Board
Portrait screen
120 score
Board

Sources ↗

Block Puzzle · BlockPuzzleLayoutComponent.ts↗The geometry of the game layout.