Separating 2D World And Canvas UI: Fix Scale And Depth

by Jule 55 views
Separating 2D World And Canvas UI: Fix Scale And Depth

Le setup actuel de navigation (scènes #33 et #37) empile tout dans un Canvas Screen Space Overlay 1080x1920, mais mélange le HUD avec le monde 2D, créant des bugs visuels et de rendu.

Core fix: Split responsibilities.

  • Canvas Screen Space Overlay: pure UI layer (NavBar, InfoArea, ModalLayer).
  • Monde 2D : rendu par camĂ©ra ortho, gĂ©rĂ© via Sorting Layers, avec unitĂ©s en vraies Ă©chelles (1 - 2 unitĂ©s), pas x100.

Cette séparation clarifie la profondeur visuelle et améliore performance. Les personnages doivent désormais apparaître à l’échelle naturelle, non déformés par scaling artificiel.

The hidden pitfalls:

  • Canvas as HUD: Mixing UI and world content breaks layering - sorting layers fail when sprites live inside Canvas.
  • Scale delusion: x100 scaling warps proportions; players feel disconnected from game space.
  • HUD contamination: Combat HUD panels inside Canvas cause z-order chaos, breaking immersion.

Safety and etiquette: Never render 2D gameplay elements inside Canvas UI - use dedicated camera layers. Always validate depth order to avoid visual glitches.

What to do now:

  1. Isolate NavBar, InfoArea, and ModalLayer into their own Canvas, stripping GameArea.
  2. Reconfigure world rendering with Sorting Layers, preserving true 2D camera perspective.
  3. Rewrite UIScreen scripts to support content layers, not just UI elements.
  4. Update SetupNavigationSceneEditor.cs to switch cleanly between HUD and content layers.
  5. Test camera framing - ensure world layers properly occlude behind HUD.

Is your roguelite’s 2D layer breathing? Time to separate the screen into head - where UI stays clean, and world breathes real.

Reflect: When your HUD doesn’t clash with depth, players feel fully inside the game world.