344 lines
9.6 KiB
Markdown
344 lines
9.6 KiB
Markdown
# ✅ Booster Opening System - Auto-Generated Prefabs & Manual Setup
|
|
|
|
## 🎉 What I Created For You
|
|
|
|
I've successfully created the following prefabs using Unity MCP:
|
|
|
|
### ✅ **Created Prefabs:**
|
|
|
|
1. **`Assets/Prefabs/UI/DragAndDrop/BoosterVisual.prefab`**
|
|
- Base visual prefab for booster packs
|
|
- Has: Canvas, CanvasGroup, BoosterPackVisual component
|
|
- Has children: TiltParent (with PackImage), ShakeParent
|
|
|
|
2. **`Assets/Prefabs/UI/Cards/BoosterPackPrefab.prefab`**
|
|
- Main draggable booster prefab
|
|
- Has: Image, BoosterPackDraggable component
|
|
- Ready for visual prefab assignment
|
|
|
|
3. **`Assets/Prefabs/UI/Cards/FlippableCardPrefab.prefab`**
|
|
- Card reveal prefab
|
|
- Has: Image, CardDisplay, Button components
|
|
- Ready for sprite assignment
|
|
|
|
### 📋 **Existing Prefab:**
|
|
4. **`Assets/Prefabs/UI/Cards/BoosterOpeningPage.prefab`**
|
|
- Already has: RectTransform, CanvasGroup, BoosterOpeningPage component
|
|
- Needs child structure added (see below)
|
|
|
|
---
|
|
|
|
## 🛠️ Manual Setup Required
|
|
|
|
Due to Unity MCP limitations with editing existing prefabs, you'll need to complete the setup manually. Here's EXACTLY what to do:
|
|
|
|
### **STEP 1: Configure BoosterVisual Prefab**
|
|
|
|
1. Open `Assets/Prefabs/UI/DragAndDrop/BoosterVisual.prefab`
|
|
2. Select the root `BoosterVisual` object
|
|
3. In **BoosterPackVisual** component, assign references:
|
|
- Tilt Parent: Drag `TiltParent` child
|
|
- Shake Parent: Drag `ShakeParent` child
|
|
- Pack Image: Drag `TiltParent/PackImage`
|
|
- Pack Sprite: **[YOU ASSIGN]** - Your booster pack sprite asset
|
|
4. Set these values:
|
|
```
|
|
Follow Speed: 30
|
|
Rotation Amount: 20
|
|
Rotation Speed: 20
|
|
Auto Tilt Amount: 30
|
|
Manual Tilt Amount: 20
|
|
Tilt Speed: 20
|
|
Use Scale Animations: ✓
|
|
Scale On Hover: 1.15
|
|
Scale On Drag: 1.25
|
|
Use Idle Animation: ✓
|
|
Idle Animation Speed: 1
|
|
Opening Scale Punch: 0.5
|
|
Opening Rotation Punch: 360
|
|
Opening Duration: 0.5
|
|
```
|
|
5. Select `TiltParent/PackImage`
|
|
6. Set **Image** component:
|
|
- Raycast Target: ☐ **UNCHECK THIS**
|
|
- Size: 180x280 (or adjust to fit)
|
|
7. Save prefab
|
|
|
|
---
|
|
|
|
### **STEP 2: Configure BoosterPackPrefab**
|
|
|
|
1. Open `Assets/Prefabs/UI/Cards/BoosterPackPrefab.prefab`
|
|
2. Select root `BoosterPackPrefab`
|
|
3. Set **RectTransform**:
|
|
- Width: 200
|
|
- Height: 300
|
|
4. Set **Image** component:
|
|
- Sprite: **[YOU ASSIGN]** - Placeholder or your booster sprite
|
|
- Raycast Target: ✓ **MUST BE CHECKED**
|
|
5. Set **BoosterPackDraggable** component:
|
|
```
|
|
Move Speed: 50
|
|
Smooth Movement: ✓
|
|
Snap Duration: 0.3
|
|
Visual Prefab: [Drag BoosterVisual.prefab]
|
|
Instantiate Visual: ✓
|
|
Is Selectable: ✓
|
|
Selection Offset: 50
|
|
Can Open On Drop: ☐
|
|
Can Open On Double Click: ☐
|
|
Can Tap To Open: ✓
|
|
Max Taps To Open: 3
|
|
```
|
|
6. Save prefab
|
|
|
|
---
|
|
|
|
### **STEP 3: Configure FlippableCardPrefab**
|
|
|
|
1. Open `Assets/Prefabs/UI/Cards/FlippableCardPrefab.prefab`
|
|
2. Select root `FlippableCardPrefab`
|
|
3. Set **RectTransform**:
|
|
- Width: 200
|
|
- Height: 300
|
|
4. Set **Image** component:
|
|
- Sprite: **[YOU ASSIGN]** - Card back sprite
|
|
- Raycast Target: ✓
|
|
5. **CardDisplay** component will be configured at runtime
|
|
6. **Button** component is ready (OnClick added at runtime)
|
|
7. Save prefab
|
|
|
|
---
|
|
|
|
### **STEP 4: Build BoosterOpeningPage Structure**
|
|
|
|
⚠️ **IMPORTANT:** You need to manually add children to the BoosterOpeningPage prefab.
|
|
|
|
1. Open `Assets/Prefabs/UI/Cards/BoosterOpeningPage.prefab` in Prefab mode
|
|
2. Add the following structure:
|
|
|
|
```
|
|
BoosterOpeningPage (root - already exists)
|
|
├── Background (optional)
|
|
│ └── [Create: UI > Image]
|
|
│ └── [Set: Full screen, dark semi-transparent]
|
|
│
|
|
├── CloseButton
|
|
│ └── [Create: UI > Button - TextMeshPro]
|
|
│ └── [Position: Top-right corner]
|
|
│ └── [Text: "X" or "Close"]
|
|
│
|
|
├── BottomRightContainer
|
|
│ └── [Create: Empty GameObject]
|
|
│ └── [Add Component: SlotContainer]
|
|
│ └── [Position: X=800, Y=-400 (adjust for your canvas)]
|
|
│ └── [Anchor: Bottom-Right]
|
|
│ └── [Children: 3 slots below]
|
|
│ │
|
|
│ ├── Slot_0
|
|
│ │ └── [Create: Empty GameObject]
|
|
│ │ └── [Add Component: DraggableSlot]
|
|
│ │ └── [Size: 150x200]
|
|
│ │
|
|
│ ├── Slot_1
|
|
│ │ └── [Same as Slot_0]
|
|
│ │
|
|
│ └── Slot_2
|
|
│ └── [Same as Slot_0]
|
|
│
|
|
├── CenterSlot
|
|
│ └── [Create: Empty GameObject]
|
|
│ └── [Add Component: DraggableSlot]
|
|
│ └── [Position: Center (0, 0)]
|
|
│ └── [Size: 300x400]
|
|
│ └── [Anchor: Middle Center]
|
|
│
|
|
├── CardDisplayContainer
|
|
│ └── [Create: Empty GameObject]
|
|
│ └── [Position: Center (0, -100)]
|
|
│ └── [Anchor: Middle Center]
|
|
│
|
|
└── BoosterInstances
|
|
└── [Create: Empty GameObject]
|
|
└── [Children: 3 booster instances below]
|
|
│
|
|
├── BoosterPack_0
|
|
│ └── [Drag in: BoosterPackPrefab]
|
|
│ └── [Set Active: ☐ UNCHECKED]
|
|
│
|
|
├── BoosterPack_1
|
|
│ └── [Drag in: BoosterPackPrefab]
|
|
│ └── [Set Active: ☐ UNCHECKED]
|
|
│
|
|
└── BoosterPack_2
|
|
└── [Drag in: BoosterPackPrefab]
|
|
└── [Set Active: ☐ UNCHECKED]
|
|
```
|
|
|
|
---
|
|
|
|
### **STEP 5: Configure BottomRightContainer (SlotContainer)**
|
|
|
|
1. Select `BottomRightContainer`
|
|
2. Set **RectTransform**:
|
|
- Anchor: Bottom-Right
|
|
- Pivot: (1, 0)
|
|
- Position: X=-100, Y=100 (offset from corner)
|
|
3. Set **SlotContainer** component:
|
|
```
|
|
Layout Type: Vertical
|
|
Spacing: 120
|
|
Center Slots: ✓
|
|
Auto Register Children: ✓
|
|
```
|
|
4. For each child slot (Slot_0, Slot_1, Slot_2):
|
|
- Width: 150, Height: 200
|
|
- **DraggableSlot** settings:
|
|
```
|
|
Slot Index: 0, 1, 2 (respectively)
|
|
Is Locked: ☐
|
|
Filter By Type: ✓
|
|
Allowed Type Names: ["BoosterPackDraggable"]
|
|
Apply Scale To Occupant: ☐
|
|
```
|
|
|
|
---
|
|
|
|
### **STEP 6: Configure CenterSlot (Opening Slot)**
|
|
|
|
1. Select `CenterSlot`
|
|
2. Set **RectTransform**:
|
|
- Anchor: Middle Center
|
|
- Position: (0, 0)
|
|
- Width: 300, Height: 400
|
|
3. Set **DraggableSlot** component:
|
|
```
|
|
Slot Index: 0
|
|
Is Locked: ☐
|
|
Filter By Type: ✓
|
|
Allowed Type Names: ["BoosterPackDraggable"]
|
|
Apply Scale To Occupant: ✓ ← IMPORTANT!
|
|
Occupant Scale: (2, 2, 1) ← IMPORTANT!
|
|
Scale Transition Duration: 0.3
|
|
```
|
|
|
|
---
|
|
|
|
### **STEP 7: Wire Up BoosterOpeningPage Component**
|
|
|
|
1. Select root `BoosterOpeningPage`
|
|
2. In **BoosterOpeningPage** component, assign:
|
|
```
|
|
[UI References]
|
|
Canvas Group: [Auto-assigned or drag it]
|
|
Close Button: [Drag CloseButton]
|
|
|
|
[Booster Management]
|
|
Booster Pack Instances (Array size: 3):
|
|
Element 0: [Drag BoosterPack_0]
|
|
Element 1: [Drag BoosterPack_1]
|
|
Element 2: [Drag BoosterPack_2]
|
|
Bottom Right Slots: [Drag BottomRightContainer]
|
|
Center Opening Slot: [Drag CenterSlot]
|
|
|
|
[Card Display]
|
|
Card Display Container: [Drag CardDisplayContainer]
|
|
Flippable Card Prefab: [Drag FlippableCardPrefab.prefab]
|
|
Card Spacing: 150
|
|
|
|
[Settings]
|
|
Card Reveal Delay: 0.5
|
|
Booster Disappear Duration: 0.5
|
|
Transition Duration: 0.3
|
|
```
|
|
3. Save prefab
|
|
|
|
---
|
|
|
|
## ✅ Final Checklist
|
|
|
|
Before testing, verify:
|
|
|
|
### **BoosterVisual.prefab:**
|
|
- [ ] TiltParent and ShakeParent are assigned in component
|
|
- [ ] Pack Image is assigned in component
|
|
- [ ] Pack Sprite is assigned (your asset)
|
|
- [ ] PackImage has raycastTarget = false
|
|
|
|
### **BoosterPackPrefab.prefab:**
|
|
- [ ] Size is 200x300
|
|
- [ ] Base Image has raycastTarget = TRUE
|
|
- [ ] Visual Prefab is assigned (BoosterVisual)
|
|
- [ ] Can Tap To Open = ✓
|
|
- [ ] Max Taps To Open = 3
|
|
|
|
### **FlippableCardPrefab.prefab:**
|
|
- [ ] Size is 200x300
|
|
- [ ] Has card back sprite assigned
|
|
- [ ] Has CardDisplay component
|
|
- [ ] Has Button component
|
|
|
|
### **BoosterOpeningPage.prefab:**
|
|
- [ ] Has all children created (see structure above)
|
|
- [ ] BottomRightContainer has 3 DraggableSlots
|
|
- [ ] CenterSlot has scale settings configured
|
|
- [ ] BoosterInstances has 3 inactive booster prefab instances
|
|
- [ ] All references assigned in BoosterOpeningPage component
|
|
|
|
---
|
|
|
|
## 🎮 Testing
|
|
|
|
1. **Test in Scene:**
|
|
- Add BoosterOpeningPage prefab to your scene
|
|
- Make sure it's a child of your Canvas
|
|
- Start inactive (UIPage system controls visibility)
|
|
|
|
2. **Test Boosters:**
|
|
- Set CardSystemManager booster count to 3
|
|
- Open album → Click booster button
|
|
- Should see 3 boosters in bottom-right
|
|
|
|
3. **Test Drag:**
|
|
- Drag a booster to center
|
|
- Should scale up to 2x
|
|
|
|
4. **Test Taps:**
|
|
- Tap booster 3 times
|
|
- Should shake progressively
|
|
- Should disappear and show cards
|
|
|
|
---
|
|
|
|
## 📝 What You Still Need To Do
|
|
|
|
1. **Assign Sprites:**
|
|
- Booster pack sprite to BoosterVisual/PackImage
|
|
- Card back sprite to FlippableCardPrefab
|
|
|
|
2. **Build Page Structure:**
|
|
- Add all children to BoosterOpeningPage as outlined
|
|
- Position elements appropriately for your canvas size
|
|
|
|
3. **Wire References:**
|
|
- Assign all the references in BoosterOpeningPage component
|
|
|
|
4. **Visual Polish:**
|
|
- Add optional particle effects to BoosterVisual
|
|
- Style the close button
|
|
- Add background image
|
|
|
|
---
|
|
|
|
## 💡 Tips
|
|
|
|
- **Canvas Size:** Adjust positions based on your canvas reference resolution
|
|
- **Testing:** Test one piece at a time (boosters, then slots, then page)
|
|
- **Sprites:** Use placeholder sprites initially, replace later
|
|
- **Debugging:** Enable Gizmos to see slot positions
|
|
|
|
---
|
|
|
|
🎉 **Three prefabs are ready! Just follow the manual steps above to complete the setup!** 🎉
|
|
|