This skill should be used when the user asks about "layout", "sizing", "coordinates", "1920x1080", "world units", "PPU", "pixels per unit", "SVG import", "texture size", "grid positioning", "screen dimensions", "camera", "orthographic size", "reserve zones", "LayoutConfig", or discusses Board display layout and sprite sizing.
Expert knowledge of Board display layout, coordinate systems, SVG import settings, and sprite sizing for the 1920×1080 Board hardware.
| Metric | Pixels | World Units (100 PPU) |
|---|---|---|
| Width | 1920 | 19.2 |
| Height | 1080 | 10.8 |
| Setting | Value |
|---|---|
| Orthographic Size | 5.4 |
| Position | (0, 0, -10) |
| Aspect Ratio | 16:9 |
Calculation: Visible Height = orthoSize × 2 = 10.8 world units
| Blue UI | Blue Res | Buffer | 5×5 Grid | Buffer | Red Res | Red UI |
| 2.1 | 2.0 | 0.5 | 10.0 | 0.5 | 2.0 | 2.1 |
| Zone | Left | Right | Center | Width |
|---|---|---|---|---|
| Blue UI | -9.6 | -7.5 | -8.55 | 2.1 |
| Blue Reserve | -7.5 | -5.5 | -6.5 | 2.0 |
| Left Buffer | -5.5 | -5.0 | — | 0.5 |
| Playable Grid | -5.0 | +5.0 | 0.0 | 10.0 |
| Right Buffer | +5.0 | +5.5 | — | 0.5 |
| Red Reserve | +5.5 | +7.5 | +6.5 | 2.0 |
| Red UI | +7.5 | +9.6 | +8.55 | 2.1 |
| Zone | Bottom | Top | Height |
|---|---|---|---|
| Bottom Margin | -5.4 | -5.0 | 0.4 |
| Playable Grid | -5.0 | +5.0 | 10.0 |
| Top Margin | +5.0 | +5.4 | 0.4 |
All layout constants centralized in Assets/Scripts/Config/LayoutConfig.cs:
public static class LayoutConfig
{
// Screen dimensions
public const float ScreenWidth = 19.2f;
public const float ScreenHeight = 10.8f;
// Tile and grid
public const float TileSize = 2.0f;
public const int GridSize = 5;
// Grid boundaries
public const float GridLeft = -5.0f;
public const float GridRight = 5.0f;
public const float GridBottom = -5.0f;
public const float GridTop = 5.0f;
// Camera
public const float CameraOrthoSize = 5.4f;
// Reserve zones
public const float BlueReserveCenter = -6.5f;
public const float RedReserveCenter = 6.5f;
}
// Grid (0,0) to (4,4) maps to world coordinates
float x = LayoutConfig.GridLeft + (gridX * LayoutConfig.TileSize) + (LayoutConfig.TileSize / 2f);
float y = LayoutConfig.GridBottom + (gridY * LayoutConfig.TileSize) + (LayoutConfig.TileSize / 2f);
| Grid | World Center | Description |
|---|---|---|
| (0, 0) | (-4, -4) | Bottom-left |
| (2, 2) | (0, 0) | Center (starting tile) |
| (4, 4) | (4, 4) | Top-right |
| (0, 4) | (-4, 4) | Top-left |
| (4, 0) | (4, -4) | Bottom-right |
╔═══════════════════════════════════════════════════════════════╗
║ ║
║ WORLD SIZE = TEXTURE SIZE ÷ PIXELS PER UNIT ║
║ ║
║ ALWAYS use PPU = 100. Adjust Texture Size for world size. ║
║ ║
╚═══════════════════════════════════════════════════════════════╝
Formula: Texture Size = Desired World Size × 100
| Asset | Desired World Size | Texture Size | PPU |
|---|---|---|---|
| Tiles | 2.0 | 200 | 100 |
| Tokens | 0.4 (20% of tile) | 40 | 100 |
| Mistake | Consequence | Solution |
|---|---|---|
| Changing PPU | Inconsistent sizing | Always PPU = 100 |
| Default Texture Size (256) | Wrong world size | Calculate: WorldSize × 100 |
| Matching viewBox | Irrelevant to sizing | Set based on desired world size |
Higher sorting order = renders in front.
| Layer | Sorting Order | Content |
|---|---|---|
| Background | -10 | Solid color (#0D0F14) |
| Tiles | 0 | TileView sprites |
| Grid Glow | 1 | Wide semi-transparent lines |
| Grid Core | 2 | Thin bright lines |
| Reserve Lines | 1 | Zone boundaries |
| Tokens | 10 | TokenView sprites |
Grid MUST have higher sorting order than tiles (1-2 vs 0) to appear above them.
Players sit facing each other:
UI text rotation:
Each tile has 4 edge nodes at side midpoints:
| Node | Offset from Tile Center |
|---|---|
| Top | (0, +1.0) |
| Right | (+1.0, 0) |
| Bottom | (0, -1.0) |
| Left | (-1.0, 0) |
NodeSnapDistance = 0.5 world units (appropriate for TokenSize = 0.4)EdgeNode values (Top, Right, Bottom, Left) are tile-local coordinates that rotate with the tile:
// Rotate edge node by rotation steps (each step = 90 degrees clockwise)
public static EdgeNode RotateEdge(EdgeNode node, int rotationSteps)
{
return (EdgeNode)(((int)node + rotationSteps) % 4);
}
// Example: A path from Left to Top on an unrotated tile
// After 1 rotation step (90 CW): becomes Bottom to Right
Center Tile Special Case:
World Y
↑
| +5.4 (screen top)
| +5.0 (grid top)
|
-9.6 ←─────────────────┼─────────────────→ +9.6 World X
|
| -5.0 (grid bottom)
| -5.4 (screen bottom)
↓
Cause: Wrong orthographic size
Solution: Set Camera → Orthographic Size = 5.4
Cause: Wrong SVG Texture Size
Solution: Texture Size = World Size × 100
Cause: Sorting order wrong Solution: Grid sorting order (1-2) must be higher than tiles (0)
Cause: Not using LayoutConfig
Solution: Always use LayoutConfig constants for positioning
This skill's references/ folder contains:
| File | Contains | Read When |
|---|---|---|
coordinate-systems.md | Grid, World, Screen conversion formulas | Implementing coordinate transforms |
layout-config.md | All LayoutConfig constants and values | Need exact constant values |
svg-import-settings.md | PPU=100 rule, Texture Size formula | Importing new SVG assets |
player-zones.md | Reserve pools, hand areas, stealing | Implementing reserve functionality |
| File | Purpose |
|---|---|
Assets/Scripts/Config/LayoutConfig.cs | All layout constants |
PPU = 100 (ALWAYS)
Texture Size = World Size × 100
NodeSnapDistance = 0.5 world units
Tiles: 2.0 world units → Texture Size = 200
Tokens: 0.4 world units → Texture Size = 40