Shapes - Draggable Blocks

What are Shapes?

Shapes are the colorful blocks you drag onto the board. Each shape is made of 1-9 squares arranged in different patterns.

Examples:

Single:   Line:      L-Shape:    Square:
  ■       ■ ■ ■        ■          ■ ■
                       ■          ■ ■
                       ■ ■

Two Parts: Data + Visual

1. ShapeData (ScriptableObject)

The definition of shape - which cells are filled.

Location: Assets/BlocKIT/Data/ShapeData/

2. NewDraggableShape (Script)

The visual & draggable part you see in game.

ShapeData - Shape Definition

Creating New Shape

1. In Project → Assets/BlocKIT/Data/
2. Right Click → Create → BlocKIT → Shape Data
3. Name it (e.g., "T_Shape")
4. Configure in Inspector:

┌─ ShapeData ─────────────────────┐
│ Shape Name: T_Shape              │
│ Color: Blue                      │
│ Grid Size: 3x3                   │
│                                  │
│ Shape Grid:                      │
│  [☑] [ ] [☑]                    │ ← Select cells
│  [☑] [☑] [☑]                    │
│  [ ] [☑] [ ]                    │
│                                  │
│ Preview: [Shows shape]           │
└──────────────────────────────────┘

Shape Properties

Property	What it does
Shape Name	Identifier for debugging
Color	Visual color of blocks
Grid Size	Max size (e.g., 3×3, 4×4)
Shape Grid	Which cells are filled (checkboxes)

Common Shapes Library

BlocKIT includes ~15 common shapes:

Singles (1 cell):
■

Lines (3-5 cells):
■ ■ ■
■ ■ ■ ■
■ ■ ■ ■ ■

L-Shapes:
■ ■        ■
■          ■
■          ■ ■

T-Shapes:
■ ■ ■
  ■

Squares:
■ ■
■ ■

Z-Shapes:
■ ■
  ■ ■

And more...

NewDraggableShape - Dragging Logic

What it does

1. Waits for player to grab it
   ↓
2. Follows mouse/finger
   ↓
3. Shows ghost preview on board
   ↓
4. Checks if can place
   ↓
5. If yes → Snaps to board
   If no → Returns to start position

States

State	What's happening
Idle	Sitting in shape panel, waiting
Dragging	Following cursor
Validating	Checking if can place here
Placing	Animating to board position
Placed	Done, destroying self
Returning	Going back to panel (invalid drop)

Inspector Settings

┌─ NewDraggableShape ──────────────┐
│ Shape Data: [ShapeData asset]    │ ← Which shape
│ Cell Prefab: [CellPrefab]       │ ← Visual for cells
│                                  │
│ Drag Scale: 1.2                  │ ← Size when dragging
│ Return Duration: 0.3             │ ← Return speed
│ Snap Duration: 0.2               │ ← Placement speed
│                                  │
│ Can Drag: true                   │ ← Enable/disable
└───────────────────────────────────┘

How Dragging Works

1. Start Drag (OnBeginDrag)

Player clicks/touches shape
   ↓
Shape scales up (1.0 → 1.2)
   ↓
Shape follows cursor
   ↓
Ghost preview activates

2. During Drag (OnDrag)

Every frame:
   ↓
Update shape position to cursor
   ↓
Convert cursor to board coordinates
   ↓
Check if can place at that position
   ↓
Update ghost preview (green/red)

3. End Drag (OnEndDrag)

Player releases
   ↓
Is cursor over valid position?
   ↓ Yes              ↓ No
Place on board    Return to panel
   ↓                  ↓
Animate snap      Animate return
   ↓                  ↓
Destroy self      Reset position

Ghost Preview System

What is it?

The transparent preview of where shape will be placed.

How it works

Shape is dragging
   ↓
Get cursor board position
   ↓
Can place here?
   ↓ Yes                    ↓ No
Show green preview      Show red preview
(valid placement)       (invalid)

Colors

• Green/Transparent = Can place here ✓
• Red/Opaque = Cannot place ✗
• No preview = Not over board

Shape Spawning

Shapes are created by NewShapeSpawner:

1. Manager asks for 3 shapes
   ↓
2. Brain selects shapes (based on difficulty)
   ↓
3. Spawner creates visual blocks
   ↓
4. Places them in ShapesPanel
   ↓
5. Player can now drag them

Spawn Positions

Default: 3 shapes in row at bottom

Screen Layout:
┌──────────────────┐
│                  │
│   Game Board     │ ← 8×8 grid
│                  │
├──────────────────┤
│  [■]  [■■]  [■]  │ ← 3 shapes here
└──────────────────┘

Events

Shapes trigger events for other systems:

Event	When	Who listens
OnBeginDrag	Start dragging	SoundManager (pickup sound)
OnDrag	During drag	GhostPreview (update)
OnEndDrag	Drop	SoundManager (place/return)
OnPlaced	Successfully placed	Manager (check lines)

Common Modifications

Change shape pool

Add/remove shapes from game:

1. In NewManager Inspector
2. Find "Shape Data Assets" list
3. Add/remove ShapeData assets
4. Done! Game will use new pool

Custom shape colors

1. Open ShapeData asset
2. Change "Color" property
3. Shape will use that color

Make shapes bigger/smaller when dragging

// In NewDraggableShape Inspector:
Drag Scale: 1.5  // Bigger
Drag Scale: 1.0  // Same size
Drag Scale: 0.8  // Smaller

Add rotation

Not built-in, but you can add:

// In NewDraggableShape.cs:
void Update()
{
    if (Input.GetKeyDown(KeyCode.R))
    {
        // Rotate shape data 90 degrees
        RotateShapeData();
    }
}

Shape Weight System

Shapes have different "difficulty":

• Small shapes (1-2 cells) = Easy
• Medium shapes (3-5 cells) = Normal
• Large shapes (6-9 cells) = Hard
• Awkward shapes (L, Z, T) = Variable

Brain uses this to control difficulty!

Performance Tips

• Shapes use object pooling - recycled, not destroyed
• Ghost preview is cached - no per-frame allocation
• Dragging uses Unity Events - efficient

No lag even with many shapes! 🚀

What's Next?

• 🎯 Game Logic - how shape selection works
• 🧠 AI & Difficulty - intelligent shape picking
• 🎨 Animations - shape effects

---

Try This

Create a "super easy" shape pool with only 1-2 cell shapes. Great for kids or tutorial levels!