ludic/screen-fill_rectangle.html
2026-09-17 22:10:03 +00:00

50 lines
No EOL
3.3 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>Screen.fill_rectangle — Ludic</title>
<meta name="description" content="Draw a solid, filled rectangle at a pixel position.">
<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="ns-screen.html">Screen — drawing</a> <span>›</span> <span class="here">Screen.fill_rectangle</span></div>
<div class="item-head">
<span class="kind-badge kind-method">method</span>
<h1 id="top">Screen.fill_rectangle</h1>
</div>
<code class="sig">Screen.fill_rectangle(x, y, width, height, color)</code>
<div class="desc"><p>Draws a solid block of color from the top-left corner <code>(x, y)</code> spanning <code>width</code> by <code>height</code> pixels. This is the workhorse for drawing tiles, sprites-from-primitives, health bars, and background panels, since a Ludic game paints every pixel itself rather than loading image assets. Coordinates are in pixels measured from the top-left of the screen, so multiply a grid <code>column</code>/<code>row</code> by your tile size to place things on a board. Parts of the rectangle that fall outside the framebuffer are simply clipped.</p></div>
<div class="params"><h2>Parameters</h2><div class="param" id="param-x"><code class="pname">x</code><span class="pdesc">the left edge, in pixels from the left of the screen</span></div><div class="param" id="param-y"><code class="pname">y</code><span class="pdesc">the top edge, in pixels from the top of the screen</span></div><div class="param" id="param-width"><code class="pname">width</code><span class="pdesc">the rectangle width in pixels</span></div><div class="param" id="param-height"><code class="pname">height</code><span class="pdesc">the rectangle height in pixels</span></div><div class="param" id="param-color"><code class="pname">color</code><span class="pdesc">the fill color, e.g. a <code>Color.*</code> name or a <code>0xRRGGBB</code> literal</span></div></div>
<div class="examples"><h2>Example</h2><pre data-lang="ludic">program FilledTiles {
property Position { column: int = 0, row: int = 0 }
model Player { Position }
const TILE_SIZE: int = 16
handler SpawnPlayer phase Start {
spawn Player { Position { column: 4, row: 3 } }
}
handler DrawWorld phase Render {
Screen.clear(Color.MidnightBlue)
for (Position) in query [Position, {Player}] {
Screen.fill_rectangle(
x: Position.column * TILE_SIZE,
y: Position.row * TILE_SIZE,
width: TILE_SIZE,
height: TILE_SIZE,
color: Color.LimeGreen)
}
Screen.show()
}
}</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>