Fill texture and tilemap collision only where it is being edited
game-maker / gate (push) Successful in 2m57s
game-maker / suite (push) Failing after 9m24s

The faint fill on every frame outline and on every tilemap made the
scene and the texture editor look green all over. Like the collider
before, the fill now shows only on what is selected, and a bit
stronger, so it marks the thing being worked on.

- Texture collision: all frame outlines stay visible. Only the
  outlines of the selected frame are filled, at alpha 0.3 instead of
  0.15 on every frame.
- Tilemap: the outline still shows where the whole map blocks. The
  fill appears only while the tilemap alone is selected, and only for
  the part the layer chosen in the panel adds. Solid is 0.3 and
  one-way 0.15, before 0.12 and 0.06 on every map.
- New query layerSolids(layerId) in items.ts. It builds the same
  solids for one layer and runs only for the selected map.
- The small landing wedge on one-way edges stays filled. It belongs
  to the edge marker, not to the area.

Not covered by tests: the texture canvas and the scene view wiring
that picks the map and the layer. Neither was looked at in a browser.

Tests:
- ./check.sh: 159 files, 2337 tests, CHECK EXIT 0 (before 2334)
- e2e 1-17,39-43: ALL PASSED, 668 checks
- 3 new unit tests in tests/viewport/tilemap-fill.test.ts
- Counter-check: with layerSolids ignoring the layer, exactly the
  layer test fails. Original restored, checked with cmp.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
This commit is contained in:
adminandClaude Opus 5.5 committed 2026-09-24 12:23:13 +02:00
1 parent 495d87847d
commit f4cc681df4
5 files changed
+140 -29

No files matched your search

+17 -7
View File
@@ -31,7 +31,7 @@ import {
withCornerMoved,
withoutCorner,
} from '../polygonEdit';
import { dashedLine } from '../../viewport/symbols';
import { COLLIDER_FILL_ALPHA, dashedLine } from '../../viewport/symbols';
import { textureLibrary } from '../../viewport/TextureLibrary';
import { FramePreview } from '../framePreview';
import type { EditorState } from '../state';
@@ -604,7 +604,7 @@ export class TextureCanvas extends SheetCanvas<TextureAsset> {
this.sheet.clear();
const others = frames.filter((f) => f.id !== selectedId);
for (const frame of others) this.drawFrame(this.sheet, view, frame, false);
for (const frame of others) this.drawOutlines(this.sheet, view, frame, false);
for (const frame of others) this.drawOutlines(this.sheet, view, frame, false, false);
this.sheetBuilds += 1;
this.sheetOutlines = others.reduce((n, f) => n + (f.collision?.length ?? 0), 0);
}
@@ -612,7 +612,7 @@ export class TextureCanvas extends SheetCanvas<TextureAsset> {
const selected = frames.find((f) => f.id === selectedId);
if (selected) {
this.drawFrame(this.overlay, view, selected, true);
this.drawOutlines(this.overlay, view, selected, this.collision);
this.drawOutlines(this.overlay, view, selected, this.collision, true);
if (!this.collision) {
this.drawBorders(view, selected);
this.drawHandles(view, selected);
@@ -655,17 +655,27 @@ export class TextureCanvas extends SheetCanvas<TextureAsset> {
/**
* A frame's collision outlines (#141), always shown so one sees which frames block with them; on
* the edited frame the active outline is drawn heavier and every corner of every outline gets a
* handle. An outline that is no polygon is drawn in red.
* handle. An outline that is no polygon is drawn in red. Only the selected frame's outlines are
* `filled`, so the tint does not lie over the art of every other frame.
*/
private drawOutlines(g: Graphics, view: SheetView, frame: TextureFrame, edited: boolean): void {
private drawOutlines(
g: Graphics,
view: SheetView,
frame: TextureFrame,
edited: boolean,
filled: boolean,
): void {
const outlines = frame.collision ?? [];
const active = edited ? this.activeOutline(frame, outlines) : -1;
for (const [index, points] of outlines.entries()) {
const screen = points.map((p) => imageToLocal(view, frame.x + p.x, frame.y + p.y));
const color = isPolygon(points) ? Theme.colors.collider : Theme.colors.danger;
const width = index === active ? 2 : 1;
if (screen.length >= 3) g.poly(screen, true).fill({ color, alpha: 0.15 }).stroke({ width, color });
else if (screen.length === 2)
if (screen.length >= 3) {
g.poly(screen, true);
if (filled) g.fill({ color, alpha: COLLIDER_FILL_ALPHA });
g.stroke({ width, color });
} else if (screen.length === 2)
g.moveTo(screen[0]!.x, screen[0]!.y).lineTo(screen[1]!.x, screen[1]!.y).stroke({ width: 2, color });
if (!edited) continue;
const half = HANDLE_SIZE / 2;