Game Effects

2. Smart Grid Alignment (The "Nano-Cut" Step)

Before removing the background, we MUST normalize the raw generation using the Smart Projection Analysis (as seen in scripts/smart_vfx_packer.py).

Logic Flow

1. Projection Analysis: Calculate row/column sums of pixel brightness.
2. Gap Detection: Identify gaps in brightness to determine the true grid lines of the 5x6 layout, causing a "Smart Cut".
3. Content Extraction: Crop each cell based on its content bounding box (BBox), discarding empty black space.
4. Re-Packing: Paste the extracted sprites into a simplified, standardized grid (e.g., 256x256 or 512x512 per frame) to ensure perfect alignment.

Why? Raw AI generations often have drifting grids or unequal cell sizes. This step guarantees that Frame 1 and Frame 30 are perfectly centered, eliminating "jitter" in the final animation.

3. Asset Processing (The "Black Box")

Raw AI generations have black backgrounds. We use a Luma-based Chroma Key approach in code (or a preprocessing script) to convert Black to Transparent.

JSON Metadata Standard

Every VFX should be accompanied by a config entry:

{
  "id": "VFX_EXAMPLE_BLAST",
  "src": "/assets/vfx/example_blast_v1.png",
  "layout": { "cols": 5, "rows": 6, "total": 30 },
  "physics": {
    "duration": 500,       // 1:1 Frame Mapping at 60Hz
    "scaleCurve": "squash", // Optional procedural deformation
    "blendMode": "lighter"
  }
}

4. Implementation Logic (The 60fps Guarantee)

To achieve true fluidity without "stuttering", follow these rules:

1. Duration Sync: Set impact duration to 300ms (High Speed) or 500ms (Smooth).
   • Avoid 400ms, as it causes 75fps vs 60Hz mismatch (Judder).
2. Linear Interpolation: Do NOT use EaseOut for frame selection. The sprite sheet itself contains the timing curve.
3. Procedural Polish:
   • Fade In: globalAlpha = progress / 0.2 for the first 20%.
   • Squash & Stretch: scaleY = 1 + (p/0.2)*0.3 during impact to simulate force.

5. Usage in Code

When implementing a renderer (e.g., in TitanSkillRenderer.ts or UniversalVfx.ts):

// Standard 30-Frame Renderer Logic
const totalFrames = 30;
const frameIndex = Math.min(totalFrames - 1, Math.floor(progress * totalFrames));
const col = frameIndex % 5;
const row = Math.floor(frameIndex / 5);

// Render
ctx.drawImage(sheet, col * fw, row * fh, fw, fh, -w/2, -h, w, h);