Styling & Overlay

Styling & Overlay

This page covers layout, sizing, and layering patterns for a React overlay that sits on top of RPG Maker MZ’s canvas.

Overlay container

• The plugin injects a container element (id root by default) and places it above the game canvas.

• Recommended sizing to avoid scrollbars and off‑by‑one overflow:

  html, body { margin: 0; height: 100%; }
  #root {
    position: fixed; /* pin to viewport */
    inset: 0;        /* top/right/bottom/left: 0 */
    overflow: hidden; /* prevent child overflow from creating page scrollbars */
    box-sizing: border-box;
  }

Z‑index

• Controlled by the plugin parameter zIndex (default 100).

• Increase if you add other top‑level overlays (e.g., debug HUDs) that might overlap.

Pointer events

• Let React UI handle input when it is visible; when hidden, events fall through to MZ.

• If you build transparent overlays, consider pointer-events: none on non‑interactive layers.

Viewport units and min‑height

• Avoid 100vh for full‑screen panels; prefer height: 100% inside the overlay to match the canvas size.

• If you must use vh, consider min(100vh, 100%) to prevent overflow on some platforms.

Typography and scaling

• NW.js uses Chromium; pick web fonts that bundle well and test on your target OS.

• For pixel‑perfect look, use image-rendering: pixelated on sprite‑like assets.

Transitions

• Use CSS transitions for UI entrance/exit; the plugin will keep the overlay mounted.

• Prefer opacity/transform transitions; avoid layout thrash (height/width changes) on large containers.

Debugging layout

• Temporarily outline elements to identify overflow:

  #root { outline: 1px solid magenta; }
  #root * { outline: 1px dashed rgba(255,0,0,.25); }