Board Layout and Sizing

Expert knowledge of Board display layout, coordinate systems, SVG import settings, and sprite sizing for the 1920×1080 Board hardware.

Display Configuration

Target Display

Metric	Pixels	World Units (100 PPU)
Width	1920	19.2
Height	1080	10.8

Camera Settings

Setting	Value
Orthographic Size	5.4
Position	(0, 0, -10)
Aspect Ratio	16:9

Calculation: Visible Height = orthoSize × 2 = 10.8 world units

Horizontal Layout (19.2 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 Coordinates

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

Vertical Layout (10.8 world units)

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

LayoutConfig Reference

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 Positioning

Grid to World Conversion

// 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);

Key Grid Positions

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

SVG Import Settings

THE GOLDEN RULE

╔═══════════════════════════════════════════════════════════════╗
║                                                               ║
║   WORLD SIZE = TEXTURE SIZE ÷ PIXELS PER UNIT                 ║
║                                                               ║
║   ALWAYS use PPU = 100. Adjust Texture Size for world size.   ║
║                                                               ║
╚═══════════════════════════════════════════════════════════════╝

Formula: Texture Size = Desired World Size × 100

Standard Settings

Asset	Desired World Size	Texture Size	PPU
Tiles	2.0	200	100
Tokens	0.4 (20% of tile)	40	100

Import Steps

Select SVG file(s) in Project window
In Inspector:
- Generated Asset Type: Texture2D
- Texture Size: (calculated value)
- Pixels Per Unit: 100
Click Apply

Common Mistakes

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

Rendering Order

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 Visibility

Grid MUST have higher sorting order than tiles (1-2 vs 0) to appear above them.

Player Orientation

Players sit facing each other:

Blue player: Views from LEFT side (x < 0)
Red player: Views from RIGHT side (x > 0)

UI text rotation:

Blue UI: Normal rotation (readable from left)
Red UI: Rotated 180° (readable from right)

Edge Node Positions

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)

Coordinate System Summary

                    World Y
                       ↑
                       |  +5.4 (screen top)
                       |  +5.0 (grid top)
                       |
-9.6 ←─────────────────┼─────────────────→ +9.6  World X
                       |
                       |  -5.0 (grid bottom)
                       |  -5.4 (screen bottom)
                       ↓

Troubleshooting

Camera not showing full screen

Cause: Wrong orthographic size Solution: Set Camera → Orthographic Size = 5.4

Tiles too large/small

Cause: Wrong SVG Texture Size Solution: Texture Size = World Size × 100

Tiles: 200 (2.0 × 100)
Tokens: 40 (0.4 × 100)

Grid lines hidden behind tiles

Cause: Sorting order wrong Solution: Grid sorting order (1-2) must be higher than tiles (0)

Sprites not aligning

Cause: Not using LayoutConfig Solution: Always use LayoutConfig constants for positioning

Additional Resources

Reference Files

For complete sizing documentation:

Documentation/BOARD-TILE-SIZING-ANALYSIS.md - Comprehensive layout guide
Documentation/game-visual-style-guide.md - Colors and styling
Assets/Scripts/Config/LayoutConfig.cs - All constants

Quick Reference

PPU = 100 (ALWAYS)
Texture Size = World Size × 100

Tiles:  2.0 world units → Texture Size = 200
Tokens: 0.4 world units → Texture Size = 40

layout-sizing