ludic/phase-overlay.html
2026-09-17 22:10:03 +00:00

53 lines
No EOL
2.7 KiB
HTML
Raw Permalink Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Overlay — Ludic</title>
<meta name="description" content="The HUD pass — runs after Render and after every engine-owned drawing system.">
<link rel="stylesheet" href="base.css">
<link rel="stylesheet" href="docs.css">
</head>
<body>
<header class="nav"><div class="wrap nav-in"><a class="brand" href="index.html"><span class="logo">L</span> Ludic</a><button class="nav-toggle" aria-label="Toggle menu" aria-expanded="false">☰</button><nav class="nav-links"><a href="index.html">Home</a><a href="api.html">API Reference</a><a class="nav-cta" href="https://git.workshopsoft.io/workshopsoft/ludic">Source ↗</a></nav></div></header>
<main class="wrap item">
<div class="crumbs"><a href="api.html">API Reference</a> <span>›</span> <a href="api.html#phases">Phases</a> <span>›</span> <span class="here">Overlay</span></div>
<div class="item-head">
<span class="kind-badge kind-phase">phase</span>
<h1 id="top">Overlay</h1>
</div>
<code class="sig">phase Overlay</code>
<div class="desc"><p><code>Overlay</code> runs after <code>Render</code> and after every engine-owned drawing system (sprites, lights, the scene's <code>shows</code> menu), so a <code>handler … phase Overlay</code> paints on top of the finished world: health bars, score, prompts, a boss bar. With <code>@ClearColor</code> the engine owns the clear and the present, so an <code>Overlay</code> handler only draws — no <code>Screen.clear</code>, no <code>Screen.show</code>. Like <code>Render</code>, it should read the world and never change it.</p></div>
<div class="examples"><h2>Example</h2><pre data-lang="ludic">program OverlayExample {
property Position { column: int = 0, row: int = 0 }
model Player { Position }
const TILE_SIZE: int = 16
var score: int = 0
handler PlacePlayer phase Start {
spawn Player { Position { column: 5, row: 6 } }
}
@ClearColor(Color.MidnightBlue)
handler DrawWorld phase Render {
for (current_position) in query [Position, {Player}] {
Screen.fill_rectangle(
x: current_position.column * TILE_SIZE,
y: current_position.row * TILE_SIZE,
width: TILE_SIZE, height: TILE_SIZE, color: Color.LimeGreen)
}
}
handler DrawHud phase Overlay {
Screen.draw_text(x: 6, y: 4, text: "SCORE", color: Color.White, scale: 1)
Screen.draw_number(x: 52, y: 4, value: score, color: Color.Gold, scale: 1)
}
}</pre></div>
<a class="back" href="api.html">← All symbols</a>
</main>
<script src="ludic-highlight.js"></script>
<script>Ludic.highlightAll(); Ludic.installCards(); Ludic.flashTarget();</script>
</body></html>