Window

<Window> is a window over the game that keeps playing behind it, such as a bag, a character sheet or a shop. It opens at the place of the slot the game names, over whatever Panel stands there, and the player drags it by its title bar to anywhere on the screen. The engine keeps where each window was left on this device, so it opens there next time.

Its props are in WindowProps.

import { useState } from "react";
import { Button, Slot, Text, Window } from "@spawnite/engine";

export function BagButton() {
    const [open, setOpen] = useState(false);

    return (
        <>
            <Button onPress={() => setOpen(!open)}>Bag</Button>
            <Window
                id="bag"
                title="Bag"
                open={open}
                onClose={() => setOpen(false)}
                slot={Slot.Left}
                className="w-72"
            >
                <Text>Three red potions and a rusty key.</Text>
            </Window>
        </>
    );
}

The window draws its title and a close button in a title bar, on the menus’ solid pane, darker than a HUD Panel’s glass, so its rows read over a bright scene with nothing dimmed behind it. Its children are only what it holds, and className restyles the pane. Import Window from the engine in every file that draws one: without the import, TypeScript reads the name as the browser’s own Window type and reports that it cannot be used as a JSX component.

Moving and keeping

The player drags a window by its title bar. On release, the engine keeps its place under the window’s id, in the browser’s storage under the game’s name, beside the camera and the quality level. A layout belongs to the screen it was made on, so a phone and a laptop each keep their own. A window stays wholly on the screen: a drag past an edge stops at it, and when the browser window shrinks, a window moves back in, as World of Warcraft keeps its frames on screen. A window larger than the screen keeps its top left corner on it.

slot is the creator’s starting place, Slot.Center by default: against the slot’s edges, 12 pixels in, or centred on the axis the slot centres. A window stands free of the slot grid, so every open window stands in one order, front to back. movable={false} keeps a window in its slot, for one whose place is part of the game’s layout.

The engine’s settings show a Window layout row on the Interface tab once the player has moved a window. Its Reset puts every window back in its slot. A game hides the row with <HideSetting setting="windowLayout" />.

Several at once

Several windows open at once. A press anywhere on a window brings it to the front, and Escape closes the window in front, then the one behind it, before it opens the engine’s menu, as World of Warcraft’s Escape does.

On a phone

On a touch screen, a window shows alone in the middle of the screen over a dimmed backdrop, because a phone’s screen fits one. Opening a second window closes the first through its onClose, and a press on the dimmed backdrop closes the window. While something is dragged out of the window, such as a potion toward the hotbar, the window fades and lets the pointer through, so the target beneath shows.

What other engines do

Godot’s Window node is the closest: an embedded window that the player moves by its title bar. Roblox puts a UIDragDetector on a Frame. A Unity or Unreal game writes its own drag handler. World of Warcraft and Final Fantasy XIV let the player move every window and keep the layout, and the engine does the same per device.

Cost per frame: none. A moving window renders once for each pointer move.