Skip to content

Shop "Glassy Ambient" restyle — design

Shop “Glassy Ambient” restyle — design

Section titled “Shop “Glassy Ambient” restyle — design”

Give the shop panel (ui/meta_shop_panel.gd) an ultra-modern “glassy neon” look — translucent glass-like cards over the same drifting neon glow backdrop already used on the start menu — without touching any other menu/panel in the game.

Chris asked to try a different neon theme for the shop, explicitly wanting a modern “glassy” feel. Three visual directions were explored by generating concept mockups from the live shop screenshot via Gemini web (frosted glass, Apple-style “Liquid Glass”, and a sharper “Holo HUD” look). Chris picked the lowest-risk direction — closest to the current look, translucent card fills over soft ambient glow orbs — and confirmed:

  • Scope is the shop panel only. Start menu, pause menu, level-up picker, results screen, and secondary overlays (codex, weapon detail, drone bay, ship config) are unaffected.
  • The shop should reuse the SAME drifting glow-blob backdrop already on the start menu (StartMenu._Backdrop), not a new/different background effect.
  • ui/start_menu.gd carries a documented “no glassmorphism” ban from an earlier design pass (lines 10-11). That ban is scoped to the start menu’s own look and is NOT being reversed — the shop is a deliberate, separate exception. The start menu’s comment and look are left untouched.
  • No real backdrop-blur shader (SCREEN_TEXTURE). The “glass” read comes from genuine translucency over an already-soft, blurry-looking backdrop, not literal blur — cheaper, and matches the lowest-risk concept Chris picked over the two heavier “Liquid Glass” / “Holo HUD” options.
  • No changes to ui/start_menu.gd’s visual look, its “no glassmorphism” comment, or any other panel/menu.
  • No changes to ui/tokens.gd or ui/theme/neon_theme.gd (the shop already builds its own card styleboxes independently via _card_box(); this stays true).

1. Extract NeonBackdrop as a shared, reusable component

Section titled “1. Extract NeonBackdrop as a shared, reusable component”

ui/start_menu.gd currently defines a private inner class _Backdrop extends Control (lines 391-437): a tinted near-black ColorRect base plus 5 additive, slowly-drifting Sprite2D glow blobs (using the shared GlowTexture), each with a gentle breathing scale. It’s instantiated once via add_child(_Backdrop.new()) in StartMenu._ready().

Move this class, verbatim, into a new file ui/neon_backdrop.gd as class_name NeonBackdrop extends Control. StartMenu._ready() changes its one call site to add_child(NeonBackdrop.new()) and the inner class is deleted from start_menu.gd — a pure extraction, zero behavior change on the start menu.

ui/meta_shop_panel.gd._ready() currently creates _dim, a flat opaque-ish ColorRect (Color(0.0, 0.0, 0.02, 0.72)) as the first child — it exists purely to darken whatever screen was open behind the shop (start menu / pause menu / results), since the shop’s CanvasLayer sits above all of them (layer = 80).

Replace _dim’s construction with NeonBackdrop.new(), added as the first child in exactly the same place. NeonBackdrop’s own base ColorRect is fully opaque (alpha 1.0), which is a step up from _dim’s 72%-alpha near-black fill — the shop now fully occludes whatever was behind it instead of letting ~28% bleed through. This is a deliberate, desirable side effect (it matches the start menu’s own full-occlusion behavior and reads cleaner), not a regression. NeonBackdrop’s root Control already sets mouse_filter = Control.MOUSE_FILTER_STOP, preserving _dim’s click-absorbing behavior. The field can keep its existing name or be renamed to _backdrop for clarity (no test references _dim by name, so this is a free rename).

_card_box(accent: Color, fill: float) -> StyleBoxFlat (meta_shop_panel.gd:622) is the single function that styles every card in every shop view (root category tiles AND category upgrade-list rows share it via _make_card). Today:

sb.bg_color = Color(0.04, 0.05, 0.09, 0.97).lerp(Color(accent.r, accent.g, accent.b, 0.97), fill)

Both ends of the lerp sit at alpha 0.97 — cards read as solid, opaque boxes regardless of fill. Change both alphas to a translucent value (~0.55-0.6, exact number tuned by eye against the real backdrop) so the drifting glow blobs are genuinely visible through the card fill. The border (accent, 2px), corner radius (12px), and the existing accent-tinted glow shadow (shadow_color/shadow_size) are unchanged — that shadow already reads as a neon glow; it just needed something translucent to sit over to read as “glass” rather than “solid box with a rim light.”

This single change point covers root tiles, Drones sub-category tiles, and every upgrade-list row, matching Chris’s “just the shop, but all of it” scope.

  • New tests/test_neon_backdrop.gd: a light structural smoke test on the extracted NeonBackdrop (base child + blob count present after _ready), matching the level of testing _Backdrop had before extraction (none) — the drift math is a pure visual animation, not sim/determinism-adjacent, so no property tests are warranted.
  • tests/test_meta_shop_panel.gd / tests/test_meta_shop.gd: expected to need no changes (neither references _dim by name); re-run to confirm.
  • Full suite + boot-check + determinism baseline re-verified per the standard bh-dev-chunk ritual — this is a render/UI-only change, so the determinism baseline is expected to hold byte-identical by construction (no /sim files touched).
  • Visual verification via the existing marketing/capture/_shot.gd harness (render the shop panel into a SubViewport, screenshot, delete the harness) before merging — waiting out the card entrance-tween per the project’s documented capture gotcha (~0.5-0.7s for a 4-card root view).