# πŸ–ΌοΈ Black Trigram (ν‘κ΄˜) β€” Art Assets Specification **πŸ” ISMS Alignment:** This document follows [Hack23 Secure Development Policy](https://github.com/Hack23/ISMS-PUBLIC/blob/main/Secure_Development_Policy.md) asset management requirements. Below is a focused breakdown of **exactly which art‐ and animation‐related assets** you’ll need for: 1. **Backgrounds** (especially the Intro/Main Menu & Dojang/Training Hall), 2. **UI Icons** (stances, trigrams, HUD elements), and 3. **Technique Animations** (attack, hit, finisher sequences) Additionally, we call out the **Pixi.js modules** (dependencies) you’ll actually use when wiring everything together in code. Think of this as a β€œshopping list” for your 2D combat game’s art and animation pipeline, paired with the Pixi features you’ll need to load, display, and animate them. ## CURRENT ASSETS Available ## Asset Audit Run `npm run audit:assets` to verify all visual asset references in the codebase point to existing files. This ensures no broken asset links and helps maintain asset integrity. ``` public/assets/visual public/assets/visual/archetypes public/assets/visual/archetypes/amsalja.png public/assets/visual/archetypes/hacker.png public/assets/visual/archetypes/jeongbo_yowon.png public/assets/visual/archetypes/jojik_pokryeokbae.png public/assets/visual/archetypes/musa.png public/assets/visual/bg public/assets/visual/bg/archetyples public/assets/visual/bg/archetyples/CyberpunkTeamDynamics.png public/assets/visual/bg/archetyples/PlayerArchetypesExplained.png public/assets/visual/bg/archetyples/PlayerArchetypesOverview.png public/assets/visual/bg/dojang public/assets/visual/bg/dojang/dojang_floor_tex.png public/assets/visual/bg/dojang/dojang_wall_tex.png public/assets/visual/bg/intro public/assets/visual/bg/intro/intro_bg_loop.png public/assets/visual/logo public/assets/visual/logo/black-trigram-256.png public/assets/visual/logo/black-trigram.png --- ## 1. Backgrounds & Environments ### 1.1 Intro / Main Menu Background - **Asset Name:** `intro_bg_loop.png` - **Description:** A seamless 1920Γ—1080 loopable tile of a rain‐slicked concrete floor with neon pipes and drifting data‐line grid. - **File Format:** PNG (plus normal/roughness if you want subtle 3D lighting on flat sprites, but PNG is usually enough). - **Folder:** `assets/visual/bg/intro/` - **Visual Style Notes:** - Base color: Obsidian (`#0A0F12`) with subtle film‐grain overlay. - Neon accents: teal/cyan reflections on puddles, flickering Hangul glyphs on pipes. - Animation: small β€œrain drip” loop in shader or flipbook. - **Asset Name:** `mainmenu_foreground_overlay.png` - **Description:** A semi‐transparent obsidian vignette (20px β€œsoft edge”) to darken screen edges, helping text/logo pop. - **File Format:** PNG (alpha) - **Folder:** `assets/visual/overlays/` - **Usage:** Placed above `intro_bg_loop` to darken corners. ### 1.2 Dojang / Training Hall Background - **Asset Name:** `dojang_floor_tex.png` - **Description:** 2048Γ—2048 PBR‐style image of matte‐black tatami mats, with subtle water puddle normals (if you want dynamic reflections). - **File Format:** PNG (or PNG + normal/roughness if desired) - **Folder:** `assets/visual/bg/dojang/` - **Style Notes:** - Tileable so it can fill any resolution. - Slight neon cyan reflections at edges where wall meets floor. - **Asset Name:** `dojang_wall_tex.png` - **Description:** 1024Γ—1024 tile of corrugated metal with pipelines and emissive Hangul trigrams (☰, ☲, etc.) behind semi‐opaque panels. - **File Format:** PNG (with separate emissive mask channel if you plan to animate neon flicker). - **Folder:** `assets/visual/bg/dojang/` - **Style Notes:** - The emissive mask will let you β€œpulse” each trigram glyph via a simple shader or a flicker sprite. - **Asset Name:** `dojang_wall_neon_flicker.png` (optional flipbook) - **Description:** A small flipbook (e.g. 4 frames at 256Γ—256) showing a neon glyph flicker (cycle through 0%, 50%, 100% brightness). - **File Format:** PNG sprite sheet - **Folder:** `assets/vfx/animations/` - **Asset Name:** `training_console_model.png` - **Description:** 512Γ—512 stylized grayscale sprite of a holo‐console (flat sprite) with cyan emissive accents (for real‐time data display). - **File Format:** PNG - **Folder:** `assets/visual/props/` - **Notes:** Use this as a static background element; you can overlay bitmaps of gauge bars, or simply let the console glow. - **Asset Name:** `stance_pad_circle.png` - **Description:** 256Γ—256 semi‐transparent PNG of a glowing floor circle. Pulses from 0 β†’ 100% opacity in a 1s loop. - **File Format:** PNG (alpha) - **Folder:** `assets/visual/props/` --- ## 2. UI Icons & HUD Elements ### 2.1 Stance Icons Each icon is a 64Γ—64 px SVG (so it scales crisply). We’ll load them as textures in Pixi and tint/animate as needed. 1. **`icon_stance_defensive.svg`** - Outline style in Slate Gray (`#2E3538`) when inactive. - Filled with Teal Neon (`#00FFC8`) + soft glow when active. 2. **`icon_stance_balanced.svg`** - Outline in Slate Gray; filled with Teal Neon on hover/active. 3. **`icon_stance_aggressive.svg`** - Outline in Slate Gray; filled with Crimson (`#FF0044`) on β€œcharged” or β€œready” state, or Teal Neon when selected. **Folder:** `assets/ui/icons/stances/` ### 2.2 Trigram Icons - **File Names:** ``` icon_trigram_1.svg icon_trigram_2.svg … icon_trigram_8.svg ``` - **Each icon:** 48Γ—48 px, dark background (Gunmetal `#424A50`) with the trigram glyph in Teal Neon. - **States:** - Inactive: no glow, just basic fill. - Active: slight outer glow + subtle 1.1Γ— scale β€œpulse.” - Hover: 1.05Γ— scale + quick glow (0.2 s). **Folder:** `assets/ui/icons/trigrams/` ### 2.3 HUD Bars & Overlays - **`hud_health_bar.png`** (800Γ—32 px PNG) - 10 segmented blocks. Each filled segment is Cyan Glow (`#1BE7FF`); empty is Slate Gray. - **Folder:** `assets/ui/hud/` - **`hud_pain_bar.png`** (800Γ—16 px PNG) - 10 segments. Filled segments are Crimson (`#FF0044`); empty Slate Gray. - **Folder:** `assets/ui/hud/` - **`ui_button_start_idle.png` & `ui_button_start_hover.png`** (256Γ—64 px each) - Idle: Slate Gray panel with β€œβ–Ά Start Combat” in Hangul+English. - Hover: Underline in Teal Neon + icon (β€œβ–Άβ€) glows. - **Folder:** `assets/ui/buttons/` - **`ui_panel_slate.png`** (1024Γ—512 px) - A semi-opaque Slate Gray panel (70% opacity) with a subtle noise texture. - **Folder:** `assets/ui/panels/` - **`tooltip_arrow.png`** (32Γ—32 px PNG) - Small triangle arrow in Cyan Glow for tooltips. - **Folder:** `assets/ui/tooltips/` --- ## 3. Technique Animations (AnimatedSprite Sprite Sheets) Any time you see code like: ```js await Assets.load("path/to/spritesheet.json"); const frames = []; for (let i = 0; i < N; i++) { frames.push(Texture.from(`frame${i}.png`)); } const anim = new AnimatedSprite(frames); ``` …you need a **sprite sheet JSON** + **corresponding PNG atlas** for each β€œtechnique.” Below is a minimal required set of technique animations: ### 3.1 Light Strike Animation (All Archetypes) - **Sprite Sheet JSON:** `strike_light_spritesheet.json` - **Texture Atlas:** `strike_light_spritesheet.png` (e.g., 512Γ—512 containing all 6 frames laid out in a grid). - **Frame Count:** 6 frames, each \~128Γ—256 (portrait orientation). - **Animation Speed:** 0.6 (adjust per archetype). - **Visual Content:** Character winds up β†’ quick punch/kick β†’ recoil. No background in atlas (transparent). - **Folder:** `assets/characters/animations/techniques/light/` ### 3.2 Medium Strike Animation - **Sprite Sheet JSON:** `strike_medium_spritesheet.json` - **Texture Atlas:** `strike_medium_spritesheet.png` (6–8 frames, \~128Γ—256 each). - **Description:** More wind-up, more impact frames, a small dust puff frame integrated (see VFX). - **Folder:** `assets/characters/animations/techniques/medium/` ### 3.3 Heavy Strike Animation - **Sprite Sheet JSON:** `strike_heavy_spritesheet.json` - **Texture Atlas:** `strike_heavy_spritesheet.png` (8 frames, \~256Γ—256 each). - **Description:** Big wind-up, slow-mo pause on impact, splash of embedded VFX dust/blood. - **Folder:** `assets/characters/animations/techniques/heavy/` ### 3.4 Critical Strike / Finisher Animation - **Sprite Sheet JSON:** `strike_critical_spritesheet.json` - **Texture Atlas:** `strike_critical_spritesheet.png` (10–12 frames, \~256Γ—256). - **Description:** Slow-mo bone-breaking blow β†’ flash frame β†’ slowdown. - **Folder:** `assets/characters/animations/techniques/critical/` ### 3.5 Dodge / Evade Animation - **Sprite Sheet JSON:** `dodge_spritesheet.json` - **Texture Atlas:** `dodge_spritesheet.png` (4–6 frames, \~128Γ—256). - **Description:** Quick sidestep/backflip frames, subtle afterimage. - **Folder:** `assets/characters/animations/techniques/dodge/` ### 3.6 Block / Parry Animation - **Sprite Sheet JSON:** `block_spritesheet.json` - **Texture Atlas:** `block_spritesheet.png` (5 frames, \~128Γ—256). - **Description:** Character raises arm/weapon to block β†’ recoil if successful. - **Folder:** `assets/characters/animations/techniques/block/` ### 3.7 Hit Reaction Animation - **Sprite Sheet JSON:** `hit_reaction_spritesheet.json` - **Texture Atlas:** `hit_reaction_spritesheet.png` (4 frames, \~128Γ—256). - **Description:** Character flinches backwards, tinted red on final frame. - **Folder:** `assets/characters/animations/techniques/hit/` ### 3.8 Finisher Sequence (All Archetypes) - **Sprite Sheet JSON:** `finisher_musa_spritesheet.json`, `finisher_amsalja_spritesheet.json`, etc. - **Texture Atlas:** `finisher_musa_spritesheet.png` (12 frames, \~256Γ—256), etc. - **Description:** A multi-stage β€œcinematic” finisher (pause β†’ bone crushing β†’ slow fade). - **Folder:** `assets/characters/animations/finisher/` --- ## 4. Pixi.js Dependencies & Modules Needed Below is a minimal list of **Pixi.js modules** (from `pixi.js/lib`) that you will rely on to load, animate, and render everything above. In your `package.json`, you’ve already installed `pixi.js`. At runtime, you’ll import exactly the pieces you use: ```ts import { Application, TickerPlugin, // core ticker ResizePlugin, // auto resizes to window Assets, // for loading JSON/PNG atlases Texture, Sprite, AnimatedSprite, Container, TilingSprite, // if you want parallax/tiled backgrounds Loader, // older API if you prefer Loader instead of Assets } from "pixi.js"; ``` - **`Application`** (from `app/Application.mjs`) - Creates the Pixi canvas, WebGL context, stage, etc. - **`TickerPlugin`** & **`ResizePlugin`** - Ensures your app’s ticker (main game loop) and auto-resize functionality. - **`Assets`** (from `assets/Assets.mjs`) - The new recommended loader for JSON sprite sheets, PNGs, audio, etc. - Example: ```ts await Assets.load( "assets/characters/animations/techniques/light/strike_light_spritesheet.json" ); ``` - **`Texture`** (from `rendering/texture/Texture.mjs`) - Create textures from loaded assets: ```ts const frameTex = Texture.from("strike_light_000.png"); ``` - **`Sprite`** & **`AnimatedSprite`** (from `scene/sprite/Sprite.mjs` & `scene/sprite-animated/AnimatedSprite.mjs`) - `Sprite` for static images (UI icons, backgrounds). - `AnimatedSprite` for flipbook animations (techniques, VFX). - **`Container`** (from `scene/container/Container.mjs`) - Use a parent `Container` for grouping layers: - `backgroundContainer` - `characterContainer` - `uiContainer` - `vfxContainer` - **`TilingSprite`** (from `scene/sprite-tiling/TilingSprite.mjs`) - If you want to scroll/loop the `intro_bg_loop.png` or tile `dojang_floor_tex.png` seamlessly across a larger stage. - **`Loader`** (from `assets/loader/Loader.mjs`) - If you prefer the older PIXI.Loader API to Assets. Both are possible; `Assets` is recommended for newer Pixi versions. - **`Filter`** / **`BlurFilter`** / **`DisplacementFilter`** (from `filters/defaults/*`) - Useful for adding real-time blur afterimages (for `dodge`), screen shakes, or ripples when powering up Ki (`ki_charge`). --- ## 5. Directory Structure & Final Checklist Below is a **consolidated folder structure** showing where each of the above assets live. This is what your repo (or build pipeline) needs before you start coding the Pixi setup: ``` /assets β”‚ β”œβ”€ characters/ β”‚ β”œβ”€ animations/ β”‚ β”‚ β”œβ”€ techniques/ β”‚ β”‚ β”‚ β”œβ”€ light/ β”‚ β”‚ β”‚ β”‚ β”œβ”€ strike_light_spritesheet.json β”‚ β”‚ β”‚ β”‚ └─ strike_light_spritesheet.png β”‚ β”‚ β”‚ β”œβ”€ medium/ β”‚ β”‚ β”‚ β”‚ β”œβ”€ strike_medium_spritesheet.json β”‚ β”‚ β”‚ β”‚ └─ strike_medium_spritesheet.png β”‚ β”‚ β”‚ β”œβ”€ heavy/ β”‚ β”‚ β”‚ β”‚ β”œβ”€ strike_heavy_spritesheet.json β”‚ β”‚ β”‚ β”‚ └─ strike_heavy_spritesheet.png β”‚ β”‚ β”‚ β”œβ”€ critical/ β”‚ β”‚ β”‚ β”‚ β”œβ”€ strike_critical_spritesheet.json β”‚ β”‚ β”‚ β”‚ └─ strike_critical_spritesheet.png β”‚ β”‚ β”‚ β”œβ”€ dodge/ β”‚ β”‚ β”‚ β”‚ β”œβ”€ dodge_spritesheet.json β”‚ β”‚ β”‚ β”‚ └─ dodge_spritesheet.png β”‚ β”‚ β”‚ β”œβ”€ block/ β”‚ β”‚ β”‚ β”‚ β”œβ”€ block_spritesheet.json β”‚ β”‚ β”‚ β”‚ └─ block_spritesheet.png β”‚ β”‚ β”‚ └─ hit/ β”‚ β”‚ β”‚ β”œβ”€ hit_reaction_spritesheet.json β”‚ β”‚ β”‚ └─ hit_reaction_spritesheet.png β”‚ β”‚ └─ finisher/ β”‚ β”‚ β”œβ”€ musa_finisher_spritesheet.json β”‚ β”‚ └─ musa_finisher_spritesheet.png β”‚ β”‚ β”œβ”€ amsalja_finisher_spritesheet.json β”‚ β”‚ └─ amsalja_finisher_spritesheet.png β”‚ β”‚ └─ … (one per archetype) β”‚ └─ portraits/ β”‚ β”œβ”€ portrait_musa.png β”‚ β”œβ”€ portrait_amsalja.png β”‚ └─ … (other archetypes) β”‚ β”œβ”€ fonts/ β”‚ β”œβ”€ BlackTrigram-Hangul.woff2 β”‚ β”œβ”€ NotoSansKR-Regular.woff2 β”‚ └─ Roboto-Regular.woff2 β”‚ β”œβ”€ i18n/ β”‚ β”œβ”€ ko.json β”‚ └─ en.json β”‚ β”œβ”€ props/ β”‚ β”œβ”€ training_console_model.png β”‚ β”œβ”€ stance_pad_circle.png β”‚ └─ dummy_target_overlay.svg β”‚ β”œβ”€ shaders/ β”‚ β”œβ”€ rim_light.shader β”‚ β”œβ”€ blood_decal.shader β”‚ └─ neon_flicker.shader β”‚ β”œβ”€ ui/ β”‚ β”œβ”€ buttons/ β”‚ β”‚ β”œβ”€ ui_button_start_idle.png β”‚ β”‚ └─ ui_button_start_hover.png β”‚ β”œβ”€ icons/ β”‚ β”‚ β”œβ”€ stances/ β”‚ β”‚ β”‚ β”œβ”€ icon_stance_defensive.svg β”‚ β”‚ β”‚ β”œβ”€ icon_stance_balanced.svg β”‚ β”‚ β”‚ └─ icon_stance_aggressive.svg β”‚ β”‚ β”œβ”€ trigrams/ β”‚ β”‚ β”‚ β”œβ”€ icon_trigram_1.svg β”‚ β”‚ β”‚ β”œβ”€ icon_trigram_2.svg β”‚ β”‚ β”‚ └─ … up to icon_trigram_8.svg β”‚ β”‚ └─ tooltip_arrow.png β”‚ └─ hud/ β”‚ β”œβ”€ hud_health_bar.png β”‚ └─ hud_pain_bar.png β”‚ β”œβ”€ vfx/ β”‚ β”œβ”€ animations/ β”‚ β”‚ β”œβ”€ anim_logo_pulse.json β”‚ β”‚ β”œβ”€ anim_menu_slide_0.png … anim_menu_slide_7.png β”‚ β”‚ β”œβ”€ anim_strike_impact_0.png … anim_strike_impact_15.png β”‚ β”‚ └─ anim_finisher_musa_0.png … anim_finisher_musa_11.png β”‚ β”œβ”€ particles/ β”‚ β”‚ β”œβ”€ vfx_dust_puff.png β”‚ β”‚ β”œβ”€ vfx_blood_splatter.png β”‚ β”‚ └─ confetti_sprites.png β”‚ └─ shaders/ β”‚ β”œβ”€ vfx_impact_ring.png β”‚ β”œβ”€ vfx_neon_glow.png β”‚ └─ vfx_critical_flash.png β”‚ β”œβ”€ visual/ β”‚ β”œβ”€ bg/ β”‚ β”‚ β”œβ”€ intro/ β”‚ β”‚ β”‚ β”œβ”€ intro_bg_loop.png β”‚ β”‚ β”‚ └─ mainmenu_foreground_overlay.png β”‚ β”‚ └─ dojang/ β”‚ β”‚ β”œβ”€ dojang_floor_tex.png β”‚ β”‚ └─ dojang_wall_tex.png β”‚ └─ overlays/ β”‚ β”œβ”€ vital_region_head.png β”‚ β”œβ”€ vital_region_neck.png β”‚ β”œβ”€ vital_region_torso.png β”‚ β”œβ”€ vital_region_arms.png β”‚ β”œβ”€ vital_region_chest.png β”‚ └─ vital_region_legs.png β”‚ └─ public/ └─ assets/ └─ audio/ β”œβ”€ music/ β”‚ β”œβ”€ intro_theme.webm β”‚ β”œβ”€ combat_theme.webm β”‚ β”œβ”€ combat_theme_geon.webm β”‚ β”œβ”€ training_theme.webm β”‚ β”œβ”€ meditation_theme.webm β”‚ β”œβ”€ victory_theme.webm β”‚ β”œβ”€ underground_rave_theme.webm β”‚ └─ ambient_loop.webm └─ sfx/ β”œβ”€ ambient/ β”‚ β”œβ”€ dojang_ambience.webm β”‚ β”œβ”€ wind_effect.webm β”‚ └─ dojo_crowd.webm β”œβ”€ attacks/ β”‚ β”œβ”€ attack_punch_light.webm β”‚ β”œβ”€ attack_punch_medium.webm β”‚ β”œβ”€ attack_kick_heavy.webm β”‚ β”œβ”€ attack_light.webm β”‚ β”œβ”€ attack_medium.webm β”‚ β”œβ”€ attack_critical.webm β”‚ β”œβ”€ attack_special_geon.webm β”‚ β”œβ”€ dodge.webm β”‚ β”œβ”€ block_success.webm β”‚ β”œβ”€ block_break.webm β”‚ └─ perfect_strike.webm β”œβ”€ hit/ β”‚ β”œβ”€ hit_light.webm β”‚ β”œβ”€ hit_medium.webm β”‚ β”œβ”€ hit_heavy.webm β”‚ β”œβ”€ hit_critical.webm β”‚ β”œβ”€ hit_flesh.webm β”‚ └─ hit_block.webm β”œβ”€ combo/ β”‚ β”œβ”€ combo_buildup.webm β”‚ β”œβ”€ combo_finish.webm β”‚ └─ energy_pulse.webm β”œβ”€ match/ β”‚ β”œβ”€ match_start.webm β”‚ β”œβ”€ countdown.webm β”‚ β”œβ”€ match_end.webm β”‚ β”œβ”€ victory.webm β”‚ └─ defeat.webm β”œβ”€ movement/ β”‚ β”œβ”€ footstep.webm β”‚ └─ stance_change.webm β”œβ”€ ki/ β”‚ β”œβ”€ ki_charge.webm β”‚ └─ ki_release.webm β”œβ”€ stamina/ β”‚ └─ stamina_depleted.webm β”œβ”€ health/ β”‚ └─ health_low.webm └─ ui/ β”œβ”€ menu_click.webm β”œβ”€ menu_navigate.webm β”œβ”€ menu_select.webm β”œβ”€ menu_hover.webm └─ menu_back.webm ``` --- ## 1. Backgrounds & Environments ### 1.1 Intro / Main Menu Background - **Asset Name:** `intro_bg_loop.png` - **Description:** A seamless 1920Γ—1080 loopable tile of a rain‐slicked concrete floor with neon pipes and drifting data‐line grid. - **File Format:** PNG (plus normal/roughness if you want subtle 3D lighting on flat sprites, but PNG is usually enough). - **Folder:** `assets/visual/bg/intro/` - **Visual Style Notes:** - Base color: Obsidian (`#0A0F12`) with subtle film‐grain overlay. - Neon accents: teal/cyan reflections on puddles, flickering Hangul glyphs on pipes. - Animation: small β€œrain drip” loop in shader or flipbook. - **Asset Name:** `mainmenu_foreground_overlay.png` - **Description:** A semi‐transparent obsidian vignette (20px β€œsoft edge”) to darken screen edges, helping text/logo pop. - **File Format:** PNG (alpha) - **Folder:** `assets/visual/overlays/` - **Usage:** Placed above `intro_bg_loop` to darken corners. ### 1.2 Dojang / Training Hall Background - **Asset Name:** `dojang_floor_tex.png` - **Description:** 2048Γ—2048 PBR‐style image of matte‐black tatami mats, with subtle water puddle normals (if you want dynamic reflections). - **File Format:** PNG (or PNG + normal/roughness if desired) - **Folder:** `assets/visual/bg/dojang/` - **Style Notes:** - Tileable so it can fill any resolution. - Slight neon cyan reflections at edges where wall meets floor. - **Asset Name:** `dojang_wall_tex.png` - **Description:** 1024Γ—1024 tile of corrugated metal with pipelines and emissive Hangul trigrams (☰, ☲, etc.) behind semi‐opaque panels. - **File Format:** PNG (with separate emissive mask channel if you plan to animate neon flicker). - **Folder:** `assets/visual/bg/dojang/` - **Style Notes:** - The emissive mask will let you β€œpulse” each trigram glyph via a simple shader or a flicker sprite. - **Asset Name:** `dojang_wall_neon_flicker.png` (optional flipbook) - **Description:** A small flipbook (e.g. 4 frames at 256Γ—256) showing a neon glyph flicker (cycle through 0%, 50%, 100% brightness). - **File Format:** PNG sprite sheet - **Folder:** `assets/vfx/animations/` - **Asset Name:** `training_console_model.png` - **Description:** 512Γ—512 stylized grayscale sprite of a holo‐console (flat sprite) with cyan emissive accents (for real‐time data display). - **File Format:** PNG - **Folder:** `assets/visual/props/` - **Notes:** Use this as a static background element; you can overlay bitmaps of gauge bars, or simply let the console glow. - **Asset Name:** `stance_pad_circle.png` - **Description:** 256Γ—256 semi‐transparent PNG of a glowing floor circle. Pulses from 0 β†’ 100% opacity in a 1s loop. - **File Format:** PNG (alpha) - **Folder:** `assets/visual/props/` --- ## 2. UI Icons & HUD Elements ### 2.1 Stance Icons Each icon is a 64Γ—64 px SVG (so it scales crisply). We’ll load them as textures in Pixi and tint/animate as needed. 1. **`icon_stance_defensive.svg`** - Outline style in Slate Gray (`#2E3538`) when inactive. - Filled with Teal Neon (`#00FFC8`) + soft glow when active. 2. **`icon_stance_balanced.svg`** - Outline in Slate Gray; filled with Teal Neon on hover/active. 3. **`icon_stance_aggressive.svg`** - Outline in Slate Gray; filled with Crimson (`#FF0044`) on β€œcharged” or β€œready” state, or Teal Neon when selected. **Folder:** `assets/ui/icons/stances/` ### 2.2 Trigram Icons - **File Names:** ``` icon_trigram_1.svg icon_trigram_2.svg … icon_trigram_8.svg ``` - **Each icon:** 48Γ—48 px, dark background (Gunmetal `#424A50`) with the trigram glyph in Teal Neon. - **States:** - Inactive: no glow, just basic fill. - Active: slight outer glow + subtle 1.1Γ— scale β€œpulse.” - Hover: 1.05Γ— scale + quick glow (0.2 s). **Folder:** `assets/ui/icons/trigrams/` ### 2.3 HUD Bars & Overlays - **`hud_health_bar.png`** (800Γ—32 px PNG) - 10 segmented blocks. Each filled segment is Cyan Glow (`#1BE7FF`); empty is Slate Gray. - **Folder:** `assets/ui/hud/` - **`hud_pain_bar.png`** (800Γ—16 px PNG) - 10 segments. Filled segments are Crimson (`#FF0044`); empty Slate Gray. - **Folder:** `assets/ui/hud/` - **`ui_button_start_idle.png` & `ui_button_start_hover.png`** (256Γ—64 px each) - Idle: Slate Gray panel with β€œβ–Ά Start Combat” in Hangul+English. - Hover: Underline in Teal Neon + icon (β€œβ–Άβ€) glows. - **Folder:** `assets/ui/buttons/` - **`ui_panel_slate.png`** (1024Γ—512 px) - A semi-opaque Slate Gray panel (70% opacity) with a subtle noise texture. - **Folder:** `assets/ui/panels/` - **`tooltip_arrow.png`** (32Γ—32 px PNG) - Small triangle arrow in Cyan Glow for tooltips. - **Folder:** `assets/ui/tooltips/` --- ## 3. Technique Animations (AnimatedSprite Sprite Sheets) Any time you see code like: ```js await Assets.load("path/to/spritesheet.json"); const frames = []; for (let i = 0; i < N; i++) { frames.push(Texture.from(`frame${i}.png`)); } const anim = new AnimatedSprite(frames); ``` …you need a **sprite sheet JSON** + **corresponding PNG atlas** for each β€œtechnique.” Below is a minimal required set of technique animations: ### 3.1 Light Strike Animation (All Archetypes) - **Sprite Sheet JSON:** `strike_light_spritesheet.json` - **Texture Atlas:** `strike_light_spritesheet.png` (e.g., 512Γ—512 containing all 6 frames laid out in a grid). - **Frame Count:** 6 frames, each \~128Γ—256 (portrait orientation). - **Animation Speed:** 0.6 (adjust per archetype). - **Visual Content:** Character winds up β†’ quick punch/kick β†’ recoil. No background in atlas (transparent). - **Folder:** `assets/characters/animations/techniques/light/` ### 3.2 Medium Strike Animation - **Sprite Sheet JSON:** `strike_medium_spritesheet.json` - **Texture Atlas:** `strike_medium_spritesheet.png` (6–8 frames, \~128Γ—256 each). - **Description:** More wind-up, more impact frames, a small dust puff frame integrated (see VFX). - **Folder:** `assets/characters/animations/techniques/medium/` ### 3.3 Heavy Strike Animation - **Sprite Sheet JSON:** `strike_heavy_spritesheet.json` - **Texture Atlas:** `strike_heavy_spritesheet.png` (8 frames, \~256Γ—256 each). - **Description:** Big wind-up, slow-mo pause on impact, splash of embedded VFX dust/blood. - **Folder:** `assets/characters/animations/techniques/heavy/` ### 3.4 Critical Strike / Finisher Animation - **Sprite Sheet JSON:** `strike_critical_spritesheet.json` - **Texture Atlas:** `strike_critical_spritesheet.png` (10–12 frames, \~256Γ—256). - **Description:** Slow-mo bone-breaking blow β†’ flash frame β†’ slowdown. - **Folder:** `assets/characters/animations/techniques/critical/` ### 3.5 Dodge / Evade Animation - **Sprite Sheet JSON:** `dodge_spritesheet.json` - **Texture Atlas:** `dodge_spritesheet.png` (4–6 frames, \~128Γ—256). - **Description:** Quick sidestep/backflip frames, subtle afterimage. - **Folder:** `assets/characters/animations/techniques/dodge/` ### 3.6 Block / Parry Animation - **Sprite Sheet JSON:** `block_spritesheet.json` - **Texture Atlas:** `block_spritesheet.png` (5 frames, \~128Γ—256). - **Description:** Character raises arm/weapon to block β†’ recoil if successful. - **Folder:** `assets/characters/animations/techniques/block/` ### 3.7 Hit Reaction Animation - **Sprite Sheet JSON:** `hit_reaction_spritesheet.json` - **Texture Atlas:** `hit_reaction_spritesheet.png` (4 frames, \~128Γ—256). - **Description:** Character flinches backwards, tinted red on final frame. - **Folder:** `assets/characters/animations/techniques/hit/` ### 3.8 Finisher Sequence (All Archetypes) - **Sprite Sheet JSON:** `finisher_musa_spritesheet.json`, `finisher_amsalja_spritesheet.json`, etc. - **Texture Atlas:** `finisher_musa_spritesheet.png` (12 frames, \~256Γ—256), etc. - **Description:** A multi-stage β€œcinematic” finisher (pause β†’ bone crushing β†’ slow fade). - **Folder:** `assets/characters/animations/finisher/` --- ## 4. Pixi.js Dependencies & Modules Needed Below is a minimal list of **Pixi.js modules** (from `pixi.js/lib`) that you will rely on to load, animate, and render everything above. In your `package.json`, you’ve already installed `pixi.js`. At runtime, you’ll import exactly the pieces you use: ```ts import { Application, TickerPlugin, // core ticker ResizePlugin, // auto resizes to window Assets, // for loading JSON/PNG atlases Texture, Sprite, AnimatedSprite, Container, TilingSprite, // if you want parallax/tiled backgrounds Loader, // older API if you prefer Loader instead of Assets } from "pixi.js"; ``` - **`Application`** (from `app/Application.mjs`) - Creates the Pixi canvas, WebGL context, stage, etc. - **`TickerPlugin`** & **`ResizePlugin`** - Ensures your app’s ticker (main game loop) and auto-resize functionality. - **`Assets`** (from `assets/Assets.mjs`) - The new recommended loader for JSON sprite sheets, PNGs, audio, etc. - Example: ```ts await Assets.load( "assets/characters/animations/techniques/light/strike_light_spritesheet.json" ); ``` - **`Texture`** (from `rendering/texture/Texture.mjs`) - Create textures from loaded assets: ```ts const frameTex = Texture.from("strike_light_000.png"); ``` - **`Sprite`** & **`AnimatedSprite`** (from `scene/sprite/Sprite.mjs` & `scene/sprite-animated/AnimatedSprite.mjs`) - `Sprite` for static images (UI icons, backgrounds). - `AnimatedSprite` for flipbook animations (techniques, VFX). - **`Container`** (from `scene/container/Container.mjs`) - Use a parent `Container` for grouping layers: - `backgroundContainer` - `characterContainer` - `uiContainer` - `vfxContainer` - **`TilingSprite`** (from `scene/sprite-tiling/TilingSprite.mjs`) - If you want to scroll/loop the `intro_bg_loop.png` or tile `dojang_floor_tex.png` seamlessly across a larger stage. - **`Loader`** (from `assets/loader/Loader.mjs`) - If you prefer the older PIXI.Loader API to Assets. Both are possible; `Assets` is recommended for newer Pixi versions. - **`Filter`** / **`BlurFilter`** / **`DisplacementFilter`** (from `filters/defaults/*`) - Useful for adding real-time blur afterimages (for `dodge`), screen shakes, or ripples when powering up Ki (`ki_charge`). --- ## 5. Directory Structure & Final Checklist Below is a **consolidated folder structure** showing where each of the above assets live. This is what your repo (or build pipeline) needs before you start coding the Pixi setup: ``` /assets β”‚ β”œβ”€ characters/ β”‚ β”œβ”€ animations/ β”‚ β”‚ β”œβ”€ techniques/ β”‚ β”‚ β”‚ β”œβ”€ light/ β”‚ β”‚ β”‚ β”‚ β”œβ”€ strike_light_spritesheet.json β”‚ β”‚ β”‚ β”‚ └─ strike_light_spritesheet.png β”‚ β”‚ β”‚ β”œβ”€ medium/ β”‚ β”‚ β”‚ β”‚ β”œβ”€ strike_medium_spritesheet.json β”‚ β”‚ β”‚ β”‚ └─ strike_medium_spritesheet.png β”‚ β”‚ β”‚ β”œβ”€ heavy/ β”‚ β”‚ β”‚ β”‚ β”œβ”€ strike_heavy_spritesheet.json β”‚ β”‚ β”‚ β”‚ └─ strike_heavy_spritesheet.png β”‚ β”‚ β”‚ β”œβ”€ critical/ β”‚ β”‚ β”‚ β”‚ β”œβ”€ strike_critical_spritesheet.json β”‚ β”‚ β”‚ β”‚ └─ strike_critical_spritesheet.png β”‚ β”‚ β”‚ β”œβ”€ dodge/ β”‚ β”‚ β”‚ β”‚ β”œβ”€ dodge_spritesheet.json β”‚ β”‚ β”‚ β”‚ └─ dodge_spritesheet.png β”‚ β”‚ β”‚ β”œβ”€ block/ β”‚ β”‚ β”‚ β”‚ β”œβ”€ block_spritesheet.json β”‚ β”‚ β”‚ β”‚ └─ block_spritesheet.png β”‚ β”‚ β”‚ └─ hit/ β”‚ β”‚ β”‚ β”œβ”€ hit_reaction_spritesheet.json β”‚ β”‚ β”‚ └─ hit_reaction_spritesheet.png β”‚ β”‚ └─ finisher/ β”‚ β”‚ β”œβ”€ musa_finisher_spritesheet.json β”‚ β”‚ └─ musa_finisher_spritesheet.png β”‚ β”‚ β”œβ”€ amsalja_finisher_spritesheet.json β”‚ β”‚ └─ amsalja_finisher_spritesheet.png β”‚ β”‚ └─ … (one per archetype) β”‚ └─ portraits/ β”‚ β”œβ”€ portrait_musa.png β”‚ β”œβ”€ portrait_amsalja.png β”‚ └─ … (other archetypes) β”‚ β”œβ”€ fonts/ β”‚ β”œβ”€ BlackTrigram-Hangul.woff2 β”‚ β”œβ”€ NotoSansKR-Regular.woff2 β”‚ └─ Roboto-Regular.woff2 β”‚ β”œβ”€ i18n/ β”‚ β”œβ”€ ko.json β”‚ └─ en.json β”‚ β”œβ”€ props/ β”‚ β”œβ”€ training_console_model.png β”‚ β”œβ”€ stance_pad_circle.png β”‚ └─ dummy_target_overlay.svg β”‚ β”œβ”€ shaders/ β”‚ β”œβ”€ rim_light.shader β”‚ β”œβ”€ blood_decal.shader β”‚ └─ neon_flicker.shader β”‚ β”œβ”€ ui/ β”‚ β”œβ”€ buttons/ β”‚ β”‚ β”œβ”€ ui_button_start_idle.png β”‚ β”‚ └─ ui_button_start_hover.png β”‚ β”œβ”€ icons/ β”‚ β”‚ β”œβ”€ stances/ β”‚ β”‚ β”‚ β”œβ”€ icon_stance_defensive.svg β”‚ β”‚ β”‚ β”œβ”€ icon_stance_balanced.svg β”‚ β”‚ β”‚ └─ icon_stance_aggressive.svg β”‚ β”‚ β”œβ”€ trigrams/ β”‚ β”‚ β”‚ β”œβ”€ icon_trigram_1.svg β”‚ β”‚ β”‚ β”œβ”€ icon_trigram_2.svg β”‚ β”‚ β”‚ └─ … up to icon_trigram_8.svg β”‚ β”‚ └─ tooltip_arrow.png β”‚ └─ hud/ β”‚ β”œβ”€ hud_health_bar.png β”‚ └─ hud_pain_bar.png β”‚ β”œβ”€ vfx/ β”‚ β”œβ”€ animations/ β”‚ β”‚ β”œβ”€ anim_logo_pulse.json β”‚ β”‚ β”œβ”€ anim_menu_slide_0.png … anim_menu_slide_7.png β”‚ β”‚ β”œβ”€ anim_strike_impact_0.png … anim_strike_impact_15.png β”‚ β”‚ └─ anim_finisher_musa_0.png … anim_finisher_musa_11.png β”‚ β”œβ”€ particles/ β”‚ β”‚ β”œβ”€ vfx_dust_puff.png β”‚ β”‚ β”œβ”€ vfx_blood_splatter.png β”‚ β”‚ └─ confetti_sprites.png β”‚ └─ shaders/ β”‚ β”œβ”€ vfx_impact_ring.png β”‚ β”œβ”€ vfx_neon_glow.png β”‚ └─ vfx_critical_flash.png β”‚ β”œβ”€ visual/ β”‚ β”œβ”€ bg/ β”‚ β”‚ β”œβ”€ intro/ β”‚ β”‚ β”‚ β”œβ”€ intro_bg_loop.png β”‚ β”‚ β”‚ └─ mainmenu_foreground_overlay.png β”‚ β”‚ └─ dojang/ β”‚ β”‚ β”œβ”€ dojang_floor_tex.png β”‚ β”‚ └─ dojang_wall_tex.png β”‚ └─ overlays/ β”‚ β”œβ”€ vital_region_head.png β”‚ β”œβ”€ vital_region_neck.png β”‚ β”œβ”€ vital_region_torso.png β”‚ β”œβ”€ vital_region_arms.png β”‚ β”œβ”€ vital_region_chest.png β”‚ └─ vital_region_legs.png β”‚ └─ public/ └─ assets/ └─ audio/ β”œβ”€ music/ β”‚ β”œβ”€ intro_theme.webm β”‚ β”œβ”€ combat_theme.webm β”‚ β”œβ”€ combat_theme_geon.webm β”‚ β”œβ”€ training_theme.webm β”‚ β”œβ”€ meditation_theme.webm β”‚ β”œβ”€ victory_theme.webm β”‚ β”œβ”€ underground_rave_theme.webm β”‚ └─ ambient_loop.webm └─ sfx/ β”œβ”€ ambient/ β”‚ β”œβ”€ dojang_ambience.webm β”‚ β”œβ”€ wind_effect.webm β”‚ └─ dojo_crowd.webm β”œβ”€ attacks/ β”‚ β”œβ”€ attack_punch_light.webm β”‚ β”œβ”€ attack_punch_medium.webm β”‚ β”œβ”€ attack_kick_heavy.webm β”‚ β”œβ”€ attack_light.webm β”‚ β”œβ”€ attack_medium.webm β”‚ β”œβ”€ attack_critical.webm β”‚ β”œβ”€ attack_special_geon.webm β”‚ β”œβ”€ dodge.webm β”‚ β”œβ”€ block_success.webm β”‚ β”œβ”€ block_break.webm β”‚ └─ perfect_strike.webm β”œβ”€ hit/ β”‚ β”œβ”€ hit_light.webm β”‚ β”œβ”€ hit_medium.webm β”‚ β”œβ”€ hit_heavy.webm β”‚ β”œβ”€ hit_critical.webm β”‚ β”œβ”€ hit_flesh.webm β”‚ └─ hit_block.webm β”œβ”€ combo/ β”‚ β”œβ”€ combo_buildup.webm β”‚ β”œβ”€ combo_finish.webm β”‚ └─ energy_pulse.webm β”œβ”€ match/ β”‚ β”œβ”€ match_start.webm β”‚ β”œβ”€ countdown.webm β”‚ β”œβ”€ match_end.webm β”‚ β”œβ”€ victory.webm β”‚ └─ defeat.webm β”œβ”€ movement/ β”‚ β”œβ”€ footstep.webm β”‚ └─ stance_change.webm β”œβ”€ ki/ β”‚ β”œβ”€ ki_charge.webm β”‚ └─ ki_release.webm β”œβ”€ stamina/ β”‚ └─ stamina_depleted.webm β”œβ”€ health/ β”‚ └─ health_low.webm └─ ui/ β”œβ”€ menu_click.webm β”œβ”€ menu_navigate.webm β”œβ”€ menu_select.webm β”œβ”€ menu_hover.webm └─ menu_back.webm ``` --- ## 1. Backgrounds & Environments ### 1.1 Intro / Main Menu Background - **Asset Name:** `intro_bg_loop.png` - **Description:** A seamless 1920Γ—1080 loopable tile of a rain‐slicked concrete floor with neon pipes and drifting data‐line grid. - **File Format:** PNG (plus normal/roughness if you want subtle 3D lighting on flat sprites, but PNG is usually enough). - **Folder:** `assets/visual/bg/intro/` - **Visual Style Notes:** - Base color: Obsidian (`#0A0F12`) with subtle film‐grain overlay. - Neon accents: teal/cyan reflections on puddles, flickering Hangul glyphs on pipes. - Animation: small β€œrain drip” loop in shader or flipbook. - **Asset Name:** `mainmenu_foreground_overlay.png` - **Description:** A semi‐transparent obsidian vignette (20px β€œsoft edge”) to darken screen edges, helping text/logo pop. - **File Format:** PNG (alpha) - **Folder:** `assets/visual/overlays/` - **Usage:** Placed above `intro_bg_loop` to darken corners. ### 1.2 Dojang / Training Hall Background - **Asset Name:** `dojang_floor_tex.png` - **Description:** 2048Γ—2048 PBR‐style image of matte‐black tatami mats, with subtle water puddle normals (if you want dynamic reflections). - **File Format:** PNG (or PNG + normal/roughness if desired) - **Folder:** `assets/visual/bg/dojang/` - **Style Notes:** - Tileable so it can fill any resolution. - Slight neon cyan reflections at edges where wall meets floor. - **Asset Name:** `dojang_wall_tex.png` - **Description:** 1024Γ—1024 tile of corrugated metal with pipelines and emissive Hangul trigrams (☰, ☲, etc.) behind semi‐opaque panels. - **File Format:** PNG (with separate emissive mask channel if you plan to animate neon flicker). - **Folder:** `assets/visual/bg/dojang/` - **Style Notes:** - The emissive mask will let you β€œpulse” each trigram glyph via a simple shader or a flicker sprite. - **Asset Name:** `dojang_wall_neon_flicker.png` (optional flipbook) - **Description:** A small flipbook (e.g. 4 frames at 256Γ—256) showing a neon glyph flicker (cycle through 0%, 50%, 100% brightness). - **File Format:** PNG sprite sheet - **Folder:** `assets/vfx/animations/` - **Asset Name:** `training_console_model.png` - **Description:** 512Γ—512 stylized grayscale sprite of a holo‐console (flat sprite) with cyan emissive accents (for real‐time data display). - **File Format:** PNG - **Folder:** `assets/visual/props/` - **Notes:** Use this as a static background element; you can overlay bitmaps of gauge bars, or simply let the console glow. - **Asset Name:** `stance_pad_circle.png` - **Description:** 256Γ—256 semi‐transparent PNG of a glowing floor circle. Pulses from 0 β†’ 100% opacity in a 1s loop. - **File Format:** PNG (alpha) - **Folder:** `assets/visual/props/` --- ## 2. UI Icons & HUD Elements ### 2.1 Stance Icons Each icon is a 64Γ—64 px SVG (so it scales crisply). We’ll load them as textures in Pixi and tint/animate as needed. 1. **`icon_stance_defensive.svg`** - Outline style in Slate Gray (`#2E3538`) when inactive. - Filled with Teal Neon (`#00FFC8`) + soft glow when active. 2. **`icon_stance_balanced.svg`** - Outline in Slate Gray; filled with Teal Neon on hover/active. 3. **`icon_stance_aggressive.svg`** - Outline in Slate Gray; filled with Crimson (`#FF0044`) on β€œcharged” or β€œready” state, or Teal Neon when selected. **Folder:** `assets/ui/icons/stances/` ### 2.2 Trigram Icons - **File Names:** ``` icon_trigram_1.svg icon_trigram_2.svg … icon_trigram_8.svg ``` - **Each icon:** 48Γ—48 px, dark background (Gunmetal `#424A50`) with the trigram glyph in Teal Neon. - **States:** - Inactive: no glow, just basic fill. - Active: slight outer glow + subtle 1.1Γ— scale β€œpulse.” - Hover: 1.05Γ— scale + quick glow (0.2 s). **Folder:** `assets/ui/icons/trigrams/` ### 2.3 HUD Bars & Overlays - **`hud_health_bar.png`** (800Γ—32 px PNG) - 10 segmented blocks. Each filled segment is Cyan Glow (`#1BE7FF`); empty is Slate Gray. - **Folder:** `assets/ui/hud/` - **`hud_pain_bar.png`** (800Γ—16 px PNG) - 10 segments. Filled segments are Crimson (`#FF0044`); empty Slate Gray. - **Folder:** `assets/ui/hud/` - **`ui_button_start_idle.png` & `ui_button_start_hover.png`** (256Γ—64 px each) - Idle: Slate Gray panel with β€œβ–Ά Start Combat” in Hangul+English. - Hover: Underline in Teal Neon + icon (β€œβ–Άβ€) glows. - **Folder:** `assets/ui/buttons/` - **`ui_panel_slate.png`** (1024Γ—512 px) - A semi-opaque Slate Gray panel (70% opacity) with a subtle noise texture. - **Folder:** `assets/ui/panels/` - **`tooltip_arrow.png`** (32Γ—32 px PNG) - Small triangle arrow in Cyan Glow for tooltips. - **Folder:** `assets/ui/tooltips/` --- ## 3. Technique Animations (AnimatedSprite Sprite Sheets) Any time you see code like: ```js await Assets.load("path/to/spritesheet.json"); const frames = []; for (let i = 0; i < N; i++) { frames.push(Texture.from(`frame${i}.png`)); } const anim = new AnimatedSprite(frames); ``` …you need a **sprite sheet JSON** + **corresponding PNG atlas** for each β€œtechnique.” Below is a minimal required set of technique animations: ### 3.1 Light Strike Animation (All Archetypes) - **Sprite Sheet JSON:** `strike_light_spritesheet.json` - **Texture Atlas:** `strike_light_spritesheet.png` (e.g., 512Γ—512 containing all 6 frames laid out in a grid). - **Frame Count:** 6 frames, each \~128Γ—256 (portrait orientation). - **Animation Speed:** 0.6 (adjust per archetype). - **Visual Content:** Character winds up β†’ quick punch/kick β†’ recoil. No background in atlas (transparent). - **Folder:** `assets/characters/animations/techniques/light/` ### 3.2 Medium Strike Animation - **Sprite Sheet JSON:** `strike_medium_spritesheet.json` - **Texture Atlas:** `strike_medium_spritesheet.png` (6–8 frames, \~128Γ—256 each). - **Description:** More wind-up, more impact frames, a small dust puff frame integrated (see VFX). - **Folder:** `assets/characters/animations/techniques/medium/` ### 3.3 Heavy Strike Animation - **Sprite Sheet JSON:** `strike_heavy_spritesheet.json` - **Texture Atlas:** `strike_heavy_spritesheet.png` (8 frames, \~256Γ—256 each). - **Description:** Big wind-up, slow-mo pause on impact, splash of embedded VFX dust/blood. - **Folder:** `assets/characters/animations/techniques/heavy/` ### 3.4 Critical Strike / Finisher Animation - **Sprite Sheet JSON:** `strike_critical_spritesheet.json` - **Texture Atlas:** `strike_critical_spritesheet.png` (10–12 frames, \~256Γ—256). - **Description:** Slow-mo bone-breaking blow β†’ flash frame β†’ slowdown. - **Folder:** `assets/characters/animations/techniques/critical/` ### 3.5 Dodge / Evade Animation - **Sprite Sheet JSON:** `dodge_spritesheet.json` - **Texture Atlas:** `dodge_spritesheet.png` (4–6 frames, \~128Γ—256). - **Description:** Quick sidestep/backflip frames, subtle afterimage. - **Folder:** `assets/characters/animations/techniques/dodge/` ### 3.6 Block / Parry Animation - **Sprite Sheet JSON:** `block_spritesheet.json` - **Texture Atlas:** `block_spritesheet.png` (5 frames, \~128Γ—256). - **Description:** Character raises arm/weapon to block β†’ recoil if successful. - **Folder:** `assets/characters/animations/techniques/block/` ### 3.7 Hit Reaction Animation - **Sprite Sheet JSON:** `hit_reaction_spritesheet.json` - **Texture Atlas:** `hit_reaction_spritesheet.png` (4 frames, \~128Γ—256). - **Description:** Character flinches backwards, tinted red on final frame. - **Folder:** `assets/characters/animations/techniques/hit/` ### 3.8 Finisher Sequence (All Archetypes) - **Sprite Sheet JSON:** `finisher_musa_spritesheet.json`, `finisher_amsalja_spritesheet.json`, etc. - **Texture Atlas:** `finisher_musa_spritesheet.png` (12 frames, \~256Γ—256), etc. - **Description:** A multi-stage β€œcinematic” finisher (pause β†’ bone crushing β†’ slow fade). - **Folder:** `assets/characters/animations/finisher/` --- ## 4. Pixi.js Dependencies & Modules Needed Below is a minimal list of **Pixi.js modules** (from `pixi.js/lib`) that you will rely on to load, animate, and render everything above. In your `package.json`, you’ve already installed `pixi.js`. At runtime, you’ll import exactly the pieces you use: ```ts import { Application, TickerPlugin, // core ticker ResizePlugin, // auto resizes to window Assets, // for loading JSON/PNG atlases Texture, Sprite, AnimatedSprite, Container, TilingSprite, // if you want parallax/tiled backgrounds Loader, // older API if you prefer Loader instead of Assets } from "pixi.js"; ``` - **`Application`** (from `app/Application.mjs`) - Creates the Pixi canvas, WebGL context, stage, etc. - **`TickerPlugin`** & **`ResizePlugin`** - Ensures your app’s ticker (main game loop) and auto-resize functionality. - **`Assets`** (from `assets/Assets.mjs`) - The new recommended loader for JSON sprite sheets, PNGs, audio, etc. - Example: ```ts await Assets.load( "assets/characters/animations/techniques/light/strike_light_spritesheet.json" ); ``` - **`Texture`** (from `rendering/texture/Texture.mjs`) - Create textures from loaded assets: ```ts const frameTex = Texture.from("strike_light_000.png"); ``` - **`Sprite`** & **`AnimatedSprite`** (from `scene/sprite/Sprite.mjs` & `scene/sprite-animated/AnimatedSprite.mjs`) - `Sprite` for static images (UI icons, backgrounds). - `AnimatedSprite` for flipbook animations (techniques, VFX). - **`Container`** (from `scene/container/Container.mjs`) - Use a parent `Container` for grouping layers: - `backgroundContainer` - `characterContainer` - `uiContainer` - `vfxContainer` - **`TilingSprite`** (from `scene/sprite-tiling/TilingSprite.mjs`) - If you want to scroll/loop the `intro_bg_loop.png` or tile `dojang_floor_tex.png` seamlessly across a larger stage. - **`Loader`** (from `assets/loader/Loader.mjs`) - If you prefer the older PIXI.Loader API to Assets. Both are possible; `Assets` is recommended for newer Pixi versions. - **`Filter`** / **`BlurFilter`** / **`DisplacementFilter`** (from `filters/defaults/*`) - Useful for adding real-time blur afterimages (for `dodge`), screen shakes, or ripples when powering up Ki (`ki_charge`). --- ## 5. Directory Structure & Final Checklist Below is a **consolidated folder structure** showing where each of the above assets live. This is what your repo (or build pipeline) needs before you start coding the Pixi setup: ``` /assets β”‚ β”œβ”€ characters/ β”‚ β”œβ”€ animations/ β”‚ β”‚ β”œβ”€ techniques/ β”‚ β”‚ β”‚ β”œβ”€ light/ β”‚ β”‚ β”‚ β”‚ β”œβ”€ strike_light_spritesheet.json β”‚ β”‚ β”‚ β”‚ └─ strike_light_spritesheet.png β”‚ β”‚ β”‚ β”œβ”€ medium/ β”‚ β”‚ β”‚ β”‚ β”œβ”€ strike_medium_spritesheet.json β”‚ β”‚ β”‚ β”‚ └─ strike_medium_spritesheet.png β”‚ β”‚ β”‚ β”œβ”€ heavy/ β”‚ β”‚ β”‚ β”‚ β”œβ”€ strike_heavy_spritesheet.json β”‚ β”‚ β”‚ β”‚ └─ strike_heavy_spritesheet.png β”‚ β”‚ β”‚ β”œβ”€ critical/ β”‚ β”‚ β”‚ β”‚ β”œβ”€ strike_critical_spritesheet.json β”‚ β”‚ β”‚ β”‚ └─ strike_critical_spritesheet.png β”‚ β”‚ β”‚ β”œβ”€ dodge/ β”‚ β”‚ β”‚ β”‚ β”œβ”€ dodge_spritesheet.json β”‚ β”‚ β”‚ β”‚ └─ dodge_spritesheet.png β”‚ β”‚ β”‚ β”œβ”€ block/ β”‚ β”‚ β”‚ β”‚ β”œβ”€ block_spritesheet.json β”‚ β”‚ β”‚ β”‚ └─ block_spritesheet.png β”‚ β”‚ β”‚ └─ hit/ β”‚ β”‚ β”‚ β”œβ”€ hit_reaction_spritesheet.json β”‚ β”‚ β”‚ └─ hit_reaction_spritesheet.png β”‚ β”‚ └─ finisher/ β”‚ β”‚ β”œβ”€ musa_finisher_spritesheet.json β”‚ β”‚ └─ musa_finisher_spritesheet.png β”‚ β”‚ β”œβ”€ amsalja_finisher_spritesheet.json β”‚ β”‚ └─ amsalja_finisher_spritesheet.png β”‚ β”‚ └─ … (one per archetype) β”‚ └─ portraits/ β”‚ β”œβ”€ portrait_musa.png β”‚ β”œβ”€ portrait_amsalja.png β”‚ └─ … (other archetypes) β”‚ β”œβ”€ fonts/ β”‚ β”œβ”€ BlackTrigram-Hangul.woff2 β”‚ β”œβ”€ NotoSansKR-Regular.woff2 β”‚ └─ Roboto-Regular.woff2 β”‚ β”œβ”€ i18n/ β”‚ β”œβ”€ ko.json β”‚ └─ en.json β”‚ β”œβ”€ props/ β”‚ β”œβ”€ training_console_model.png β”‚ β”œβ”€ stance_pad_circle.png β”‚ └─ dummy_target_overlay.svg β”‚ β”œβ”€ shaders/ β”‚ β”œβ”€ rim_light.shader β”‚ β”œβ”€ blood_decal.shader β”‚ └─ neon_flicker.shader β”‚ β”œβ”€ ui/ β”‚ β”œβ”€ buttons/ β”‚ β”‚ β”œβ”€ ui_button_start_idle.png β”‚ β”‚ └─ ui_button_start_hover.png β”‚ β”œβ”€ icons/ β”‚ β”‚ β”œβ”€ stances/ β”‚ β”‚ β”‚ β”œβ”€ icon_stance_defensive.svg β”‚ β”‚ β”‚ β”œβ”€ icon_stance_balanced.svg β”‚ β”‚ β”‚ └─ icon_stance_aggressive.svg β”‚ β”‚ β”œβ”€ trigrams/ β”‚ β”‚ β”‚ β”œβ”€ icon_trigram_1.svg β”‚ β”‚ β”‚ β”œβ”€ icon_trigram_2.svg β”‚ β”‚ β”‚ └─ … up to icon_trigram_8.svg β”‚ β”‚ └─ tooltip_arrow.png β”‚ └─ hud/ β”‚ β”œβ”€ hud_health_bar.png β”‚ └─ hud_pain_bar.png β”‚ β”œβ”€ vfx/ β”‚ β”œβ”€ animations/ β”‚ β”‚ β”œβ”€ anim_logo_pulse.json β”‚ β”‚ β”œβ”€ anim_menu_slide_0.png … anim_menu_slide_7.png β”‚ β”‚ β”œβ”€ anim_strike_impact_0.png … anim_strike_impact_15.png β”‚ β”‚ └─ anim_finisher_musa_0.png … anim_finisher_musa_11.png β”‚ β”œβ”€ particles/ β”‚ β”‚ β”œβ”€ vfx_dust_puff.png β”‚ β”‚ β”œβ”€ vfx_blood_splatter.png β”‚ β”‚ └─ confetti_sprites.png β”‚ └─ shaders/ β”‚ β”œβ”€ vfx_impact_ring.png β”‚ β”œβ”€ vfx_neon_glow.png β”‚ └─ vfx_critical_flash.png β”‚ β”œβ”€ visual/ β”‚ β”œβ”€ bg/ β”‚ β”‚ β”œβ”€ intro/ β”‚ β”‚ β”‚ β”œβ”€ intro_bg_loop.png β”‚ β”‚ β”‚ └─ mainmenu_foreground_overlay.png β”‚ β”‚ └─ dojang/ β”‚ β”‚ β”œβ”€ dojang_floor_tex.png β”‚ β”‚ └─ dojang_wall_tex.png β”‚ └─ overlays/ β”‚ β”œβ”€ vital_region_head.png β”‚ β”œβ”€ vital_region_neck.png β”‚ β”œβ”€ vital_region_torso.png β”‚ β”œβ”€ vital_region_arms.png β”‚ β”œβ”€ vital_region_chest.png β”‚ └─ vital_region_legs.png β”‚ └─ public/ └─ assets/ └─ audio/ β”œβ”€ music/ β”‚ β”œβ”€ intro_theme.webm β”‚ β”œβ”€ combat_theme.webm β”‚ β”œβ”€ combat_theme_geon.webm β”‚ β”œβ”€ training_theme.webm β”‚ β”œβ”€ meditation_theme.webm β”‚ β”œβ”€ victory_theme.webm β”‚ β”œβ”€ underground_rave_theme.webm β”‚ └─ ambient_loop.webm └─ sfx/ β”œβ”€ ambient/ β”‚ β”œβ”€ dojang_ambience.webm β”‚ β”œβ”€ wind_effect.webm β”‚ └─ dojo_crowd.webm β”œβ”€ attacks/ β”‚ β”œβ”€ attack_punch_light.webm β”‚ β”œβ”€ attack_punch_medium.webm β”‚ β”œβ”€ attack_kick_heavy.webm β”‚ β”œβ”€ attack_light.webm β”‚ β”œβ”€ attack_medium.webm β”‚ β”œβ”€ attack_critical.webm β”‚ β”œβ”€ attack_special_geon.webm β”‚ β”œβ”€ dodge.webm β”‚ β”œβ”€ block_success.webm β”‚ β”œβ”€ block_break.webm β”‚ └─ perfect_strike.webm β”œβ”€ hit/ β”‚ β”œβ”€ hit_light.webm β”‚ β”œβ”€ hit_medium.webm β”‚ β”œβ”€ hit_heavy.webm β”‚ β”œβ”€ hit_critical.webm β”‚ β”œβ”€ hit_flesh.webm β”‚ └─ hit_block.webm β”œβ”€ combo/ β”‚ β”œβ”€ combo_buildup.webm β”‚ β”œβ”€ combo_finish.webm β”‚ └─ energy_pulse.webm β”œβ”€ match/ β”‚ β”œβ”€ match_start.webm β”‚ β”œβ”€ countdown.webm β”‚ β”œβ”€ match_end.webm β”‚ β”œβ”€ victory.webm β”‚ └─ defeat.webm β”œβ”€ movement/ β”‚ β”œβ”€ footstep.webm β”‚ └─ stance_change.webm β”œβ”€ ki/ β”‚ β”œβ”€ ki_charge.webm β”‚ └─ ki_release.webm β”œβ”€ stamina/ β”‚ └─ stamina_depleted.webm β”œβ”€ health/ β”‚ └─ health_low.webm └─ ui/ β”œβ”€ menu_click.webm β”œβ”€ menu_navigate.webm β”œβ”€ menu_select.webm β”œβ”€ menu_hover.webm └─ menu_back.webm ``` --- ## 1. Backgrounds & Environments ### 1.1 Intro / Main Menu Background - **Asset Name:** `intro_bg_loop.png` - **Description:** A seamless 1920Γ—1080 loopable tile of a rain‐slicked concrete floor with neon pipes and drifting data‐line grid. - **File Format:** PNG (plus normal/roughness if you want subtle 3D lighting on flat sprites, but PNG is usually enough). - **Folder:** `assets/visual/bg/intro/` - **Visual Style Notes:** - Base color: Obsidian (`#0A0F12`) with subtle film‐grain overlay. - Neon accents: teal/cyan reflections on puddles, flickering Hangul glyphs on pipes. - Animation: small β€œrain drip” loop in shader or flipbook. - **Asset Name:** `mainmenu_foreground_overlay.png` - **Description:** A semi‐transparent obsidian vignette (20px β€œsoft edge”) to darken screen edges, helping text/logo pop. - **File Format:** PNG (alpha) - **Folder:** `assets/visual/overlays/` - **Usage:** Placed above `intro_bg_loop` to darken corners. ### 1.2 Dojang / Training Hall Background - **Asset Name:** `dojang_floor_tex.png` - **Description:** 2048Γ—2048 PBR‐style image of matte‐black tatami mats, with subtle water puddle normals (if you want dynamic reflections). - **File Format:** PNG (or PNG + normal/roughness if desired) - **Folder:** `assets/visual/bg/dojang/` - **Style Notes:** - Tileable so it can fill any resolution. - Slight neon cyan reflections at edges where wall meets floor. - **Asset Name:** `dojang_wall_tex.png` - **Description:** 1024Γ—1024 tile of corrugated metal with pipelines and emissive Hangul trigrams (☰, ☲, etc.) behind semi‐opaque panels. - **File Format:** PNG (with separate emissive mask channel if you plan to animate neon flicker). - **Folder:** `assets/visual/bg/dojang/` - **Style Notes:** - The emissive mask will let you β€œpulse” each trigram glyph via a simple shader or a flicker sprite. - **Asset Name:** `dojang_wall_neon_flicker.png` (optional flipbook) - **Description:** A small flipbook (e.g. 4 frames at 256Γ—256) showing a neon glyph flicker (cycle through 0%, 50%, 100% brightness). - **File Format:** PNG sprite sheet - **Folder:** `assets/vfx/animations/` - **Asset Name:** `training_console_model.png` - **Description:** 512Γ—512 stylized grayscale sprite of a holo‐console (flat sprite) with cyan emissive accents (for real‐time data display). - **File Format:** PNG - **Folder:** `assets/visual/props/` - **Notes:** Use this as a static background element; you can overlay bitmaps of gauge bars, or simply let the console glow. - **Asset Name:** `stance_pad_circle.png` - **Description:** 256Γ—256 semi‐transparent PNG of a glowing floor circle. Pulses from 0 β†’ 100% opacity in a 1s loop. - **File Format:** PNG (alpha) - **Folder:** `assets/visual/props/` --- ## 2. UI Icons & HUD Elements ### 2.1 Stance Icons Each icon is a 64Γ—64 px SVG (so it scales crisply). We’ll load them as textures in Pixi and tint/animate as needed. 1. **`icon_stance_defensive.svg`** - Outline style in Slate Gray (`#2E3538`) when inactive. - Filled with Teal Neon (`#00FFC8`) + soft glow when active. 2. **`icon_stance_balanced.svg`** - Outline in Slate Gray; filled with Teal Neon on hover/active. 3. **`icon_stance_aggressive.svg`** - Outline in Slate Gray; filled with Crimson (`#FF0044`) on β€œcharged” or β€œready” state, or Teal Neon when selected. **Folder:** `assets/ui/icons/stances/` ### 2.2 Trigram Icons - **File Names:** ``` icon_trigram_1.svg icon_trigram_2.svg … icon_trigram_8.svg ``` - **Each icon:** 48Γ—48 px, dark background (Gunmetal `#424A50`) with the trigram glyph in Teal Neon. - **States:** - Inactive: no glow, just basic fill. - Active: slight outer glow + subtle 1.1Γ— scale β€œpulse.” - Hover: 1.05Γ— scale + quick glow (0.2 s). **Folder:** `assets/ui/icons/trigrams/` ### 2.3 HUD Bars & Overlays - **`hud_health_bar.png`** (800Γ—32 px PNG) - 10 segmented blocks. Each filled segment is Cyan Glow (`#1BE7FF`); empty is Slate Gray. - **Folder:** `assets/ui/hud/` - **`hud_pain_bar.png`** (800Γ—16 px PNG) - 10 segments. Filled segments are Crimson (`#FF0044`); empty Slate Gray. - **Folder:** `assets/ui/hud/` - **`ui_button_start_idle.png` & `ui_button_start_hover.png`** (256Γ—64 px each) - Idle: Slate Gray panel with β€œβ–Ά Start Combat” in Hangul+English. - Hover: Underline in Teal Neon + icon (β€œβ–Άβ€) glows. - **Folder:** `assets/ui/buttons/` - **`ui_panel_slate.png`** (1024Γ—512 px) - A semi-opaque Slate Gray panel (70% opacity) with a subtle noise texture. - **Folder:** `assets/ui/panels/` - **`tooltip_arrow.png`** (32Γ—32 px PNG) - Small triangle arrow in Cyan Glow for tooltips. - **Folder:** `assets/ui/tooltips/` --- ## 3. Technique Animations (AnimatedSprite Sprite Sheets) Any time you see code like: ```js await Assets.load("path/to/spritesheet.json"); const frames = []; for (let i = 0; i < N; i++) { frames.push(Texture.from(`frame${i}.png`)); } const anim = new AnimatedSprite(frames); ``` …you need a **sprite sheet JSON** + **corresponding PNG atlas** for each β€œtechnique.” Below is a minimal required set of technique animations: ### 3.1 Light Strike Animation (All Archetypes) - **Sprite Sheet JSON:** `strike_light_spritesheet.json` - **Texture Atlas:** `strike_light_spritesheet.png` (e.g., 512Γ—512 containing all 6 frames laid out in a grid). - **Frame Count:** 6 frames, each \~128Γ—256 (portrait orientation). - **Animation Speed:** 0.6 (adjust per archetype). - **Visual Content:** Character winds up β†’ quick punch/kick β†’ recoil. No background in atlas (transparent). - **Folder:** `assets/characters/animations/techniques/light/` ### 3.2 Medium Strike Animation - **Sprite Sheet JSON:** `strike_medium_spritesheet.json` - **Texture Atlas:** `strike_medium_spritesheet.png` (6–8 frames, \~128Γ—256 each). - **Description:** More wind-up, more impact frames, a small dust puff frame integrated (see VFX). - **Folder:** `assets/characters/animations/techniques/medium/` ### 3.3 Heavy Strike Animation - **Sprite Sheet JSON:** `strike_heavy_spritesheet.json` - **Texture Atlas:** `strike_heavy_spritesheet.png` (8 frames, \~256Γ—256 each). - **Description:** Big wind-up, slow-mo pause on impact, splash of embedded VFX dust/blood. - **Folder:** `assets/characters/animations/techniques/heavy/` ### 3.4 Critical Strike / Finisher Animation - **Sprite Sheet JSON:** `strike_critical_spritesheet.json` - **Texture Atlas:** `strike_critical_spritesheet.png` (10–12 frames, \~256Γ—256). - **Description:** Slow-mo bone-breaking blow β†’ flash frame β†’ slowdown. - **Folder:** `assets/characters/animations/techniques/critical/` ### 3.5 Dodge / Evade Animation - **Sprite Sheet JSON:** `dodge_spritesheet.json` - **Texture Atlas:** `dodge_spritesheet.png` (4–6 frames, \~128Γ—256). - **Description:** Quick sidestep/backflip frames, subtle afterimage. - **Folder:** `assets/characters/animations/techniques/dodge/` ### 3.6 Block / Parry Animation - **Sprite Sheet JSON:** `block_spritesheet.json` - **Texture Atlas:** `block_spritesheet.png` (5 frames, \~128Γ—256). - **Description:** Character raises arm/weapon to block β†’ recoil if successful. - **Folder:** `assets/characters/animations/techniques/block/` ### 3.7 Hit Reaction Animation - **Sprite Sheet JSON:** `hit_reaction_spritesheet.json` - **Texture Atlas:** `hit_reaction_spritesheet.png` (4 frames, \~128Γ—256). - **Description:** Character flinches backwards, tinted red on final frame. - **Folder:** `assets/characters/animations/techniques/hit/` ### 3.8 Finisher Sequence (All Archetypes) - **Sprite Sheet JSON:** `finisher_musa_spritesheet.json`, `finisher_amsalja_spritesheet.json`, etc. - **Texture Atlas:** `finisher_musa_spritesheet.png` (12 frames, \~256Γ—256), etc. - **Description:** A multi-stage β€œcinematic” finisher (pause β†’ bone crushing β†’ slow fade). - **Folder:** `assets/characters/animations/finisher/` --- ## 4. Pixi.js Dependencies & Modules Needed Below is a minimal list of **Pixi.js modules** (from `pixi.js/lib`) that you will rely on to load, animate, and render everything above. In your `package.json`, you’ve already installed `pixi.js`. At runtime, you’ll import exactly the pieces you use: ```ts import { Application, TickerPlugin, // core ticker ResizePlugin, // auto resizes to window Assets, // for loading JSON/PNG atlases Texture, Sprite, AnimatedSprite, Container, TilingSprite, // if you want parallax/tiled backgrounds Loader, // older API if you prefer Loader instead of Assets } from "pixi.js"; ``` - **`Application`** (from `app/Application.mjs`) - Creates the Pixi canvas, WebGL context, stage, etc. - **`TickerPlugin`** & **`ResizePlugin`** - Ensures your app’s ticker (main game loop) and auto-resize functionality. - **`Assets`** (from `assets/Assets.mjs`) - The new recommended loader for JSON sprite sheets, PNGs, audio, etc. - Example: ```ts await Assets.load( "assets/characters/animations/techniques/light/strike_light_spritesheet.json" ); ``` - **`Texture`** (from `rendering/texture/Texture.mjs`) - Create textures from loaded assets: ```ts const frameTex = Texture.from("strike_light_000.png"); ``` - **`Sprite`** & **`AnimatedSprite`** (from `scene/sprite/Sprite.mjs` & `scene/sprite-animated/AnimatedSprite.mjs`) - `Sprite` for static images (UI icons, backgrounds). - `AnimatedSprite` for flipbook animations (techniques, VFX). - **`Container`** (from `scene/container/Container.mjs`) - Use a parent `Container` for grouping layers: - `backgroundContainer` - `characterContainer` - `uiContainer` - `vfxContainer` - **`TilingSprite`** (from `scene/sprite-tiling/TilingSprite.mjs`) - If you want to scroll/loop the `intro_bg_loop.png` or tile `dojang_floor_tex.png` seamlessly across a larger stage. - **`Loader`** (from `assets/loader/Loader.mjs`) - If you prefer the older PIXI.Loader API to Assets. Both are possible; `Assets` is recommended for newer Pixi versions. - **`Filter`** / **`BlurFilter`** / **`DisplacementFilter`** (from `filters/defaults/*`) - Useful for adding real-time blur afterimages (for `dodge`), screen shakes, or ripples when powering up Ki (`ki_charge`). --- ## 5. Directory Structure & Final Checklist Below is a **consolidated folder structure** showing where each of the above assets live. This is what your repo (or build pipeline) needs before you start coding the Pixi setup: ``` /assets β”‚ β”œβ”€ characters/ β”‚ β”œβ”€ animations/ β”‚ β”‚ β”œβ”€ techniques/ β”‚ β”‚ β”‚ β”œβ”€ light/ β”‚ β”‚ β”‚ β”‚ β”œβ”€ strike_light_spritesheet.json β”‚ β”‚ β”‚ β”‚ └─ strike_light_spritesheet.png β”‚ β”‚ β”‚ β”œβ”€ medium/ β”‚ β”‚ β”‚ β”‚ β”œβ”€ strike_medium_spritesheet.json β”‚ β”‚ β”‚ β”‚ └─ strike_medium_spritesheet.png β”‚ β”‚ β”‚ β”œβ”€ heavy/ β”‚ β”‚ β”‚ β”‚ β”œβ”€ strike_heavy_spritesheet.json β”‚ β”‚ β”‚ β”‚ └─ strike_heavy_spritesheet.png β”‚ β”‚ β”‚ β”œβ”€ critical/ β”‚ β”‚ β”‚ β”‚ β”œβ”€ strike_critical_spritesheet.json β”‚ β”‚ β”‚ β”‚ └─ strike_critical_spritesheet.png β”‚ β”‚ β”‚ β”œβ”€ dodge/ β”‚ β”‚ β”‚ β”‚ β”œβ”€ dodge_spritesheet.json β”‚ β”‚ β”‚ β”‚ └─ dodge_spritesheet.png β”‚ β”‚ β”‚ β”œβ”€ block/ β”‚ β”‚ β”‚ β”‚ β”œβ”€ block_spritesheet.json β”‚ β”‚ β”‚ β”‚ └─ block_spritesheet.png β”‚ β”‚ β”‚ └─ hit/ β”‚ β”‚ β”‚ β”œβ”€ hit_reaction_spritesheet.json β”‚ β”‚ β”‚ └─ hit_reaction_spritesheet.png β”‚ β”‚ └─ finisher/ β”‚ β”‚ β”œβ”€ musa_finisher_spritesheet.json β”‚ β”‚ └─ musa_finisher_spritesheet.png β”‚ β”‚ β”œβ”€ amsalja_finisher_spritesheet.json β”‚ β”‚ └─ amsalja_finisher_spritesheet.png β”‚ β”‚ └─ … (one per archetype) β”‚ └─ portraits/ β”‚ β”œβ”€ portrait_musa.png β”‚ β”œβ”€ portrait_amsalja.png β”‚ └─ … (other archetypes) β”‚ β”œβ”€ fonts/ β”‚ β”œβ”€ BlackTrigram-Hangul.woff2 β”‚ β”œβ”€ NotoSansKR-Regular.woff2 β”‚ └─ Roboto-Regular.woff2 β”‚ β”œβ”€ i18n/ β”‚ β”œβ”€ ko.json β”‚ └─ en.json β”‚ β”œβ”€ props/ β”‚ β”œβ”€ training_console_model.png β”‚ β”œβ”€ stance_pad_circle.png β”‚ └─ dummy_target_overlay.svg β”‚ β”œβ”€ shaders/ β”‚ β”œβ”€ rim_light.shader β”‚ β”œβ”€ blood_decal.shader β”‚ └─ neon_flicker.shader β”‚ β”œβ”€ ui/ β”‚ β”œβ”€ buttons/ β”‚ β”‚ β”œβ”€ ui_button_start_idle.png β”‚ β”‚ └─ ui_button_start_hover.png β”‚ β”œβ”€ icons/ β”‚ β”‚ β”œβ”€ stances/ β”‚ β”‚ β”‚ β”œβ”€ icon_stance_defensive.svg β”‚ β”‚ β”‚ β”œβ”€ icon_stance_balanced.svg β”‚ β”‚ β”‚ └─ icon_stance_aggressive.svg β”‚ β”‚ β”œβ”€ trigrams/ β”‚ β”‚ β”‚ β”œβ”€ icon_trigram_1.svg β”‚ β”‚ β”‚ β”œβ”€ icon_trigram_2.svg β”‚ β”‚ β”‚ └─ … up to icon_trigram_8.svg β”‚ β”‚ └─ tooltip_arrow.png β”‚ └─ hud/ β”‚ β”œβ”€ hud_health_bar.png β”‚ └─ hud_pain_bar.png β”‚ β”œβ”€ vfx/ β”‚ β”œβ”€ animations/ β”‚ β”‚ β”œβ”€ anim_logo_pulse.json β”‚ β”‚ β”œβ”€ anim_menu_slide_0.png … anim_menu_slide_7.png β”‚ β”‚ β”œβ”€ anim_strike_impact_0.png … anim_strike_impact_15.png β”‚ β”‚ └─ anim_finisher_musa_0.png … anim_finisher_musa_11.png β”‚ β”œβ”€ particles/ β”‚ β”‚ β”œβ”€ vfx_dust_puff.png β”‚ β”‚ β”œβ”€ vfx_blood_splatter.png β”‚ β”‚ └─ confetti_sprites.png β”‚ └─ shaders/ β”‚ β”œβ”€ vfx_impact_ring.png β”‚ β”œβ”€ vfx_neon_glow.png β”‚ └─ vfx_critical_flash.png β”‚ β”œβ”€ visual/ β”‚ β”œβ”€ bg/ β”‚ β”‚ β”œβ”€ intro/ β”‚ β”‚ β”‚ β”œβ”€ intro_bg_loop.png β”‚ β”‚ β”‚ └─ mainmenu_foreground_overlay.png β”‚ β”‚ └─ dojang/ β”‚ β”‚ β”œβ”€ dojang_floor_tex.png β”‚ β”‚ └─ dojang_wall_tex.png β”‚ └─ overlays/ β”‚ β”œβ”€ vital_region_head.png β”‚ β”œβ”€ vital_region_neck.png β”‚ β”œβ”€ vital_region_torso.png β”‚ β”œβ”€ vital_region_arms.png β”‚ β”œβ”€ vital_region_chest.png β”‚ └─ vital_region_legs.png β”‚ └─ public/ └─ assets/ └─ audio/ β”œβ”€ music/ β”‚ β”œβ”€ intro_theme.webm β”‚ β”œβ”€ combat_theme.webm β”‚ β”œβ”€ combat_theme_geon.webm β”‚ β”œβ”€ training_theme.webm β”‚ β”œβ”€ meditation_theme.webm β”‚ β”œβ”€ victory_theme.webm β”‚ β”œβ”€ underground_rave_theme.webm β”‚ └─ ambient_loop.webm └─ sfx/ β”œβ”€ ambient/ β”‚ β”œβ”€ dojang_ambience.webm β”‚ β”œβ”€ wind_effect.webm β”‚ └─ dojo_crowd.webm β”œβ”€ attacks/ β”‚ β”œβ”€ attack_punch_light.webm β”‚ β”œβ”€ attack_punch_medium.webm β”‚ β”œβ”€ attack_kick_heavy.webm β”‚ β”œβ”€ attack_light.webm β”‚ β”œβ”€ attack_medium.webm β”‚ β”œβ”€ attack_critical.webm β”‚ β”œβ”€ attack_special_geon.webm β”‚ β”œβ”€ dodge.webm β”‚ β”œβ”€ block_success.webm β”‚ β”œβ”€ block_break.webm β”‚ └─ perfect_strike.webm β”œβ”€ hit/ β”‚ β”œβ”€ hit_light.webm β”‚ β”œβ”€ hit_medium.webm β”‚ β”œβ”€ hit_heavy.webm β”‚ β”œβ”€ hit_critical.webm β”‚ β”œβ”€ hit_flesh.webm β”‚ └─ hit_block.webm β”œβ”€ combo/ β”‚ β”œβ”€ combo_buildup.webm β”‚ β”œβ”€ combo_finish.webm β”‚ └─ energy_pulse.webm β”œβ”€ match/ β”‚ β”œβ”€ match_start.webm β”‚ β”œβ”€ countdown.webm β”‚ β”œβ”€ match_end.webm β”‚ β”œβ”€ victory.webm β”‚ └─ defeat.webm β”œβ”€ movement/ β”‚ β”œβ”€ footstep.webm β”‚ └─ stance_change.webm β”œβ”€ ki/ β”‚ β”œβ”€ ki_charge.webm β”‚ └─ ki_release.webm β”œβ”€ stamina/ β”‚ └─ stamina_depleted.webm β”œβ”€ health/ β”‚ └─ health_low.webm └─ ui/ β”œβ”€ menu_click.webm β”œβ”€ menu_navigate.webm β”œβ”€ menu_select.webm β”œβ”€ menu_hover.webm └─ menu_back.webm ``` --- ## 1. Backgrounds & Environments ### 1.1 Intro / Main Menu Background - **Asset Name:** `intro_bg_loop.png` - **Description:** A seamless 1920Γ—1080 loopable tile of a rain‐slicked concrete floor with neon pipes and drifting data‐line grid. - **File Format:** PNG (plus normal/roughness if you want subtle 3D lighting on flat sprites, but PNG is usually enough). - **Folder:** `assets/visual/bg/intro/` - **Visual Style Notes:** - Base color: Obsidian (`#0A0F12`) with subtle film‐grain overlay. - Neon accents: teal/cyan reflections on puddles, flickering Hangul glyphs on pipes. - Animation: small β€œrain drip” loop in shader or flipbook. - **Asset Name:** `mainmenu_foreground_overlay.png` - **Description:** A semi‐transparent obsidian vignette (20px β€œsoft edge”) to darken screen edges, helping text/logo pop. - **File Format:** PNG (alpha) - **Folder:** `assets/visual/overlays/` - **Usage:** Placed above `intro_bg_loop` to darken corners. ### 1.2 Dojang / Training Hall Background - **Asset Name:** `dojang_floor_tex.png` - **Description:** 2048Γ—2048 PBR‐style image of matte‐black tatami mats, with subtle water puddle normals (if you want dynamic reflections). - **File Format:** PNG (or PNG + normal/roughness if desired) - **Folder:** `assets/visual/bg/dojang/` - **Style Notes:** - Tileable so it can fill any resolution. - Slight neon cyan reflections at edges where wall meets floor. - **Asset Name:** `dojang_wall_tex.png` - **Description:** 1024Γ—1024 tile of corrugated metal with pipelines and emissive Hangul trigrams (☰, ☲, etc.) behind semi‐opaque panels. - **File Format:** PNG (with separate emissive mask channel if you plan to animate neon flicker). - **Folder:** `assets/visual/bg/dojang/` - **Style Notes:** - The emissive mask will let you β€œpulse” each trigram glyph via a simple shader or a flicker sprite. - **Asset Name:** `dojang_wall_neon_flicker.png` (optional flipbook) - **Description:** A small flipbook (e.g. 4 frames at 256Γ—256) showing a neon glyph flicker (cycle through 0%, 50%, 100% brightness). - **File Format:** PNG sprite sheet - **Folder:** `assets/vfx/animations/` - **Asset Name:** `training_console_model.png` - **Description:** 512Γ—512 stylized grayscale sprite of a holo‐console (flat sprite) with cyan emissive accents (for real‐time data display). - **File Format:** PNG - **Folder:** `assets/visual/props/` - **Notes:** Use this as a static background element; you can overlay bitmaps of gauge bars, or simply let the console glow. - **Asset Name:** `stance_pad_circle.png` - **Description:** 256Γ—256 semi‐transparent PNG of a glowing floor circle. Pulses from 0 β†’ 100% opacity in a 1s loop. - **File Format:** PNG (alpha) - **Folder:** `assets/visual/props/` --- ## 2. UI Icons & HUD Elements ### 2.1 Stance Icons Each icon is a 64Γ—64 px SVG (so it scales crisply). We’ll load them as textures in Pixi and tint/animate as needed. 1. **`icon_stance_defensive.svg`** - Outline style in Slate Gray (`#2E3538`) when inactive. - Filled with Teal Neon (`#00FFC8`) + soft glow when active. 2. **`icon_stance_balanced.svg`** - Outline in Slate Gray; filled with Teal Neon on hover/active. 3. **`icon_stance_aggressive.svg`** - Outline in Slate Gray; filled with Crimson (`#FF0044`) on β€œcharged” or β€œready” state, or Teal Neon when selected. **Folder:** `assets/ui/icons/stances/` ### 2.2 Trigram Icons - **File Names:** ``` icon_trigram_1.svg icon_trigram_2.svg … icon_trigram_8.svg ``` - **Each icon:** 48Γ—48 px, dark background (Gunmetal `#424A50`) with the trigram glyph in Teal Neon. - **States:** - Inactive: no glow, just basic fill. - Active: slight outer glow + subtle 1.1Γ— scale β€œpulse.” - Hover: 1.05Γ— scale + quick glow (0.2 s). **Folder:** `assets/ui/icons/trigrams/` ### 2.3 HUD Bars & Overlays - **`hud_health_bar.png`** (800Γ—32 px PNG) - 10 segmented blocks. Each filled segment is Cyan Glow (`#1BE7FF`); empty is Slate Gray. - **Folder:** `assets/ui/hud/` - **`hud_pain_bar.png`** (800Γ—16 px PNG) - 10 segments. Filled segments are Crimson (`#FF0044`); empty Slate Gray. - **Folder:** `assets/ui/hud/` - **`ui_button_start_idle.png` & `ui_button_start_hover.png`** (256Γ—64 px each) - Idle: Slate Gray panel with β€œβ–Ά Start Combat” in Hangul+English. - Hover: Underline in Teal Neon + icon (β€œβ–Άβ€) glows. - **Folder:** `assets/ui/buttons/` - **`ui_panel_slate.png`** (1024Γ—512 px) - A semi-opaque Slate Gray panel (70% opacity) with a subtle noise texture. - **Folder:** `assets/ui/panels/` - **`tooltip_arrow.png`** (32Γ—32 px PNG) - Small triangle arrow in Cyan Glow for tooltips. - **Folder:** `assets/ui/tooltips/` --- ## 3. Technique Animations (AnimatedSprite Sprite Sheets) Any time you see code like: ```js await Assets.load("path/to/spritesheet.json"); const frames = []; for (let i = 0; i < N; i++) { frames.push(Texture.from(`frame${i}.png`)); } const anim = new AnimatedSprite(frames); ``` …you need a **sprite sheet JSON** + **corresponding PNG atlas** for each β€œtechnique.” Below is a minimal required set of technique animations: ### 3.1 Light Strike Animation (All Archetypes) - **Sprite Sheet JSON:** `strike_light_spritesheet.json` - **Texture Atlas:** `strike_light_spritesheet.png` (e.g., 512Γ—512 containing all 6 frames laid out in a grid). - **Frame Count:** 6 frames, each \~128Γ—256 (portrait orientation). - **Animation Speed:** 0.6 (adjust per archetype). - **Visual Content:** Character winds up β†’ quick punch/kick β†’ recoil. No background in atlas (transparent). - **Folder:** `assets/characters/animations/techniques/light/` ### 3.2 Medium Strike Animation - **Sprite Sheet JSON:** `strike_medium_spritesheet.json` - **Texture Atlas:** `strike_medium_spritesheet.png` (6–8 frames, \~128Γ—256 each). - **Description:** More wind-up, more impact frames, a small dust puff frame integrated (see VFX). - **Folder:** `assets/characters/animations/techniques/medium/` ### 3.3 Heavy Strike Animation - **Sprite Sheet JSON:** `strike_heavy_spritesheet.json` - **Texture Atlas:** `strike_heavy_spritesheet.png` (8 frames, \~256Γ—256 each). - **Description:** Big wind-up, slow-mo pause on impact, splash of embedded VFX dust/blood. - **Folder:** `assets/characters/animations/techniques/heavy/` ### 3.4 Critical Strike / Finisher Animation - **Sprite Sheet JSON:** `strike_critical_spritesheet.json` - **Texture Atlas:** `strike_critical_spritesheet.png` (10–12 frames, \~256Γ—256). - **Description:** Slow-mo bone-breaking blow β†’ flash frame β†’ slowdown. - **Folder:** `assets/characters/animations/techniques/critical/` ### 3.5 Dodge / Evade Animation - **Sprite Sheet JSON:** `dodge_spritesheet.json` - **Texture Atlas:** `dodge_spritesheet.png` (4–6 frames, \~128Γ—256). - **Description:** Quick sidestep/backflip frames, subtle afterimage. - **Folder:** `assets/characters/animations/techniques/dodge/` ### 3.6 Block / Parry Animation - **Sprite Sheet JSON:** `block_spritesheet.json` - **Texture Atlas:** `block_spritesheet.png` (5 frames, \~128Γ—256). - **Description:** Character raises arm/weapon to block β†’ recoil if successful. - **Folder:** `assets/characters/animations/techniques/block/` ### 3.7 Hit Reaction Animation - **Sprite Sheet JSON:** `hit_reaction_spritesheet.json` - **Texture Atlas:** `hit_reaction_spritesheet.png` (4 frames, \~128Γ—256). - **Description:** Character flinches backwards, tinted red on final frame. - **Folder:** `assets/characters/animations/techniques/hit/` ### 3.8 Finisher Sequence (All Archetypes) - **Sprite Sheet JSON:** `finisher_musa_spritesheet.json`, `finisher_amsalja_spritesheet.json`, etc. - **Texture Atlas:** `finisher_musa_spritesheet.png` (12 frames, \~256Γ—256), etc. - **Description:** A multi-stage β€œcinematic” finisher (pause β†’ bone crushing β†’ slow fade). - **Folder:** `assets/characters/animations/finisher/` --- ## 4. Pixi.js Dependencies & Modules Needed Below is a minimal list of **Pixi.js modules** (from `pixi.js/lib`) that you will rely on to load, animate, and render everything above. In your `package.json`, you’ve already installed `pixi.js`. At runtime, you’ll import exactly the pieces you use: ```ts import { Application, TickerPlugin, // core ticker ResizePlugin, // auto resizes to window Assets, // for loading JSON/PNG atlases Texture, Sprite, AnimatedSprite, Container, TilingSprite, // if you want parallax/tiled backgrounds Loader, // older API if you prefer Loader instead of Assets } from "pixi.js"; ``` - **`Application`** (from `app/Application.mjs`) - Creates the Pixi canvas, WebGL context, stage, etc. - **`TickerPlugin`** & **`ResizePlugin`** - Ensures your app’s ticker (main game loop) and auto-resize functionality. - **`Assets`** (from `assets/Assets.mjs`) - The new recommended loader for JSON sprite sheets, PNGs, audio, etc. - Example: ```ts await Assets.load( "assets/characters/animations/techniques/light/strike_light_spritesheet.json" ); ``` - **`Texture`** (from `rendering/texture/Texture.mjs`) - Create textures from loaded assets: ```ts const frameTex = Texture.from("strike_light_000.png"); ``` - **`Sprite`** & **`AnimatedSprite`** (from `scene/sprite/Sprite.mjs` & `scene/sprite-animated/AnimatedSprite.mjs`) - `Sprite` for static images (UI icons, backgrounds). - `AnimatedSprite` for flipbook animations (techniques, VFX). - **`Container`** (from `scene/container/Container.mjs`) - Use a parent `Container` for grouping layers: - `backgroundContainer` - `characterContainer` - `uiContainer` - `vfxContainer` - **`TilingSprite`** (from `scene/sprite-tiling/TilingSprite.mjs`) - If you want to scroll/loop the `intro_bg_loop.png` or tile `dojang_floor_tex.png` seamlessly across a larger stage. - **`Loader`** (from `assets/loader/Loader.mjs`) - If you prefer the older PIXI.Loader API to Assets. Both are possible; `Assets` is recommended for newer Pixi versions. - **`Filter`** / **`BlurFilter`** / **`DisplacementFilter`** (from `filters/defaults/*`) - Useful for adding real-time blur afterimages (for `dodge`), screen shakes, or ripples when powering up Ki (`ki_charge`). --- ## 5. Directory Structure & Final Checklist Below is a **consolidated folder structure** showing where each of the above assets live. This is what your repo (or build pipeline) needs before you start coding the Pixi setup: ``` /assets β”œβ”€ characters/ β”‚ β”œβ”€ animations/ β”‚ β”‚ β”œβ”€ techniques/ β”‚ β”‚ β”‚ β”œβ”€ light/ β”‚ β”‚ β”‚ β”‚ β”œβ”€ strike_light_spritesheet.json β”‚ β”‚ β”‚ β”‚ └─ strike_light_spritesheet.png β”‚ β”‚ β”‚ β”œβ”€ medium/ β”‚ β”‚ β”‚ β”‚ β”œβ”€ strike_medium_spritesheet.json β”‚ β”‚ β”‚ β”‚ └─ strike_medium_spritesheet.png β”‚ β”‚ β”‚ β”œβ”€ heavy/ β”‚ β”‚ β”‚ β”‚ β”œβ”€ strike_heavy_spritesheet.json β”‚ β”‚ β”‚ β”‚ └─ strike_heavy_spritesheet.png β”‚ β”‚ β”‚ β”œβ”€ critical/ β”‚ β”‚ β”‚ β”‚ β”œβ”€ strike_critical_spritesheet.json β”‚ β”‚ β”‚ β”‚ └─ strike_critical_spritesheet.png β”‚ β”‚ β”‚ β”œβ”€ dodge/ β”‚ β”‚ β”‚ β”‚ β”œβ”€ dodge_spritesheet.json β”‚ β”‚ β”‚ β”‚ └─ dodge_spritesheet.png β”‚ β”‚ β”‚ β”œβ”€ block/ β”‚ β”‚ β”‚ β”‚ β”œβ”€ block_spritesheet.json β”‚ β”‚ β”‚ β”‚ └─ block_spritesheet.png β”‚ β”‚ β”‚ └─ hit/ β”‚ β”‚ β”‚ β”œβ”€ hit_reaction_spritesheet.json β”‚ β”‚ β”‚ └─ hit_reaction_spritesheet.png β”‚ β”‚ └─ finisher/ β”‚ β”‚ β”œβ”€ musa_finisher_spritesheet.json β”‚ β”‚ └─ musa_finisher_spritesheet.png β”‚ β”‚ β”œβ”€ amsalja_finisher_spritesheet.json β”‚ β”‚ └─ amsalja_finisher_spritesheet.png β”‚ β”‚ └─ … (one per archetype) β”‚ └─ portraits/ β”‚ β”œβ”€ portrait_musa.png β”‚ β”œβ”€ portrait_amsalja.png β”‚ └─ … (other archetypes) β”‚ β”œβ”€ fonts/ β”‚ β”œβ”€ BlackTrigram-Hangul.woff2 β”‚ β”œβ”€ NotoSansKR-Regular.woff2 β”‚ └─ Roboto-Regular.woff2 β”‚ β”œβ”€ i18n/ β”‚ β”œβ”€ ko.json β”‚ └─ en.json β”‚ β”œβ”€ props/ β”‚ β”œβ”€ training_console_model.png β”‚ β”œβ”€ stance_pad_circle.png β”‚ └─ dummy_target_overlay.svg β”‚ β”œβ”€ shaders/ β”‚ β”œβ”€ rim_light.shader β”‚ β”œβ”€ blood_decal.shader β”‚ └─ neon_flicker.shader β”‚ β”œβ”€ ui/ β”‚ β”œβ”€ buttons/ β”‚ β”‚ β”œβ”€ ui_button_start_idle.png β”‚ β”‚ └─ ui_button_start_hover.png β”‚ β”œβ”€ icons/ β”‚ β”‚ β”œβ”€ stances/ β”‚ β”‚ β”‚ β”œβ”€ icon_stance_defensive.svg β”‚ β”‚ β”‚ β”œβ”€ icon_stance_balanced.svg β”‚ β”‚ β”‚ └─ icon_stance_aggressive.svg β”‚ β”‚ β”œβ”€ trigrams/ β”‚ β”‚ β”‚ β”œβ”€ icon_trigram_1.svg β”‚ β”‚ β”‚ β”œβ”€ icon_trigram_2.svg β”‚ β”‚ β”‚ └─ … up to icon_trigram_8.svg β”‚ β”‚ └─ tooltip_arrow.png β”‚ └─ hud/ β”‚ β”œβ”€ hud_health_bar.png β”‚ └─ hud_pain_bar.png β”‚ β”œβ”€ vfx/ β”‚ β”œβ”€ animations/ β”‚ β”‚ β”œβ”€ anim_logo_pulse.json β”‚ β”‚ β”œβ”€ anim_menu_slide_0.png … anim_menu_slide_7.png β”‚ β”‚ β”œβ”€ anim_strike_impact_0.png … anim_strike_impact_15.png β”‚ β”‚ └─ anim_finisher_musa_0.png … anim_finisher_musa_11.png β”‚ β”œβ”€ particles/ β”‚ β”‚ β”œβ”€ vfx_dust_puff.png β”‚ β”‚ β”œβ”€ vfx_blood_splatter.png β”‚ β”‚ └─ confetti_sprites.png β”‚ └─ shaders/ β”‚ β”œβ”€ vfx_impact_ring.png β”‚ β”œβ”€ vfx_neon_glow.png β”‚ └─ vfx_critical_flash.png β”‚ β”œβ”€ visual/ β”‚ β”œβ”€ bg/ β”‚ β”‚ β”œβ”€ intro/ β”‚ β”‚ β”‚ β”œβ”€ intro_bg_loop.png β”‚ β”‚ β”‚ └─ mainmenu_foreground_overlay.png β”‚ β”‚ └─ dojang/ β”‚ β”‚ β”œβ”€ dojang_floor_tex.png β”‚ β”‚ └─ dojang_wall_tex.png β”‚ └─ overlays/ β”‚ β”œβ”€ vital_region_head.png β”‚ β”œβ”€ vital_region_neck.png β”‚ β”œβ”€ vital_region_torso.png β”‚ β”œβ”€ vital_region_arms.png β”‚ β”œβ”€ vital_region_chest.png β”‚ └─ vital_region_legs.png β”‚ └─ public/ └─ assets/ └─ audio/ β”œβ”€ music/ β”‚ β”œβ”€ intro_theme.webm β”‚ β”œβ”€ combat_theme.webm β”‚ β”œβ”€ combat_theme_geon.webm β”‚ β”œβ”€ training_theme.webm β”‚ β”œβ”€ meditation_theme.webm β”‚ β”œβ”€ victory_theme.webm β”‚ β”œβ”€ underground_rave_theme.webm β”‚ └─ ambient_loop.webm └─ sfx/ β”œβ”€ ambient/ β”‚ β”œβ”€ dojang_ambience.webm β”‚ β”œβ”€ wind_effect.webm β”‚ └─ dojo_crowd.webm β”œβ”€ attacks/ β”‚ β”œβ”€ attack_punch_light.webm β”‚ β”œβ”€ attack_punch_medium.webm β”‚ β”œβ”€ attack_kick_heavy.webm β”‚ β”œβ”€ attack_light.webm β”‚ β”œβ”€ attack_medium.webm β”‚ β”œβ”€ attack_critical.webm β”‚ β”œβ”€ attack_special_geon.webm β”‚ β”œβ”€ dodge.webm β”‚ β”œβ”€ block_success.webm β”‚ β”œβ”€ block_break.webm β”‚ └─ perfect_strike.webm β”œβ”€ hit/ β”‚ β”œβ”€ hit_light.webm β”‚ β”œβ”€ hit_medium.webm β”‚ β”œβ”€ hit_heavy.webm β”‚ β”œβ”€ hit_critical.webm β”‚ β”œβ”€ hit_flesh.webm β”‚ └─ hit_block.webm β”œβ”€ combo/ β”‚ β”œβ”€ combo_buildup.webm β”‚ β”œβ”€ combo_finish.webm β”‚ └─ energy_pulse.webm β”œβ”€ match/ β”‚ β”œβ”€ match_start.webm β”‚ β”œβ”€ countdown.webm β”‚ β”œβ”€ match_end.webm β”‚ β”œβ”€ victory.webm β”‚ └─ defeat.webm β”œβ”€ movement/ β”‚ β”œβ”€ footstep.webm β”‚ └─ stance_change.webm β”œβ”€ ki/ β”‚ β”œβ”€ ki_charge.webm β”‚ └─ ki_release.webm β”œβ”€ stamina/ β”‚ └─ stamina_depleted.webm β”œβ”€ health/ β”‚ └─ health_low.webm └─ ui/ β”œβ”€ menu_click.webm β”œβ”€ menu_navigate.webm β”œβ”€ menu_select.webm β”œβ”€ menu_hover.webm └─ menu_back.webm ``` --- ## 1. Backgrounds & Environments ### 1.1 Intro / Main Menu Background - **Asset Name:** `intro_bg_loop.png` - **Description:** A seamless 1920Γ—1080 loopable tile of a rain‐slicked concrete floor with neon pipes and drifting data‐line grid. - **File Format:** PNG (plus normal/roughness if you want subtle 3D lighting on flat sprites, but PNG is usually enough). - **Folder:** `assets/visual/bg/intro/` - **Visual Style Notes:** - Base color: Obsidian (`#0A0F12`) with subtle film‐grain overlay. - Neon accents: teal/cyan reflections on puddles, flickering Hangul glyphs on pipes. - Animation: small β€œrain drip” loop in shader or flipbook. - **Asset Name:** `mainmenu_foreground_overlay.png` - **Description:** A semi‐transparent obsidian vignette (20px β€œsoft edge”) to darken screen edges, helping text/logo pop. - **File Format:** PNG (alpha) - **Folder:** `assets/visual/overlays/` - **Usage:** Placed above `intro_bg_loop` to darken corners. ### 1.2 Dojang / Training Hall Background - **Asset Name:** `dojang_floor_tex.png` - **Description:** 2048Γ—2048 PBR‐style image of matte‐black tatami mats, with subtle water puddle normals (if you want dynamic reflections). - **File Format:** PNG (or PNG + normal/roughness if desired) - **Folder:** `assets/visual/bg/dojang/` - **Style Notes:** - Tileable so it can fill any resolution. - Slight neon cyan reflections at edges where wall meets floor. - **Asset Name:** `dojang_wall_tex.png` - **Description:** 1024Γ—1024 tile of corrugated metal with pipelines and emissive Hangul trigrams (☰, ☲, etc.) behind semi‐opaque panels. - **File Format:** PNG (with separate emissive mask channel if you plan to animate neon flicker). - **Folder:** `assets/visual/bg/dojang/` - **Style Notes:** - The emissive mask will let you β€œpulse” each trigram glyph via a simple shader or a flicker sprite. - **Asset Name:** `dojang_wall_neon_flicker.png` (optional flipbook) - **Description:** A small flipbook (e.g. 4 frames at 256Γ—256) showing a neon glyph flicker (cycle through 0%, 50%, 100% brightness). - **File Format:** PNG sprite sheet - **Folder:** `assets/vfx/animations/` - **Asset Name:** `training_console_model.png` - **Description:** 512Γ—512 stylized grayscale sprite of a holo‐console (flat sprite) with cyan emissive accents (for real‐time data display). - **File Format:** PNG - **Folder:** `assets/visual/props/` - **Notes:** Use this as a static background element; you can overlay bitmaps of gauge bars, or simply let the console glow. - **Asset Name:** `stance_pad_circle.png` - **Description:** 256Γ—256 semi‐transparent PNG of a glowing floor circle. Pulses from 0 β†’ 100% opacity in a 1s loop. - **File Format:** PNG (alpha) - **Folder:** `assets/visual/props/` --- ## 2. UI Icons & HUD Elements ### 2.1 Stance Icons Each icon is a 64Γ—64 px SVG (so it scales crisply). We’ll load them as textures in Pixi and tint/animate as needed. 1. **`icon_stance_defensive.svg`** - Outline style in Slate Gray (`#2E3538`) when inactive. - Filled with Teal Neon (`#00FFC8`) + soft glow when active. 2. **`icon_stance_balanced.svg`** - Outline in Slate Gray; filled with Teal Neon on hover/active. 3. **`icon_stance_aggressive.svg`** - Outline in Slate Gray; filled with Crimson (`#FF0044`) on β€œcharged” or β€œready” state, or Teal Neon when selected. **Folder:** `assets/ui/icons/stances/` ### 2.2 Trigram Icons - **File Names:** ``` icon_trigram_1.svg icon_trigram_2.svg … icon_trigram_8.svg ``` - **Each icon:** 48Γ—48 px, dark background (Gunmetal `#424A50`) with the trigram glyph in Teal Neon. - **States:** - Inactive: no glow, just basic fill. - Active: slight outer glow + subtle 1.1Γ— scale β€œpulse.” - Hover: 1.05Γ— scale + quick glow (0.2 s). **Folder:** `assets/ui/icons/trigrams/` ### 2.3 HUD Bars & Overlays - **`hud_health_bar.png`** (800Γ—32 px PNG) - 10 segmented blocks. Each filled segment is Cyan Glow (`#1BE7FF`); empty is Slate Gray. - **Folder:** `assets/ui/hud/` - **`hud_pain_bar.png`** (800Γ—16 px PNG) - 10 segments. Filled segments are Crimson (`#FF0044`); empty Slate Gray. - **Folder:** `assets/ui/hud/` - **`ui_button_start_idle.png` & `ui_button_start_hover.png`** (256Γ—64 px each) - Idle: Slate Gray panel with β€œβ–Ά Start Combat” in Hangul+English. - Hover: Underline in Teal Neon + icon (β€œβ–Άβ€) glows. - **Folder:** `assets/ui/buttons/` - **`ui_panel_slate.png`** (1024Γ—512 px) - A semi-opaque Slate Gray panel (70% opacity) with a subtle noise texture. - **Folder:** `assets/ui/panels/` - **`tooltip_arrow.png`** (32Γ—32 px PNG) - Small triangle arrow in Cyan Glow for tooltips. - **Folder:** `assets/ui/tooltips/` --- ## 3. Technique Animations (AnimatedSprite Sprite Sheets) Any time you see code like: ```js await Assets.load("path/to/spritesheet.json"); const frames = []; for (let i = 0; i < N; i++) { frames.push(Texture.from(`frame${i}.png`)); } const anim = new AnimatedSprite(frames); ``` …you need a **sprite sheet JSON** + **corresponding PNG atlas** for each β€œtechnique.” Below is a minimal required set of technique animations: ### 3.1 Light Strike Animation (All Archetypes) - **Sprite Sheet JSON:** `strike_light_spritesheet.json` - **Texture Atlas:** `strike_light_spritesheet.png` (e.g., 512Γ—512 containing all 6 frames laid out in a grid). - **Frame Count:** 6 frames, each \~128Γ—256 (portrait orientation). - **Animation Speed:** 0.6 (adjust per archetype). - **Visual Content:** Character winds up β†’ quick punch/kick β†’ recoil. No background in atlas (transparent). - **Folder:** `assets/characters/animations/techniques/light/` ### 3.2 Medium Strike Animation - **Sprite Sheet JSON:** `strike_medium_spritesheet.json` - **Texture Atlas:** `strike_medium_spritesheet.png` (6–8 frames, \~128Γ—256 each). - **Description:** More wind-up, more impact frames, a small dust puff frame integrated (see VFX). - **Folder:** `assets/characters/animations/techniques/medium/` ### 3.3 Heavy Strike Animation - **Sprite Sheet JSON:** `strike_heavy_spritesheet.json` - **Texture Atlas:** `strike_heavy_spritesheet.png` (8 frames, \~256Γ—256 each). - **Description:** Big wind-up, slow-mo pause on impact, splash of embedded VFX dust/blood. - **Folder:** `assets/characters/animations/techniques/heavy/` ### 3.4 Critical Strike / Finisher Animation - **Sprite Sheet JSON:** `strike_critical_spritesheet.json` - **Texture Atlas:** `strike_critical_spritesheet.png` (10–12 frames, \~256Γ—256). - **Description:** Slow-mo bone-breaking blow β†’ flash frame β†’ slowdown. - **Folder:** `assets/characters/animations/techniques/critical/` ### 3.5 Dodge / Evade Animation - **Sprite Sheet JSON:** `dodge_spritesheet.json` - **Texture Atlas:** `dodge_spritesheet.png` (4–6 frames, \~128Γ—256). - **Description:** Quick sidestep/backflip frames, subtle afterimage. - **Folder:** `assets/characters/animations/techniques/dodge/` ### 3.6 Block / Parry Animation - **Sprite Sheet JSON:** `block_spritesheet.json` - **Texture Atlas:** `block_spritesheet.png` (5 frames, \~128Γ—256). - **Description:** Character raises arm/weapon to block β†’ recoil if successful. - **Folder:** `assets/characters/animations/techniques/block/` ### 3.7 Hit Reaction Animation - **Sprite Sheet JSON:** `hit_reaction_spritesheet.json` - **Texture Atlas:** `hit_reaction_spritesheet.png` (4 frames, \~128Γ—256). - **Description:** Character flinches backwards, tinted red on final frame. - **Folder:** `assets/characters/animations/techniques/hit/` ### 3.8 Finisher Sequence (All Archetypes) - **Sprite Sheet JSON:** `finisher_musa_spritesheet.json`, `finisher_amsalja_spritesheet.json`, etc. - **Texture Atlas:** `finisher_musa_spritesheet.png` (12 frames, \~256Γ—256), etc. - **Description:** A multi-stage β€œcinematic” finisher (pause β†’ bone crushing β†’ slow fade). - **Folder:** `assets/characters/animations/finisher/` --- ## 4. Pixi.js Dependencies & Modules Needed Below is a minimal list of **Pixi.js modules** (from `pixi.js/lib`) that you will rely on to load, animate, and render everything above. In your `package.json`, you’ve already installed `pixi.js`. At runtime, you’ll import exactly the pieces you use: ```ts import { Application, TickerPlugin, // core ticker ResizePlugin, // auto resizes to window Assets, // for loading JSON/PNG atlases Texture, Sprite, AnimatedSprite, Container, TilingSprite, // if you want parallax/tiled backgrounds Loader, // older API if you prefer Loader instead of Assets } from "pixi.js"; ``` - **`Application`** (from `app/Application.mjs`) - Creates the Pixi canvas, WebGL context, stage, etc. - **`TickerPlugin`** & **`ResizePlugin`** - Ensures your app’s ticker (main game loop) and auto-resize functionality. - **`Assets`** (from `assets/Assets.mjs`) - The new recommended loader for JSON sprite sheets, PNGs, audio, etc. - Example: ```ts await Assets.load( "assets/characters/animations/techniques/light/strike_light_spritesheet.json" ); ``` - **`Texture`** (from `rendering/texture/Texture.mjs`) - Create textures from loaded assets: ```ts const frameTex = Texture.from("strike_light_000.png"); ``` - **`Sprite`** & **`AnimatedSprite`** (from `scene/sprite/Sprite.mjs` & `scene/sprite-animated/AnimatedSprite.mjs`) - `Sprite` for static images (UI icons, backgrounds). - `AnimatedSprite` for flipbook animations (techniques, VFX). - **`Container`** (from `scene/container/Container.mjs`) - Use a parent `Container` for grouping layers: - `backgroundContainer` - `characterContainer` - `uiContainer` - `vfxContainer` - **`TilingSprite`** (from `scene/sprite-tiling/TilingSprite.mjs`) - If you want to scroll/loop the `intro_bg_loop.png` or tile `dojang_floor_tex.png` seamlessly across a larger stage. - **`Loader`** (from `assets/loader/Loader.mjs`) - If you prefer the older PIXI.Loader API to Assets. Both are possible; `Assets` is recommended for newer Pixi versions. - **`Filter`** / **`BlurFilter`** / **`DisplacementFilter`** (from `filters/defaults/*`) - Useful for adding real-time blur afterimages (for `dodge`), screen shakes, or ripples when powering up Ki (`ki_charge`). --- ## 5. Directory Structure & Final Checklist Below is a **consolidated folder structure** showing where each of the above assets live. This is what your repo (or build pipeline) needs before you start coding the Pixi setup: ``` /assets β”œβ”€ characters/ β”‚ β”œβ”€ animations/ β”‚ β”‚ β”œβ”€ techniques/ β”‚ β”‚ β”‚ β”œβ”€ light/ β”‚ β”‚ β”‚ β”‚ β”œβ”€ strike_light_spritesheet.json β”‚ β”‚ β”‚ β”‚ └─ strike_light_spritesheet.png β”‚ β”‚ β”‚ β”œβ”€ medium/ β”‚ β”‚ β”‚ β”‚ β”œβ”€ strike_medium_spritesheet.json β”‚ β”‚ β”‚ β”‚ └─ strike_medium_spritesheet.png β”‚ β”‚ β”‚ β”œβ”€ heavy/ β”‚ β”‚ β”‚ β”‚ β”œβ”€ strike_heavy_spritesheet.json β”‚ β”‚ β”‚ β”‚ └─ strike_heavy_spritesheet.png β”‚ β”‚ β”‚ β”œβ”€ critical/ β”‚ β”‚ β”‚ β”‚ β”œβ”€ strike_critical_spritesheet.json β”‚ β”‚ β”‚ β”‚ └─ strike_critical_spritesheet.png β”‚ β”‚ β”‚ β”œβ”€ dodge/ β”‚ β”‚ β”‚ β”‚ β”‚ β”‚ β”œβ”€ dodge_spritesheet.json β”‚ β”‚ β”‚ β”‚ └─ dodge_spritesheet.png β”‚ β”‚ β”‚ β”œβ”€ block/ β”‚ β”‚ β”‚ β”‚ β”œβ”€ block_spritesheet.json β”‚ β”‚ β”‚ β”‚ └─ block_spritesheet.png β”‚ β”‚ β”‚ └─ hit/ β”‚ β”‚ β”‚ β”œβ”€ hit_reaction_spritesheet.json β”‚ β”‚ β”‚ └─ hit_reaction_spritesheet.png β”‚ β”‚ └─ finisher/ β”‚ β”‚ β”œβ”€ musa_finisher_spritesheet.json β”‚ β”‚ └─ musa_finisher_spritesheet.png β”‚ β”‚ β”œβ”€ amsalja_finisher_spritesheet.json β”‚ β”‚ └─ amsalja_finisher_spritesheet.png β”‚ β”‚ └─ … (one per archetype) β”‚ └─ portraits/ β”‚ β”œβ”€ portrait_musa.png β”‚ β”œβ”€ portrait_amsalja.png β”‚ └─ … (other archetypes) β”‚ β”œβ”€ fonts/ β”‚ β”œβ”€ BlackTrigram-Hangul.woff2 β”‚ β”œβ”€ NotoSansKR-Regular.woff2 β”‚ └─ Roboto-Regular.woff2 β”‚ β”œβ”€ i18n/ β”‚ β”œβ”€ ko.json β”‚ └─ en.json β”‚ β”œβ”€ props/ β”‚ β”œβ”€ training_console_model.png β”‚ β”œβ”€ stance_pad_circle.png β”‚ └─ dummy_target_overlay.svg β”‚ β”œβ”€ shaders/ β”‚ β”œβ”€ rim_light.shader β”‚ β”œβ”€ blood_decal.shader β”‚ └─ neon_flicker.shader β”‚ β”œβ”€ ui/ β”‚ β”œβ”€ buttons/ β”‚ β”‚ β”œβ”€ ui_button_start_idle.png β”‚ β”‚ └─ ui_button_start_hover.png β”‚ β”œβ”€ icons/ β”‚ β”‚ β”œβ”€ stances/ β”‚ β”‚ β”‚ β”œβ”€ icon_stance_defensive.svg β”‚ β”‚ β”‚ β”œβ”€ icon_stance_balanced.svg β”‚ β”‚ β”‚ └─ icon_stance_aggressive.svg β”‚ β”‚ β”œβ”€ trigrams/ β”‚ β”‚ β”‚ β”œβ”€ icon_trigram_1.svg β”‚ β”‚ β”‚ β”œβ”€ icon_trigram_2.svg β”‚ β”‚ β”‚ └─ … up to icon_trigram_8.svg β”‚ β”‚ └─ tooltip_arrow.png β”‚ └─ hud/ β”‚ β”œβ”€ hud_health_bar.png β”‚ └─ hud_pain_bar.png β”‚ β”œβ”€ vfx/ β”‚ β”œβ”€ animations/ β”‚ β”‚ β”œβ”€ anim_logo_pulse.json β”‚ β”‚ β”œβ”€ anim_menu_slide_0.png … anim_menu_slide_7.png β”‚ β”‚ β”œβ”€ anim_strike_impact_0.png … anim_strike_impact_15.png β”‚ β”‚ └─ anim_finisher_musa_0.png … anim_finisher_musa_11.png β”‚ β”œβ”€ particles/ β”‚ β”‚ β”œβ”€ vfx_dust_puff.png β”‚ β”‚ β”œβ”€ vfx_blood_splatter.png β”‚ β”‚ └─ confetti_sprites.png β”‚ └─ shaders/ β”‚ β”œβ”€ vfx_impact_ring.png β”‚ β”œβ”€ vfx_neon_glow.png β”‚ └─ vfx_critical_flash.png β”‚ β”œβ”€ visual/ β”‚ β”œβ”€ bg/ β”‚ β”‚ β”œβ”€ intro/ β”‚ β”‚ β”‚ β”œβ”€ intro_bg_loop.png β”‚ β”‚ β”‚ └─ mainmenu_foreground_overlay.png β”‚ β”‚ └─ dojang/ β”‚ β”‚ β”œβ”€ dojang_floor_tex.png β”‚ β”‚ └─ dojang_wall_tex.png β”‚ └─ overlays/ β”‚ β”œβ”€ vital_region_head.png β”‚ β”œβ”€ vital_region_neck.png β”‚ β”œβ”€ vital_region_torso.png β”‚ β”œβ”€ vital_region_arms.png β”‚ β”œβ”€ vital_region_chest.png β”‚ └─ vital_region_legs.png β”‚ └─ public/ └─ assets/ └─ audio/ β”œβ”€ music/ β”‚ β”œβ”€ intro_theme.webm β”‚ β”œβ”€ combat_theme.webm β”‚ β”œβ”€ combat_theme_geon.webm β”‚ β”œβ”€ training_theme.webm β”‚ β”œβ”€ meditation_theme.webm β”‚ β”œβ”€ victory_theme.webm β”‚ β”œβ”€ underground_rave_theme.webm β”‚ └─ ambient_loop.webm └─ sfx/ β”œβ”€ ambient/ β”‚ β”œβ”€ dojang_ambience.webm β”‚ β”œβ”€ wind_effect.webm β”‚ └─ dojo_crowd.webm β”œβ”€ attacks/ β”‚ β”œβ”€ attack_punch_light.webm β”‚ β”œβ”€ attack_punch_medium.webm β”‚ β”œβ”€ attack_kick_heavy.webm β”‚ β”œβ”€ attack_light.webm β”‚ β”œβ”€ attack_medium.webm β”‚ β”œβ”€ attack_critical.webm β”‚ β”œβ”€ attack_special_geon.webm β”‚ β”œβ”€ dodge.webm β”‚ β”œβ”€ block_success.webm β”‚ β”œβ”€ block_break.webm β”‚ └─ perfect_strike.webm β”œβ”€ hit/ β”‚ β”œβ”€ hit_light.webm β”‚ β”œβ”€ hit_medium.webm β”‚ β”œβ”€ hit_heavy.webm β”‚ β”œβ”€ hit_critical.webm β”‚ β”œβ”€ hit_flesh.webm β”‚ └─ hit_block.webm β”œβ”€ combo/ β”‚ β”œβ”€ combo_buildup.webm β”‚ β”œβ”€ combo_finish.webm β”‚ └─ energy_pulse.webm β”œβ”€ match/ β”‚ β”œβ”€ match_start.webm β”‚ β”œβ”€ countdown.webm β”‚ β”œβ”€ match_end.webm β”‚ β”œβ”€ victory.webm β”‚ └─ defeat.webm β”œβ”€ movement/ β”‚ β”œβ”€ footstep.webm β”‚ └─ stance_change.webm β”œβ”€ ki/ β”‚ β”œβ”€ ki_charge.webm β”‚ └─ ki_release.webm β”œβ”€ stamina/ β”‚ └─ stamina_depleted.webm β”œβ”€ health/ β”‚ └─ health_low.webm └─ ui/ β”œβ”€ menu_click.webm β”œβ”€ menu_navigate.webm β”œβ”€ menu_select.webm β”œβ”€ menu_hover.webm └─ menu_back.webm ``` --- ## 1. Backgrounds & Environments ### 1.1 Intro / Main Menu Background - **Asset Name:** `intro_bg_loop.png` - **Description:** A seamless 1920Γ—1080 loopable tile of a rain‐slicked concrete floor with neon pipes and drifting data‐line grid. - **File Format:** PNG (plus normal/roughness if you want subtle 3D lighting on flat sprites, but PNG is usually enough). - **Folder:** `assets/visual/bg/intro/` - **Visual Style Notes:** - Base color: Obsidian (`#0A0F12`) with subtle film‐grain overlay. - Neon accents: teal/cyan reflections on puddles, flickering Hangul glyphs on pipes. - Animation: small β€œrain drip” loop in shader or flipbook. - **Asset Name:** `mainmenu_foreground_overlay.png` - **Description:** A semi‐transparent obsidian vignette (20px β€œsoft edge”) to darken screen edges, helping text/logo pop. - **File Format:** PNG (alpha) - **Folder:** `assets/visual/overlays/` - **Usage:** Placed above `intro_bg_loop` to darken corners. ### 1.2 Dojang / Training Hall Background - **Asset Name:** `dojang_floor_tex.png` - **Description:** 2048Γ—2048 PBR‐style image of matte‐black tatami mats, with subtle water puddle normals (if you want dynamic reflections). - **File Format:** PNG (or PNG + normal/roughness if desired) - **Folder:** `assets/visual/bg/dojang/` - **Style Notes:** - Tileable so it can fill any resolution. - Slight neon cyan reflections at edges where wall meets floor. - **Asset Name:** `dojang_wall_tex.png` - **Description:** 1024Γ—1024 tile of corrugated metal with pipelines and emissive Hangul trigrams (☰, ☲, etc.) behind semi‐opaque panels. - **File Format:** PNG (with separate emissive mask channel if you plan to animate neon flicker). - **Folder:** `assets/visual/bg/dojang/` - **Style Notes:** - The emissive mask will let you β€œpulse” each trigram glyph via a simple shader or a flicker sprite. - **Asset Name:** `dojang_wall_neon_flicker.png` (optional flipbook) - **Description:** A small flipbook (e.g. 4 frames at 256Γ—256) showing a neon glyph flicker (cycle through 0%, 50%, 100% brightness). - **File Format:** PNG sprite sheet - **Folder:** `assets/vfx/animations/` - **Asset Name:** `training_console_model.png` - **Description:** 512Γ—512 stylized grayscale sprite of a holo‐console (flat sprite) with cyan emissive accents (for real‐time data display). - **File Format:** PNG - **Folder:** `assets/visual/props/` - **Notes:** Use this as a static background element; you can overlay bitmaps of gauge bars, or simply let the console glow. - **Asset Name:** `stance_pad_circle.png` - **Description:** 256Γ—256 semi‐transparent PNG of a glowing floor circle. Pulses from 0 β†’ 100% opacity in a 1s loop. - **File Format:** PNG (alpha) - **Folder:** `assets/visual/props/` --- ## 2. UI Icons & HUD Elements ### 2.1 Stance Icons Each icon is a 64Γ—64 px SVG (so it scales crisply). We’ll load them as textures in Pixi and tint/animate as needed. 1. **`icon_stance_defensive.svg`** - Outline style in Slate Gray (`#2E3538`) when inactive. - Filled with Teal Neon (`#00FFC8`) + soft glow when active. 2. **`icon_stance_balanced.svg`** - Outline in Slate Gray; filled with Teal Neon on hover/active. 3. **`icon_stance_aggressive.svg`** - Outline in Slate Gray; filled with Crimson (`#FF0044`) on β€œcharged” or β€œready” state, or Teal Neon when selected. **Folder:** `assets/ui/icons/stances/` ### 2.2 Trigram Icons - **File Names:** ``` icon_trigram_1.svg icon_trigram_2.svg … icon_trigram_8.svg ``` - **Each icon:** 48Γ—48 px, dark background (Gunmetal `#424A50`) with the trigram glyph in Teal Neon. - **States:** - Inactive: no glow, just basic fill. - Active: slight outer glow + subtle 1.1Γ— scale β€œpulse.” - Hover: 1.05Γ— scale + quick glow (0.2 s). **Folder:** `assets/ui/icons/trigrams/` ### 2.3 HUD Bars & Overlays - **`hud_health_bar.png`** (800Γ—32 px PNG) - 10 segmented blocks. Each filled segment is Cyan Glow (`#1BE7FF`); empty is Slate Gray. - **Folder:** `assets/ui/hud/` - **`hud_pain_bar.png`** (800Γ—16 px PNG) - 10 segments. Filled segments are Crimson (`#FF0044`); empty Slate Gray. - **Folder:** `assets/ui/hud/` - **`ui_button_start_idle.png` & `ui_button_start_hover.png`** (256Γ—64 px each) - Idle: Slate Gray panel with β€œβ–Ά Start Combat” in Hangul+English. - Hover: Underline in Teal Neon + icon (β€œβ–Άβ€) glows. - **Folder:** `assets/ui/buttons/` - **`ui_panel_slate.png`** (1024Γ—512 px) - A semi-opaque Slate Gray panel (70% opacity) with a subtle noise texture. - **Folder:** `assets/ui/panels/` - **`tooltip_arrow.png`** (32Γ—32 px PNG) - Small triangle arrow in Cyan Glow for tooltips. - **Folder:** `assets/ui/tooltips/` --- ## 3. Technique Animations (AnimatedSprite Sprite Sheets) Any time you see code like: ```js await Assets.load("path/to/spritesheet.json"); const frames = []; for (let i = 0; i < N; i++) { frames.push(Texture.from(`frame${i}.png`)); } const anim = new AnimatedSprite(frames); ``` …you need a **sprite sheet JSON** + **corresponding PNG atlas** for each β€œtechnique.” Below is a minimal required set of technique animations: ### 3.1 Light Strike Animation (All Archetypes) - **Sprite Sheet JSON:** `strike_light_spritesheet.json` - **Texture Atlas:** `strike_light_spritesheet.png` (e.g., 512Γ—512 containing all 6 frames laid out in a grid). - **Frame Count:** 6 frames, each \~128Γ—256 (portrait orientation). - **Animation Speed:** 0.6 (adjust per archetype). - **Visual Content:** Character winds up β†’ quick punch/kick β†’ recoil. No background in atlas (transparent). - **Folder:** `assets/characters/animations/techniques/light/` ### 3.2 Medium Strike Animation - **Sprite Sheet JSON:** `strike_medium_spritesheet.json` - **Texture Atlas:** `strike_medium_spritesheet.png` (6–8 frames, \~128Γ—256 each). - **Description:** More wind-up, more impact frames, a small dust puff frame integrated (see VFX). - **Folder:** `assets/characters/animations/techniques/medium/` ### 3.3 Heavy Strike Animation - **Sprite Sheet JSON:** `strike_heavy_spritesheet.json` - **Texture Atlas:** `strike_heavy_spritesheet.png` (8 frames, \~256Γ—256 each). - **Description:** Big wind-up, slow-mo pause on impact, splash of embedded VFX dust/blood. - **Folder:** `assets/characters/animations/techniques/heavy/` ### 3.4 Critical Strike / Finisher Animation - **Sprite Sheet JSON:** `strike_critical_spritesheet.json` - **Texture Atlas:** `strike_critical_spritesheet.png` (10–12 frames, \~256Γ—256). - **Description:** Slow-mo bone-breaking blow β†’ flash frame β†’ slowdown. - **Folder:** `assets/characters/animations/techniques/critical/` ### 3.5 Dodge / Evade Animation - **Sprite Sheet JSON:** `dodge_spritesheet.json` - **Texture Atlas:** `dodge_spritesheet.png` (4–6 frames, \~128Γ—256). - **Description:** Quick sidestep/backflip frames, subtle afterimage. - **Folder:** `assets/characters/animations/techniques/dodge/` ### 3.6 Block / Parry Animation - **Sprite Sheet JSON:** `block_spritesheet.json` - **Texture Atlas:** `block_spritesheet.png` (5 frames, \~128Γ—256). - **Description:** Character raises arm/weapon to block β†’ recoil if successful. - **Folder:** `assets/characters/animations/techniques/block/` ### 3.7 Hit Reaction Animation - **Sprite Sheet JSON:** `hit_reaction_spritesheet.json` - **Texture Atlas:** `hit_reaction_spritesheet.png` (4 frames, \~128Γ—256). - **Description:** Character flinches backwards, tinted red on final frame. - **Folder:** `assets/characters/animations/techniques/hit/` ### 3.8 Finisher Sequence (All Archetypes) - **Sprite Sheet JSON:** `finisher_musa_spritesheet.json`, `finisher_amsalja_spritesheet.json`, etc. - **Texture Atlas:** `finisher_musa_spritesheet.png` (12 frames, \~256Γ—256), etc. - **Description:** A multi-stage β€œcinematic” finisher (pause β†’ bone crushing β†’ slow fade). - **Folder:** `assets/characters/animations/finisher/` --- ## 4. Pixi.js Dependencies & Modules Needed Below is a minimal list of **Pixi.js modules** (from `pixi.js/lib`) that you will rely on to load, animate, and render everything above. In your `package.json`, you’ve already installed `pixi.js`. At runtime, you’ll import exactly the pieces you use: ```ts import { Application, TickerPlugin, // core ticker ResizePlugin, // auto resizes to window Assets, // for loading JSON/PNG atlases Texture, Sprite, AnimatedSprite, Container, TilingSprite, // if you want parallax/tiled backgrounds Loader, // older API if you prefer Loader instead of Assets } from "pixi.js"; ``` - **`Application`** (from `app/Application.mjs`) - Creates the Pixi canvas, WebGL context, stage, etc. - **`TickerPlugin`** & **`ResizePlugin`** - Ensures your app’s ticker (main game loop) and auto-resize functionality. - **`Assets`** (from `assets/Assets.mjs`) - The new recommended loader for JSON sprite sheets, PNGs, audio, etc. - Example: ```ts await Assets.load( "assets/characters/animations/techniques/light/strike_light_spritesheet.json" ); ``` - **`Texture`** (from `rendering/texture/Texture.mjs`) - Create textures from loaded assets: ```ts const frameTex = Texture.from("strike_light_000.png"); ``` - **`Sprite`** & **`AnimatedSprite`** (from `scene/sprite/Sprite.mjs` & `scene/sprite-animated/AnimatedSprite.mjs`) - `Sprite` for static images (UI icons, backgrounds). - `AnimatedSprite` for flipbook animations (techniques, VFX). - **`Container`** (from `scene/container/Container.mjs`) - Use a parent `Container` for grouping layers: - `backgroundContainer` - `characterContainer` - `uiContainer` - `vfxContainer` - **`TilingSprite`** (from `scene/sprite-tiling/TilingSprite.mjs`) - If you want to scroll/loop the `intro_bg_loop.png` or tile `dojang_floor_tex.png` seamlessly across a larger stage. - **`Loader`** (from `assets/loader/Loader.mjs`) - If you prefer the older PIXI.Loader API to Assets. Both are possible; `Assets` is recommended for newer Pixi versions. - **`Filter`** / **`BlurFilter`** / **`DisplacementFilter`** (from `filters/defaults/*`) - Useful for adding real-time blur afterimages (for `dodge`), screen shakes, or ripples when powering up Ki (`ki_charge`). --- ## 5. Directory Structure & Final Checklist Below is a **consolidated folder structure** showing where each of the above assets live. This is what your repo (or build pipeline) needs before you start coding the Pixi setup: ``` /assets β”œβ”€ characters/ β”‚ β”œβ”€ animations/ β”‚ β”‚ β”œβ”€ techniques/ β”‚ β”‚ β”‚ β”œβ”€ light/ β”‚ β”‚ β”‚ β”‚ β”œβ”€ strike_light_spritesheet.json β”‚ β”‚ β”‚ β”‚ └─ strike_light_spritesheet.png β”‚ β”‚ β”‚ β”œβ”€ medium/ β”‚ β”‚ β”‚ β”‚ β”œβ”€ strike_medium_spritesheet.json β”‚ β”‚ β”‚ β”‚ └─ strike_medium_spritesheet.png β”‚ β”‚ β”‚ β”œβ”€ heavy/ β”‚ β”‚ β”‚ β”‚ β”œβ”€ strike_heavy_spritesheet.json β”‚ β”‚ β”‚ β”‚ └─ strike_heavy_spritesheet.png β”‚ β”‚ β”‚ β”œβ”€ critical/ β”‚ β”‚ β”‚ β”‚ β”œβ”€ strike_critical_spritesheet.json β”‚ β”‚ β”‚ β”‚ └─ strike_critical_spritesheet.png β”‚ β”‚ β”‚ β”œβ”€ dodge/ β”‚ β”‚ β”‚ β”‚ β”œβ”€ dodge_spritesheet.json β”‚ β”‚ β”‚ β”‚ └─ dodge_spritesheet.png β”‚ β”‚ β”‚ β”œβ”€ block/ β”‚ β”‚ β”‚ β”‚ β”œβ”€ block_spritesheet.json β”‚ β”‚ β”‚ β”‚ └─ block_spritesheet.png β”‚ β”‚ β”‚ └─ hit/ β”‚ β”‚ β”‚ β”œβ”€ hit_reaction_spritesheet.json β”‚ β”‚ β”‚ └─ hit_reaction_spritesheet.png β”‚ β”‚ └─ finisher/ β”‚ β”‚ β”œβ”€ musa_finisher_spritesheet.json β”‚ β”‚ └─ musa_finisher_spritesheet.png β”‚ β”‚ β”œβ”€ amsalja_finisher_spritesheet.json β”‚ β”‚ └─ amsalja_finisher_spritesheet.png β”‚ β”‚ └─ … (one per archetype) β”‚ └─ portraits/ β”‚ β”œβ”€ portrait_musa.png β”‚ β”œβ”€ portrait_amsalja.png β”‚ └─ … (other archetypes) β”‚ β”œβ”€ fonts/ β”‚ β”œβ”€ BlackTrigram-Hangul.woff2 β”‚ β”œβ”€ NotoSansKR-Regular.woff2 β”‚ └─ Roboto-Regular.woff2 β”‚ β”œβ”€ i18n/ β”‚ β”œβ”€ ko.json β”‚ └─ en.json β”‚ β”œβ”€ props/ β”‚ β”œβ”€ training_console_model.png β”‚ β”œβ”€ stance_pad_circle.png β”‚ └─ dummy_target_overlay.svg β”‚ β”œβ”€ shaders/ β”‚ β”œβ”€ rim_light.shader β”‚ β”œβ”€ blood_decal.shader β”‚ └─ neon_flicker.shader β”‚ β”œβ”€ ui/ β”‚ β”œβ”€ buttons/ β”‚ β”‚ β”œβ”€ ui_button_start_idle.png β”‚ β”‚ └─ ui_button_start_hover.png β”‚ β”œβ”€ icons/ β”‚ β”‚ β”œβ”€ stances/ β”‚ β”‚ β”‚ β”œβ”€ icon_stance_defensive.svg β”‚ β”‚ β”‚ β”œβ”€ icon_stance_balanced.svg β”‚ β”‚ β”‚ └─ icon_stance_aggressive.svg β”‚ β”‚ β”œβ”€ trigrams/ β”‚ β”‚ β”‚ β”œβ”€ icon_trigram_1.svg β”‚ β”‚ β”‚ β”œβ”€ icon_trigram_2.svg β”‚ β”‚ β”‚ └─ … up to icon_trigram_8.svg β”‚ β”‚ └─ tooltip_arrow.png β”‚ └─ hud/ β”‚ β”œβ”€ hud_health_bar.png β”‚ └─ hud_pain_bar.png β”‚ β”œβ”€ vfx/ β”‚ β”œβ”€ animations/ β”‚ β”‚ β”œβ”€ anim_logo_pulse.json β”‚ β”‚ β”œβ”€ anim_menu_slide_0.png … anim_menu_slide_7.png β”‚ β”‚ β”œβ”€ anim_strike_impact_0.png … anim_strike_impact_15.png β”‚ β”‚ └─ anim_finisher_musa_0.png … anim_finisher_musa_11.png β”‚ β”œβ”€ particles/ β”‚ β”‚ β”œβ”€ vfx_dust_puff.png β”‚ β”‚ β”œβ”€ vfx_blood_splatter.png β”‚ β”‚ └─ confetti_sprites.png β”‚ └─ shaders/ β”‚ β”œβ”€ vfx_impact_ring.png β”‚ β”œβ”€ vfx_neon_glow.png β”‚ └─ vfx_critical_flash.png β”‚ β”œβ”€ visual/ β”‚ β”œβ”€ bg/ β”‚ β”‚ β”œβ”€ intro/ β”‚ β”‚ β”‚ β”œβ”€ intro_bg_loop.png β”‚ β”‚ β”‚ └─ mainmenu_foreground_overlay.png β”‚ β”‚ └─ dojang/ β”‚ β”‚ β”œβ”€ dojang_floor_tex.png β”‚ β”‚ └─ dojang_wall_tex.png β”‚ └─ overlays/ β”‚ β”œβ”€ vital_region_head.png β”‚ β”œβ”€ vital_region_neck.png β”‚ β”œβ”€ vital_region_torso.png β”‚ β”œβ”€ vital_region_arms.png β”‚ β”œβ”€ vital_region_chest.png β”‚ └─ vital_region_legs.png β”‚ └─ public/ └─ assets/ └─ audio/ β”œβ”€ music/ β”‚ β”œβ”€ intro_theme.webm β”‚ β”œβ”€ combat_theme.webm β”‚ β”œβ”€ combat_theme_geon.webm β”‚ β”œβ”€ training_theme.webm β”‚ β”œβ”€ meditation_theme.webm β”‚ β”œβ”€ victory_theme.webm β”‚ β”œβ”€ underground_rave_theme.webm β”‚ └─ ambient_loop.webm └─ sfx/ β”œβ”€ ambient/ β”‚ β”œβ”€ dojang_ambience.webm β”‚ β”œβ”€ wind_effect.webm β”‚ └─ dojo_crowd.webm β”œβ”€ attacks/ β”‚ β”œβ”€ attack_punch_light.webm β”‚ β”œβ”€ attack_punch_medium.webm β”‚ β”œβ”€ attack_kick_heavy.webm β”‚ β”œβ”€ attack_light.webm β”‚ β”œβ”€ attack_medium.webm β”‚ β”œβ”€ attack_critical.webm β”‚ β”œβ”€ attack_special_geon.webm β”‚ β”œβ”€ dodge.webm β”‚ β”œβ”€ block_success.webm β”‚ β”œβ”€ block_break.webm β”‚ └─ perfect_strike.webm β”œβ”€ hit/ β”‚ β”œβ”€ hit_light.webm β”‚ β”œβ”€ hit_medium.webm β”‚ β”œβ”€ hit_heavy.webm β”‚ β”œβ”€ hit_critical.webm β”‚ β”œβ”€ hit_flesh.webm β”‚ └─ hit_block.webm β”œβ”€ combo/ β”‚ β”œβ”€ combo_buildup.webm β”‚ β”œβ”€ combo_finish.webm β”‚ └─ energy_pulse.webm β”œβ”€ match/ β”‚ β”œβ”€ match_start.webm β”‚ β”œβ”€ countdown.webm β”‚ β”œβ”€ match_end.webm β”‚ β”œβ”€ victory.webm β”‚ └─ defeat.webm β”œβ”€ movement/ β”‚ β”œβ”€ footstep.webm β”‚ └─ stance_change.webm β”œβ”€ ki/ β”‚ β”œβ”€ ki_charge.webm β”‚ └─ ki_release.webm β”œβ”€ stamina/ β”‚ └─ stamina_depleted.webm β”œβ”€ health/ β”‚ └─ health_low.webm └─ ui/ β”œβ”€ menu_click.webm β”œβ”€ menu_navigate.webm β”œβ”€ menu_select.webm β”œβ”€ menu_hover.webm └─ menu_back.webm ``` --- ## 1. Backgrounds & Environments ### 1.1 Intro / Main Menu Background - **Asset Name:** `intro_bg_loop.png` - **Description:** A seamless 1920Γ—1080 loopable tile of a rain‐slicked concrete floor with neon pipes and drifting data‐line grid. - **File Format:** PNG (plus normal/roughness if you want subtle 3D lighting on flat sprites, but PNG is usually enough). - **Folder:** `assets/visual/bg/intro/` - **Visual Style Notes:** - Base color: Obsidian (`#0A0F12`) with subtle film‐grain overlay. - Neon accents: teal/cyan reflections on puddles, flickering Hangul glyphs on pipes. - Animation: small β€œrain drip” loop in shader or flipbook. - **Asset Name:** `mainmenu_foreground_overlay.png` - **Description:** A semi‐transparent obsidian vignette (20px β€œsoft edge”) to darken screen edges, helping text/logo pop. - **File Format:** PNG (alpha) - **Folder:** `assets/visual/overlays/` - **Usage:** Placed above `intro_bg_loop` to darken corners. ### 1.2 Dojang / Training Hall Background - **Asset Name:** `dojang_floor_tex.png` - **Description:** 2048Γ—2048 PBR‐style image of matte‐black tatami mats, with subtle water puddle normals (if you want dynamic reflections). - **File Format:** PNG (or PNG + normal/roughness if desired) - **Folder:** `assets/visual/bg/dojang/` - **Style Notes:** - Tileable so it can fill any resolution. - Slight neon cyan reflections at edges where wall meets floor. - **Asset Name:** `dojang_wall_tex.png` - **Description:** 1024Γ—1024 tile of corrugated metal with pipelines and emissive Hangul trigrams (☰, ☲, etc.) behind semi‐opaque panels. - **File Format:** PNG (with separate emissive mask channel if you plan to animate neon flicker). - **Folder:** `assets/visual/bg/dojang/` - **Style Notes:** - The emissive mask will let you β€œpulse” each trigram glyph via a simple shader or a flicker sprite. - **Asset Name:** `dojang_wall_neon_flicker.png` (optional flipbook) - **Description:** A small flipbook (e.g. 4 frames at 256Γ—256) showing a neon glyph flicker (cycle through 0%, 50%, 100% brightness). - **File Format:** PNG sprite sheet - **Folder:** `assets/vfx/animations/` - **Asset Name:** `training_console_model.png` - **Description:** 512Γ—512 stylized grayscale sprite of a holo‐console (flat sprite) with cyan emissive accents (for real‐time data display). - **File Format:** PNG - **Folder:** `assets/visual/props/` - **Notes:** Use this as a static background element; you can overlay bitmaps of gauge bars, or simply let the console glow. - **Asset Name:** `stance_pad_circle.png` - **Description:** 256Γ—256 semi‐transparent PNG of a glowing floor circle. Pulses from 0 β†’ 100% opacity in a 1s loop. - **File Format:** PNG (alpha) - **Folder:** `assets/visual/props/` --- ## 2. UI Icons & HUD Elements ### 2.1 Stance Icons Each icon is a 64Γ—64 px SVG (so it scales crisply). We’ll load them as textures in Pixi and tint/animate as needed. 1. **`icon_stance_defensive.svg`** - Outline style in Slate Gray (`#2E3538`) when inactive. - Filled with Teal Neon (`#00FFC8`) + soft glow when active. 2. **`icon_stance_balanced.svg`** - Outline in Slate Gray; filled with Teal Neon on hover/active. 3. **`icon_stance_aggressive.svg`** - Outline in Slate Gray; filled with Crimson (`#FF0044`) on β€œcharged” or β€œready” state, or Teal Neon when selected. **Folder:** `assets/ui/icons/stances/` ### 2.2 Trigram Icons - **File Names:** ``` icon_trigram_1.svg icon_trigram_2.svg … icon_trigram_8.svg ``` - **Each icon:** 48Γ—48 px, dark background (Gunmetal `#424A50`) with the trigram glyph in Teal Neon. - **States:** - Inactive: no glow, just basic fill. - Active: slight outer glow + subtle 1.1Γ— scale β€œpulse.” - Hover: 1.05Γ— scale + quick glow (0.2 s). **Folder:** `assets/ui/icons/trigrams/` ### 2.3 HUD Bars & Overlays - **`hud_health_bar.png`** (800Γ—32 px PNG) - 10 segmented blocks. Each filled segment is Cyan Glow (`#1BE7FF`); empty is Slate Gray. - **Folder:** `assets/ui/hud/` - **`hud_pain_bar.png`** (800Γ—16 px PNG) - 10 segments. Filled segments are Crimson (`#FF0044`); empty Slate Gray. - **Folder:** `assets/ui/hud/` - **`ui_button_start_idle.png` & `ui_button_start_hover.png`** (256Γ—64 px each) - Idle: Slate Gray panel with β€œβ–Ά Start Combat” in Hangul+English. - Hover: Underline in Teal Neon + icon (β€œβ–Άβ€) glows. - **Folder:** `assets/ui/buttons/` - **`ui_panel_slate.png`** (1024Γ—512 px) - A semi-opaque Slate Gray panel (70% opacity) with a subtle noise texture. - **Folder:** `assets/ui/panels/` - **`tooltip_arrow.png`** (32Γ—32 px PNG) - Small triangle arrow in Cyan Glow for tooltips. - **Folder:** `assets/ui/tooltips/` --- ## 3. Technique Animations (AnimatedSprite Sprite Sheets) Any time you see code like: ```js await Assets.load("path/to/spritesheet.json"); const frames = []; for (let i = 0; i < N; i++) { frames.push(Texture.from(`frame${i}.png`)); } const anim = new AnimatedSprite(frames); ``` …you need a **sprite sheet JSON** + **corresponding PNG atlas** for each β€œtechnique.” Below is a minimal required set of technique animations: ### 3.1 Light Strike Animation (All Archetypes) - **Sprite Sheet JSON:** `strike_light_spritesheet.json` - **Texture Atlas:** `strike_light_spritesheet.png` (e.g., 512Γ—512 containing all 6 frames laid out in a grid). - **Frame Count:** 6 frames, each \~128Γ—256 (portrait orientation). - **Animation Speed:** 0.6 (adjust per archetype). - **Visual Content:** Character winds up β†’ quick punch/kick β†’ recoil. No background in atlas (transparent). - **Folder:** `assets/characters/animations/techniques/light/` ### 3.2 Medium Strike Animation - **Sprite Sheet JSON:** `strike_medium_spritesheet.json` - **Texture Atlas:** `strike_medium_spritesheet.png` (6–8 frames, \~128Γ—256 each). - **Description:** More wind-up, more impact frames, a small dust puff frame integrated (see VFX). - **Folder:** `assets/characters/animations/techniques/medium/` ### 3.3 Heavy Strike Animation - **Sprite Sheet JSON:** `strike_heavy_spritesheet.json` - **Texture Atlas:** `strike_heavy_spritesheet.png` (8 frames, \~256Γ—256 each). - **Description:** Big wind-up, slow-mo pause on impact, splash of embedded VFX dust/blood. - **Folder:** `assets/characters/animations/techniques/heavy/` ### 3.4 Critical Strike / Finisher Animation - **Sprite Sheet JSON:** `strike_critical_spritesheet.json` - **Texture Atlas:** `strike_critical_spritesheet.png` (10–12 frames, \~256Γ—256). - **Description:** Slow-mo bone-breaking blow β†’ flash frame β†’ slowdown. - **Folder:** `assets/characters/animations/techniques/critical/` ### 3.5 Dodge / Evade Animation - **Sprite Sheet JSON:** `dodge_spritesheet.json` - **Texture Atlas:** `dodge_spritesheet.png` (4–6 frames, \~128Γ—256). - **Description:** Quick sidestep/backflip frames, subtle afterimage. - **Folder:** `assets/characters/animations/techniques/dodge/` ### 3.6 Block / Parry Animation - **Sprite Sheet JSON:** `block_spritesheet.json` - **Texture Atlas:** `block_spritesheet.png` (5 frames, \~128Γ—256). - **Description:** Character raises arm/weapon to block β†’ recoil if successful. - **Folder:** `assets/characters/animations/techniques/block/` ### 3.7 Hit Reaction Animation - **Sprite Sheet JSON:** `hit_reaction_spritesheet.json` - **Texture Atlas:** `hit_reaction_spritesheet.png` (4 frames, \~128Γ—256). - **Description:** Character flinches backwards, tinted red on final frame. - **Folder:** `assets/characters/animations/techniques/hit/` ### 3.8 Finisher Sequence (All Archetypes) - **Sprite Sheet JSON:** `finisher_musa_spritesheet.json`, `finisher_amsalja_spritesheet.json`, etc. - **Texture Atlas:** `finisher_musa_spritesheet.png` (12 frames, \~256Γ—256), etc. - **Description:** A multi-stage β€œcinematic” finisher (pause β†’ bone crushing β†’ slow fade). - **Folder:** `assets/characters/animations/finisher/` --- ## 4. Pixi.js Dependencies & Modules Needed Below is a minimal list of **Pixi.js modules** (from `pixi.js/lib`) that you will rely on to load, animate, and render everything above. In your `package.json`, you’ve already installed `pixi.js`. At runtime, you’ll import exactly the pieces you use: ```ts import { Application, TickerPlugin, // core ticker ResizePlugin, // auto resizes to window Assets, // for loading JSON/PNG atlases Texture, Sprite, AnimatedSprite, Container, TilingSprite, // if you want parallax/tiled backgrounds Loader, // older API if you prefer Loader instead of Assets } from "pixi.js"; ``` - **`Application`** (from `app/Application.mjs`) - Creates the Pixi canvas, WebGL context, stage, etc. - **`TickerPlugin`** & **`ResizePlugin`** - Ensures your app’s ticker (main game loop) and auto-resize functionality. - **`Assets`** (from `assets/Assets.mjs`) - The new recommended loader for JSON sprite sheets, PNGs, audio, etc. - Example: ```ts await Assets.load( "assets/characters/animations/techniques/light/strike_light_spritesheet.json" ); ``` - **`Texture`** (from `rendering/texture/Texture.mjs`) - Create textures from loaded assets: ```ts const frameTex = Texture.from("strike_light_000.png"); ``` - **`Sprite`** & **`AnimatedSprite`** (from `scene/sprite/Sprite.mjs` & `scene/sprite-animated/AnimatedSprite.mjs`) - `Sprite` for static images (UI icons, backgrounds). - `AnimatedSprite` for flipbook animations (techniques, VFX). - **`Container`** (from `scene/container/Container.mjs`) - Use a parent `Container` for grouping layers: - `backgroundContainer` - `characterContainer` - `uiContainer` - `vfxContainer` - **`TilingSprite`** (from `scene/sprite-tiling/TilingSprite.mjs`) - If you want to scroll/loop the `intro_bg_loop.png` or tile `dojang_floor_tex.png` seamlessly across a larger stage. - **`Loader`** (from `assets/loader/Loader.mjs`) - If you prefer the older PIXI.Loader API to Assets. Both are possible; `Assets` is recommended for newer Pixi versions. - **`Filter`** / **`BlurFilter`** / **`DisplacementFilter`** (from `filters/defaults/*`) - Useful for adding real-time blur afterimages (for `dodge`), screen shakes, or ripples when powering up Ki (`ki_charge`). --- ## 5. Directory Structure & Final Checklist Below is a **consolidated folder structure** showing where each of the above assets live. This is what your repo (or build pipeline) needs before you start coding the Pixi setup: ``` /assets β”œβ”€ characters/ β”‚ β”œβ”€ animations/ β”‚ β”‚ β”œβ”€ techniques/ β”‚ β”‚ β”‚ β”œβ”€ light/ β”‚ β”‚ β”‚ β”‚ β”œβ”€ strike_light_spritesheet.json β”‚ β”‚ β”‚ β”‚ └─ strike_light_spritesheet.png β”‚ β”‚ β”‚ β”œβ”€ medium/ β”‚ β”‚ β”‚ β”‚ β”œβ”€ strike_medium_spritesheet.json β”‚ β”‚ β”‚ β”‚ └─ strike_medium_spritesheet.png β”‚ β”‚ β”‚ β”œβ”€ heavy/ β”‚ β”‚ β”‚ β”‚ β”œβ”€ strike_heavy_spritesheet.json β”‚ β”‚ β”‚ β”‚ └─ strike_heavy_spritesheet.png β”‚ β”‚ β”‚ β”œβ”€ critical/ β”‚ β”‚ β”‚ β”‚ β”œβ”€ strike_critical_spritesheet.json β”‚ β”‚ β”‚ β”‚ └─ strike_critical_spritesheet.png β”‚ β”‚ β”‚ β”œβ”€ dodge/ β”‚ β”‚ β”‚ β”‚ β”œβ”€ dodge_spritesheet.json β”‚ β”‚ β”‚ β”‚ └─ dodge_spritesheet.png β”‚ β”‚ β”‚ β”œβ”€ block/ β”‚ β”‚ β”‚ β”‚ β”œβ”€ block_spritesheet.json β”‚ β”‚ β”‚ β”‚ └─ block_spritesheet.png β”‚ β”‚ β”‚ └─ hit/ β”‚ β”‚ β”‚ β”œβ”€ hit_reaction_spritesheet.json β”‚ β”‚ β”‚ └─ hit_reaction_spritesheet.png β”‚ β”‚ └─ finisher/ β”‚ β”‚ β”œβ”€ musa_finisher_spritesheet.json β”‚ β”‚ └─ musa_finisher_spritesheet.png β”‚ β”‚ β”œβ”€ amsalja_finisher_spritesheet.json β”‚ β”‚ └─ amsalja_finisher_spritesheet.png β”‚ β”‚ └─ … (one per archetype) β”‚ └─ portraits/ β”‚ β”œβ”€ portrait_musa.png β”‚ β”œβ”€ portrait_amsalja.png β”‚ └─ … (other archetypes) β”‚ β”œβ”€ fonts/ β”‚ β”œβ”€ BlackTrigram-Hangul.woff2 β”‚ β”œβ”€ NotoSansKR-Regular.woff2 β”‚ └─ Roboto-Regular.woff2 β”‚ β”œβ”€ i18n/ β”‚ β”œβ”€ ko.json β”‚ └─ en.json β”‚ β”œβ”€ props/ β”‚ β”œβ”€ training_console_model.png β”‚ β”œβ”€ stance_pad_circle.png β”‚ └─ dummy_target_overlay.svg β”‚ β”œβ”€ shaders/ β”‚ β”œβ”€ rim_light.shader β”‚ β”œβ”€ blood_decal.shader β”‚ └─ neon_flicker.shader β”‚ β”œβ”€ ui/ β”‚ β”œβ”€ buttons/ β”‚ β”‚ β”œβ”€ ui_button_start_idle.png β”‚ β”‚ └─ ui_button_start_hover.png β”‚ β”œβ”€ icons/ β”‚ β”‚ β”œβ”€ stances/ β”‚ β”‚ β”‚ β”œβ”€ icon_stance_defensive.svg β”‚ β”‚ β”‚ β”œβ”€ icon_stance_balanced.svg β”‚ β”‚ β”‚ └─ icon_stance_aggressive.svg β”‚ β”‚ β”œβ”€ trigrams/ β”‚ β”‚ β”‚ β”œβ”€ icon_trigram_1.svg β”‚ β”‚ β”‚ β”œβ”€ icon_trigram_2.svg β”‚ β”‚ β”‚ └─ … up to icon_trigram_8.svg β”‚ β”‚ └─ tooltip_arrow.png β”‚ └─ hud/ β”‚ β”œβ”€ hud_health_bar.png β”‚ └─ hud_pain_bar.png β”‚ β”œβ”€ vfx/ β”‚ β”œβ”€ animations/ β”‚ β”‚ β”œβ”€ anim_logo_pulse.json β”‚ β”‚ β”œβ”€ anim_menu_slide_0.png … anim_menu_slide_7.png β”‚ β”‚ β”œβ”€ anim_strike_impact_0.png … anim_strike_impact_15.png β”‚ β”‚ └─ anim_finisher_musa_0.png … anim_finisher_musa_11.png β”‚ β”œβ”€ particles/ β”‚ β”‚ β”œβ”€ vfx_dust_puff.png β”‚ β”‚ β”œβ”€ vfx_blood_splatter.png β”‚ β”‚ └─ confetti_sprites.png β”‚ └─ shaders/ β”‚ β”œβ”€ vfx_impact_ring.png β”‚ β”œβ”€ vfx_neon_glow.png β”‚ └─ vfx_critical_flash.png β”‚ β”œβ”€ visual/ β”‚ β”œβ”€ bg/ β”‚ β”‚ β”œβ”€ intro/ β”‚ β”‚ β”‚ β”œβ”€ intro_bg_loop.png β”‚ β”‚ β”‚ └─ mainmenu_foreground_overlay.png β”‚ β”‚ └─ dojang/ β”‚ β”‚ β”œβ”€ dojang_floor_tex.png β”‚ β”‚ └─ dojang_wall_tex.png β”‚ └─ overlays/ β”‚ β”œβ”€ vital_region_head.png β”‚ β”œβ”€ vital_region_neck.png β”‚ β”œβ”€ vital_region_torso.png β”‚ β”œβ”€ vital_region_arms.png β”‚ β”œβ”€ vital_region_chest.png β”‚ └─ vital_region_legs.png β”‚ └─ public/ └─ assets/ └─ audio/ β”œβ”€ music/ β”‚ β”œβ”€ intro_theme.webm β”‚ β”œβ”€ combat_theme.webm β”‚ β”œβ”€ combat_theme_geon.webm β”‚ β”œβ”€ training_theme.webm β”‚ β”œβ”€ meditation_theme.webm β”‚ β”œβ”€ victory_theme.webm β”‚ β”œβ”€ underground_rave_theme.webm β”‚ └─ ambient_loop.webm └─ sfx/ β”œβ”€ ambient/ β”‚ β”œβ”€ dojang_ambience.webm β”‚ β”œβ”€ wind_effect.webm β”‚ └─ dojo_crowd.webm β”œβ”€ attacks/ β”‚ β”œβ”€ attack_punch_light.webm β”‚ β”œβ”€ attack_punch_medium.webm β”‚ β”œβ”€ attack_kick_heavy.webm β”‚ β”œβ”€ attack_light.webm β”‚ β”œβ”€ attack_medium.webm β”‚ β”œβ”€ attack_critical.webm β”‚ β”œβ”€ attack_special_geon.webm β”‚ β”œβ”€ dodge.webm β”‚ β”œβ”€ block_success.webm β”‚ β”œβ”€ block_break.webm β”‚ └─ perfect_strike.webm β”œβ”€ hit/ β”‚ β”œβ”€ hit_light.webm β”‚ β”œβ”€ hit_medium.webm β”‚ β”œβ”€ hit_heavy.webm β”‚ β”œβ”€ hit_critical.webm β”‚ β”œβ”€ hit_flesh.webm β”‚ └─ hit_block.webm β”œβ”€ combo/ β”‚ β”œβ”€ combo_buildup.webm β”‚ β”œβ”€ combo_finish.webm β”‚ └─ energy_pulse.webm β”œβ”€ match/ β”‚ β”œβ”€ match_start.webm β”‚ β”œβ”€ countdown.webm β”‚ β”œβ”€ match_end.webm β”‚ β”œβ”€ victory.webm β”‚ └─ defeat.webm β”œβ”€ movement/ β”‚ β”œβ”€ footstep.webm β”‚ └─ stance_change.webm β”œβ”€ ki/ β”‚ β”œβ”€ ki_charge.webm β”‚ └─ ki_release.webm β”œβ”€ stamina/ β”‚ └─ stamina_depleted.webm β”œβ”€ health/ β”‚ └─ health_low.webm └─ ui/ β”œβ”€ menu_click.webm β”œβ”€ menu_navigate.webm β”œβ”€ menu_select.webm β”œβ”€ menu_hover.webm └─ menu_back.webm ``` --- ## 1. Backgrounds & Environments ### 1.1 Intro / Main Menu Background - **Asset Name:** `intro_bg_loop.png` - **Description:** A seamless 1920Γ—1080 loopable tile of a rain‐slicked concrete floor with neon pipes and drifting data‐line grid. - **File Format:** PNG (plus normal/roughness if you want subtle 3D lighting on flat sprites, but PNG is usually enough). - **Folder:** `assets/visual/bg/intro/` - **Visual Style Notes:** - Base color: Obsidian (`#0A0F12`) with subtle film‐grain overlay. - Neon accents: teal/cyan reflections on puddles, flickering Hangul glyphs on pipes. - Animation: small β€œrain drip” loop in shader or flipbook. - **Asset Name:** `mainmenu_foreground_overlay.png` - **Description:** A semi‐transparent obsidian vignette (20px β€œsoft edge”) to darken screen edges, helping text/logo pop. - **File Format:** PNG (alpha) - **Folder:** `assets/visual/overlays/` - **Usage:** Placed above `intro_bg_loop` to darken corners. ### 1.2 Dojang / Training Hall Background - **Asset Name:** `dojang_floor_tex.png` - **Description:** 2048Γ—2048 PBR‐style image of matte‐black tatami mats, with subtle water puddle normals (if you want dynamic reflections). - **File Format:** PNG (or PNG + normal/roughness if desired) - **Folder:** `assets/visual/bg/dojang/` - **Style Notes:** - Tileable so it can fill any resolution. - Slight neon cyan reflections at edges where wall meets floor. - **Asset Name:** `dojang_wall_tex.png` - **Description:** 1024Γ—1024 tile of corrugated metal with pipelines and emissive Hangul trigrams (☰, ☲, etc.) behind semi‐opaque panels. - **File Format:** PNG (with separate emissive mask channel if you plan to animate neon flicker). - **Folder:** `assets/visual/bg/dojang/` - **Style Notes:** - The emissive mask will let you β€œpulse” each trigram glyph via a simple shader or a flicker sprite. - **Asset Name:** `dojang_wall_neon_flicker.png` (optional flipbook) - **Description:** A small flipbook (e.g. 4 frames at 256Γ—256) showing a neon glyph flicker (cycle through 0%, 50%, 100% brightness). - **File Format:** PNG sprite sheet - **Folder:** `assets/vfx/animations/` - **Asset Name:** `training_console_model.png` - **Description:** 512Γ—512 stylized grayscale sprite of a holo‐console (flat sprite) with cyan emissive accents (for real‐time data display). - **File Format:** PNG - **Folder:** `assets/visual/props/` - **Notes:** Use this as a static background element; you can overlay bitmaps of gauge bars, or simply let the console glow. - **Asset Name:** `stance_pad_circle.png` - **Description:** 256Γ—256 semi‐transparent PNG of a glowing floor circle. Pulses from 0 β†’ 100% opacity in a 1s loop. - **File Format:** PNG (alpha) - **Folder:** `assets/visual/props/` --- ## 2. UI Icons & HUD Elements ### 2.1 Stance Icons Each icon is a 64Γ—64 px SVG (so it scales crisply). We’ll load them as textures in Pixi and tint/animate as needed. 1. **`icon_stance_defensive.svg`** - Outline style in Slate Gray (`#2E3538`) when inactive. - Filled with Teal Neon (`#00FFC8`) + soft glow when active. 2. **`icon_stance_balanced.svg`** - Outline in Slate Gray; filled with Teal Neon on hover/active. 3. **`icon_stance_aggressive.svg`** - Outline in Slate Gray; filled with Crimson (`#FF0044`) on β€œcharged” or β€œready” state, or Teal Neon when selected. **Folder:** `assets/ui/icons/stances/` ### 2.2 Trigram Icons - **File Names:** ``` icon_trigram_1.svg icon_trigram_2.svg … icon_trigram_8.svg ``` - **Each icon:** 48Γ—48 px, dark background (Gunmetal `#424A50`) with the trigram glyph in Teal Neon. - **States:** - Inactive: no glow, just basic fill. - Active: slight outer glow + subtle 1.1Γ— scale β€œpulse.” - Hover: 1.05Γ— scale + quick glow (0.2 s). **Folder:** `assets/ui/icons/trigrams/` ### 2.3 HUD Bars & Overlays - **`hud_health_bar.png`** (800Γ—32 px PNG) - 10 segmented blocks. Each filled segment is Cyan Glow (`#1BE7FF`); empty is Slate Gray. - **Folder:** `assets/ui/hud/` - **`hud_pain_bar.png`** (800Γ—16 px PNG) - 10 segments. Filled segments are Crimson (`#FF0044`); empty Slate Gray. - **Folder:** `assets/ui/hud/` - **`ui_button_start_idle.png` & `ui_button_start_hover.png`** (256Γ—64 px each) - Idle: Slate Gray panel with β€œβ–Ά Start Combat” in Hangul+English. - Hover: Underline in Teal Neon + icon (β€œβ–Άβ€) glows. - **Folder:** `assets/ui/buttons/` - **`ui_panel_slate.png`** (1024Γ—512 px) - A semi-opaque Slate Gray panel (70% opacity) with a subtle noise texture. - **Folder:** `assets/ui/panels/` - **`tooltip_arrow.png`** (32Γ—32 px PNG) - Small triangle arrow in Cyan Glow for tooltips. - **Folder:** `assets/ui/tooltips/` --- ## 3. Technique Animations (AnimatedSprite Sprite Sheets) Any time you see code like: ```js await Assets.load("path/to/spritesheet.json"); const frames = []; for (let i = 0; i < N; i++) { frames.push(Texture.from(`frame${i}.png`)); } const anim = new AnimatedSprite(frames); ``` …you need a **sprite sheet JSON** + **corresponding PNG atlas** for each β€œtechnique.” Below is a minimal required set of technique animations: ### 3.1 Light Strike Animation (All Archetypes) - **Sprite Sheet JSON:** `strike_light_spritesheet.json` - **Texture Atlas:** `strike_light_spritesheet.png` (e.g., 512Γ—512 containing all 6 frames laid out in a grid). - **Frame Count:** 6 frames, each \~128Γ—256 (portrait orientation). - **Animation Speed:** 0.6 (adjust per archetype). - **Visual Content:** Character winds up β†’ quick punch/kick β†’ recoil. No background in atlas (transparent). - **Folder:** `assets/characters/animations/techniques/light/` ### 3.2 Medium Strike Animation - **Sprite Sheet JSON:** `strike_medium_spritesheet.json` - **Texture Atlas:** `strike_medium_spritesheet.png` (6–8 frames, \~128Γ—256 each). - **Description:** More wind-up, more impact frames, a small dust puff frame integrated (see VFX). - **Folder:** `assets/characters/animations/techniques/medium/` ### 3.3 Heavy Strike Animation - **Sprite Sheet JSON:** `strike_heavy_spritesheet.json` - **Texture Atlas:** `strike_heavy_spritesheet.png` (8 frames, \~256Γ—256 each). - **Description:** Big wind-up, slow-mo pause on impact, splash of embedded VFX dust/blood. - **Folder:** `assets/characters/animations/techniques/heavy/` ### 3.4 Critical Strike / Finisher Animation - **Sprite Sheet JSON:** `strike_critical_spritesheet.json` - **Texture Atlas:** `strike_critical_spritesheet.png` (10–12 frames, \~256Γ—256). - **Description:** Slow-mo bone-breaking blow β†’ flash frame β†’ slowdown. - **Folder:** `assets/characters/animations/techniques/critical/` ### 3.5 Dodge / Evade Animation - **Sprite Sheet JSON:** `dodge_spritesheet.json` - **Texture Atlas:** `dodge_spritesheet.png` (4–6 frames, \~128Γ—256). - **Description:** Quick sidestep/backflip frames, subtle afterimage. - **Folder:** `assets/characters/animations/techniques/dodge/` ### 3.6 Block / Parry Animation - **Sprite Sheet JSON:** `block_spritesheet.json` - **Texture Atlas:** `block_spritesheet.png` (5 frames, \~128Γ—256). - **Description:** Character raises arm/weapon to block β†’ recoil if successful. - **Folder:** `assets/characters/animations/techniques/block/` ### 3.7 Hit Reaction Animation - **Sprite Sheet JSON:** `hit_reaction_spritesheet.json` - **Texture Atlas:** `hit_reaction_spritesheet.png` (4 frames, \~128Γ—256). - **Description:** Character flinches backwards, tinted red on final frame. - **Folder:** `assets/characters/animations/techniques/hit/` ### 3.8 Finisher Sequence (All Archetypes) - **Sprite Sheet JSON:** `finisher_musa_spritesheet.json`, `finisher_amsalja_spritesheet.json`, etc. - **Texture Atlas:** `finisher_musa_spritesheet.png` (12 frames, \~256Γ—256), etc. - **Description:** A multi-stage β€œcinematic” finisher (pause β†’ bone crushing β†’ slow fade). - **Folder:** `assets/characters/animations/finisher/` --- ## 4. Pixi.js Dependencies & Modules Needed Below is a minimal list of **Pixi.js modules** (from `pixi.js/lib`) that you will rely on to load, animate, and render everything above. In your `package.json`, you’ve already installed `pixi.js`. At runtime, you’ll import exactly the pieces you use: ```ts import { Application, TickerPlugin, // core ticker ResizePlugin, // auto resizes to window Assets, // for loading JSON/PNG atlases Texture, Sprite, AnimatedSprite, Container, TilingSprite, // if you want parallax/tiled backgrounds Loader, // older API if you prefer Loader instead of Assets } from "pixi.js"; ``` - **`Application`** (from `app/Application.mjs`) - Creates the Pixi canvas, WebGL context, stage, etc. - **`TickerPlugin`** & **`ResizePlugin`** - Ensures your app’s ticker (main game loop) and auto-resize functionality. - **`Assets`** (from `assets/Assets.mjs`) - The new recommended loader for JSON sprite sheets, PNGs, audio, etc. - Example: ```ts await Assets.load( "assets/characters/animations/techniques/light/strike_light_spritesheet.json" ); ``` - **`Texture`** (from `rendering/texture/Texture.mjs`) - Create textures from loaded assets: ```ts const frameTex = Texture.from("strike_light_000.png"); ``` - **`Sprite`** & **`AnimatedSprite`** (from `scene/sprite/Sprite.mjs` & `scene/sprite-animated/AnimatedSprite.mjs`) - `Sprite` for static images (UI icons, backgrounds). - `AnimatedSprite` for flipbook animations (techniques, VFX). - **`Container`** (from `scene/container/Container.mjs`) - Use a parent `Container` for grouping layers: - `backgroundContainer` - `characterContainer` - `uiContainer` - `vfxContainer` - **`TilingSprite`** (from `scene/sprite-tiling/TilingSprite.mjs`) - If you want to scroll/loop the `intro_bg_loop.png` or tile `dojang_floor_tex.png` seamlessly across a larger stage. - **`Loader`** (from `assets/loader/Loader.mjs`) - If you prefer the older PIXI.Loader API to Assets. Both are possible; `Assets` is recommended for newer Pixi versions. - **`Filter`** / **`BlurFilter`** / **`DisplacementFilter`** (from `filters/defaults/*`) - Useful for adding real-time blur afterimages (for `dodge`), screen shakes, or ripples when powering up Ki (`ki_charge`). --- ## 5. Directory Structure & Final Checklist Below is a **consolidated folder structure** showing where each of the above assets live. This is what your repo (or build pipeline) needs before you start coding the Pixi setup: ``` /assets β”œβ”€ characters/ β”‚ β”œβ”€ animations/ β”‚ β”‚ β”œβ”€ techniques/ β”‚ β”‚ β”‚ β”œβ”€ light/ β”‚ β”‚ β”‚ β”‚ β”œβ”€ strike_light_spritesheet.json β”‚ β”‚ β”‚ β”‚ └─ strike_light_spritesheet.png β”‚ β”‚ β”‚ β”œβ”€ medium/ β”‚ β”‚ β”‚ β”‚ β”œβ”€ strike_medium_spritesheet.json β”‚ β”‚ β”‚ β”‚ └─ strike_medium_spritesheet.png β”‚ β”‚ β”‚ β”œβ”€ heavy/ β”‚ β”‚ β”‚ β”‚ β”œβ”€ strike_heavy_spritesheet.json β”‚ β”‚ β”‚ β”‚ └─ strike_heavy_spritesheet.png β”‚ β”‚ β”‚ β”œβ”€ critical/ β”‚ β”‚ β”‚ β”‚ β”œβ”€ strike_critical_spritesheet.json β”‚ β”‚ β”‚ β”‚ └─ strike_critical_spritesheet.png β”‚ β”‚ β”‚ β”œβ”€ dodge/ β”‚ β”‚ β”‚ β”‚ β”œβ”€ dodge_spritesheet.json β”‚ β”‚ β”‚ β”‚ └─ dodge_spritesheet.png β”‚ β”‚ β”‚ β”œβ”€ block/ β”‚ β”‚ β”‚ β”‚ β”œβ”€ block_spritesheet.json β”‚ β”‚ β”‚ β”‚ └─ block_spritesheet.png β”‚ β”‚ β”‚ └─ hit/ β”‚ β”‚ β”‚ β”œβ”€ hit_reaction_spritesheet.json β”‚ β”‚ β”‚ └─ hit_reaction_spritesheet.png β”‚ β”‚ └─ finisher/ β”‚ β”‚ β”œβ”€ musa_finisher_spritesheet.json β”‚ β”‚ └─ musa_finisher_spritesheet.png β”‚ β”‚ β”œβ”€ amsalja_finisher_spritesheet.json β”‚ β”‚ └─ amsalja_finisher_spritesheet.png β”‚ β”‚ └─ … (one per archetype) β”‚ └─ portraits/ β”‚ β”œβ”€ portrait_musa.png β”‚ β”œβ”€ portrait_amsalja.png β”‚ └─ … (other archetypes) β”‚ β”œβ”€ fonts/ β”‚ β”œβ”€ BlackTrigram-Hangul.woff2 β”‚ β”œβ”€ NotoSansKR-Regular.woff2 β”‚ └─ Roboto-Regular.woff2 β”‚ β”œβ”€ i18n/ β”‚ β”œβ”€ ko.json β”‚ └─ en.json β”‚ β”œβ”€ props/ β”‚ β”œβ”€ training_console_model.png β”‚ β”œβ”€ stance_pad_circle.png β”‚ └─ dummy_target_overlay.svg β”‚ β”œβ”€ shaders/ β”‚ β”œβ”€ rim_light.shader β”‚ β”œβ”€ blood_decal.shader β”‚ └─ neon_flicker.shader β”‚ β”œβ”€ ui/ β”‚ β”œβ”€ buttons/ β”‚ β”‚ β”œβ”€ ui_button_start_idle.png β”‚ β”‚ └─ ui_button_start_hover.png β”‚ β”œβ”€ icons/ β”‚ β”‚ β”œβ”€ stances/ β”‚ β”‚ β”‚ β”œβ”€ icon_stance_defensive.svg β”‚ β”‚ β”‚ β”œβ”€ icon_stance_balanced.svg β”‚ β”‚ β”‚ └─ icon_stance_aggressive.svg β”‚ β”‚ β”œβ”€ trigrams/ β”‚ β”‚ β”‚ β”œβ”€ icon_trigram_1.svg β”‚ β”‚ β”‚ β”œβ”€ icon_trigram_2.svg β”‚ β”‚ β”‚ └─ … up to icon_trigram_8.svg β”‚ β”‚ └─ tooltip_arrow.png β”‚ └─ hud/ β”‚ β”œβ”€ hud_health_bar.png β”‚ └─ hud_pain_bar.png β”‚ β”œβ”€ vfx/ β”‚ β”œβ”€ animations/ β”‚ β”‚ β”œβ”€ anim_logo_pulse.json β”‚ β”‚ β”œβ”€ anim_menu_slide_0.png … anim_menu_slide_7.png β”‚ β”‚ β”œβ”€ anim_strike_impact_0.png … anim_strike_impact_15.png β”‚ β”‚ └─ anim_finisher_musa_0.png … anim_finisher_musa_11.png β”‚ β”œβ”€ particles/ β”‚ β”‚ β”œβ”€ vfx_dust_puff.png β”‚ β”‚ β”œβ”€ vfx_blood_splatter.png β”‚ β”‚ └─ confetti_sprites.png β”‚ └─ shaders/ β”‚ β”œβ”€ vfx_impact_ring.png β”‚ β”œβ”€ vfx_neon_glow.png β”‚ └─ vfx_critical_flash.png β”‚ β”œβ”€ visual/ β”‚ β”œβ”€ bg/ β”‚ β”‚ β”œβ”€ intro/ β”‚ β”‚ β”‚ β”œβ”€ intro_bg_loop.png β”‚ β”‚ β”‚ └─ mainmenu_foreground_overlay.png β”‚ β”‚ └─ dojang/ β”‚ β”‚ β”œβ”€ dojang_floor_tex.png β”‚ β”‚ └─ dojang_wall_tex.png β”‚ └─ overlays/ β”‚ β”œβ”€ vital_region_head.png β”‚ β”œβ”€ vital_region_neck.png β”‚ β”œβ”€ vital_region_torso.png β”‚ β”œβ”€ vital_region_arms.png β”‚ β”œβ”€ vital_region_chest.png β”‚ └─ vital_region_legs.png β”‚ └─ public/ └─ assets/ └─ audio/ β”œβ”€ music/ β”‚ β”œβ”€ intro_theme.webm β”‚ β”œβ”€ combat_theme.webm β”‚ β”œβ”€ combat_theme_geon.webm β”‚ β”œβ”€ training_theme.webm β”‚ β”œβ”€ meditation_theme.webm β”‚ β”œβ”€ victory_theme.webm β”‚ β”œβ”€ underground_rave_theme.webm β”‚ └─ ambient_loop.webm └─ sfx/ β”œβ”€ ambient/ β”‚ β”œβ”€ dojang_ambience.webm β”‚ β”œβ”€ wind_effect.webm β”‚ └─ dojo_crowd.webm β”œβ”€ attacks/ β”‚ β”œβ”€ attack_punch_light.webm β”‚ β”œβ”€ attack_punch_medium.webm β”‚ β”œβ”€ attack_kick_heavy.webm β”‚ β”œβ”€ attack_light.webm β”‚ β”œβ”€ attack_medium.webm β”‚ β”œβ”€ attack_critical.webm β”‚ β”œβ”€ attack_special_geon.webm β”‚ β”œβ”€ dodge.webm β”‚ β”œβ”€ block_success.webm β”‚ β”œβ”€ block_break.webm β”‚ └─ perfect_strike.webm β”œβ”€ hit/ β”‚ β”œβ”€ hit_light.webm β”‚ β”œβ”€ hit_medium.webm β”‚ β”œβ”€ hit_heavy.webm β”‚ β”œβ”€ hit_critical.webm β”‚ β”œβ”€ hit_flesh.webm β”‚ └─ hit_block.webm β”œβ”€ combo/ β”‚ β”œβ”€ combo_buildup.webm β”‚ β”œβ”€ combo_finish.webm β”‚ └─ energy_pulse.webm β”œβ”€ match/ β”‚ β”œβ”€ match_start.webm β”‚ β”œβ”€ countdown.webm β”‚ β”œβ”€ match_end.webm β”‚ β”œβ”€ victory.webm β”‚ └─ defeat.webm β”œβ”€ movement/ β”‚ β”œβ”€ footstep.webm β”‚ └─ stance_change.webm β”œβ”€ ki/ β”‚ β”œβ”€ ki_charge.webm β”‚ └─ ki_release.webm β”œβ”€ stamina/ β”‚ └─ stamina_depleted.webm β”œβ”€ health/ β”‚ └─ health_low.webm └─ ui/ β”œβ”€ menu_click.webm β”œβ”€ menu_navigate.webm β”œβ”€ menu_select.webm β”œβ”€ menu_hover.webm └─ menu_back.webm ``` --- ## 1. Backgrounds & Environments ### 1.1 Intro / Main Menu Background - **Asset Name:** `intro_bg_loop.png` - **Description:** A seamless 1920Γ—1080 loopable tile of a rain‐slicked concrete floor with neon pipes and drifting data‐line grid. - **File Format:** PNG (plus normal/roughness if you want subtle 3D lighting on flat sprites, but PNG is usually enough). - **Folder:** `assets/visual/bg/intro/` - **Visual Style Notes:** - Base color: Obsidian (`#0A0F12`) with subtle film‐grain overlay. - Neon accents: teal/cyan reflections on puddles, flickering Hangul glyphs on pipes. - Animation: small β€œrain drip” loop in shader or flipbook. - **Asset Name:** `mainmenu_foreground_overlay.png` - **Description:** A semi‐transparent obsidian vignette (20px β€œsoft edge”) to darken screen edges, helping text/logo pop. - **File Format:** PNG (alpha) - **Folder:** `assets/visual/overlays/` - **Usage:** Placed above `intro_bg_loop` to darken corners. ### 1.2 Dojang / Training Hall Background - **Asset Name:** `dojang_floor_tex.png` - **Description:** 2048Γ—2048 PBR‐style image of matte‐black tatami mats, with subtle water puddle normals (if you want dynamic reflections). - **File Format:** PNG (or PNG + normal/roughness if desired) - **Folder:** `assets/visual/bg/dojang/` - **Style Notes:** - Tileable so it can fill any resolution. - Slight neon cyan reflections at edges where wall meets floor. - **Asset Name:** `dojang_wall_tex.png` - **Description:** 1024Γ—1024 tile of corrugated metal with pipelines and emissive Hangul trigrams (☰, ☲, etc.) behind semi‐opaque panels. - **File Format:** PNG (with separate emissive mask channel if you plan to animate neon flicker). - **Folder:** `assets/visual/bg/dojang/` - **Style Notes:** - The emissive mask will let you β€œpulse” each trigram glyph via a simple shader or a flicker sprite. - **Asset Name:** `dojang_wall_neon_flicker.png` (optional flipbook) - **Description:** A small flipbook (e.g. 4 frames at 256Γ—256) showing a neon glyph flicker (cycle through 0%, 50%, 100% brightness). - **File Format:** PNG sprite sheet - **Folder:** `assets/vfx/animations/` - **Asset Name:** `training_console_model.png` - **Description:** 512Γ—512 stylized grayscale sprite of a holo‐console (flat sprite) with cyan emissive accents (for real‐time data display). - **File Format:** PNG