# Collision Setup from Mask Images

## How It Works

Godot can automatically generate collision shapes from black/white mask images using the **BitMap** class.

- **Black pixels** = Solid collision (player can't walk)
- **White pixels** = Walkable area (player can walk)

## Setup Steps

### 1. Create Collision Mask Image
- Same size as your background image
- Black = collision areas (water, obstacles, walls)
- White = walkable areas (sand, paths)
- Save as PNG: `beach_backdrop_mask.png`

### 2. Add Collision Generator to Scene
The `collision_generator.gd` script is a **@tool** script that runs in the editor.

In your level scene:
1. Add a `Node2D` as child of root
2. Attach `collision_generator.gd` script
3. In Inspector:
   - **Mask Texture**: Drag your mask PNG
   - **Simplify Epsilon**: 2.0 (higher = simpler shapes, lower = more accurate)
   - **Collision Layer**: 1 (default)
   - **Collision Mask**: 1 (default)
4. Check **Generate Collision** checkbox
5. Collision shapes are created automatically!

### 3. How It Generates Collision

The script:
1. Loads the mask image
2. Creates a `BitMap` from it (black = opaque, white = transparent)
3. Converts bitmap to polygons using `opaque_to_polygons()`
4. Creates `StaticBody2D` nodes with `CollisionPolygon2D` for each polygon
5. Adds them as children

### 4. Adjust Settings

**Simplify Epsilon**:
- `1.0` = Very detailed collision (more polygons, more CPU)
- `2.0` = Balanced (recommended)
- `5.0` = Simplified collision (fewer polygons, less accurate)

**Collision Layers**:
- Layer 1 = Environment collision
- Layer 2 = Player
- Layer 3 = NPCs
- Layer 4 = Items

## Alternative Methods

### Method 1: TileMap (Best for grid-based levels)
```
1. Create TileSet
2. Add collision shapes to tiles
3. Paint level with TileMap
```

### Method 2: Manual CollisionPolygon2D
```
1. Add StaticBody2D
2. Add CollisionPolygon2D as child
3. Manually draw collision shape in editor
```

### Method 3: Physics Material (for slopes)
```
1. Use CollisionPolygon2D
2. Add PhysicsMaterial with friction/bounce
```

## Current Beach Setup

```
Beach (Node2D)
├── Background (Sprite2D) - Visual backdrop
├── Collision (Node2D) - Collision generator
│   ├── CollisionArea_0 (StaticBody2D)
│   │   └── CollisionPolygon2D
│   ├── CollisionArea_1 (StaticBody2D)
│   │   └── CollisionPolygon2D
│   └── ... (more collision areas)
├── Player (CharacterBody2D)
└── ...
```

## Debugging Collision

### View Collision Shapes
- Run game → **Debug menu** → **Visible Collision Shapes**
- Or: Editor → **Debug** → **Visible Collision Shapes**

### Check Collision Layers
- Select Player → Inspector → **Collision** section
- Collision Layer: What layer this object is on
- Collision Mask: What layers this object collides with

### Print Collision Info
```gdscript
func _ready():
    print("Collision children: ", $Collision.get_child_count())
    for child in $Collision.get_children():
        if child is StaticBody2D:
            print("Collision body: ", child.name)
```

## Performance Tips

1. **Simplify your mask**: Use higher epsilon values
2. **Combine small areas**: Merge small collision zones in your mask
3. **Use fewer colors**: Pure black/white only, no gradients
4. **Optimize mask resolution**: Match your game's pixel scale

## Updating Collision

If you change the mask image:
1. Open beach scene
2. Select Collision node
3. Uncheck then re-check **Generate Collision**
4. New collision shapes are generated

## Example Mask Creation (Aseprite/Photoshop)

1. Open your background image
2. Create new layer
3. Paint black over non-walkable areas:
   - Water
   - Trees/foliage
   - Rocks
   - Buildings
   - Cliffs
4. Fill walkable areas with white
5. Export as PNG (same size as background)
6. Name it `[level_name]_mask.png`