Fill texture and tilemap collision only where it is being edited
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:
1 parent
495d87847d
commit
f4cc681df4
5 files changed
+140
-29
No files matched your search
@@ -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;
|
||||
|
||||
Reference in new issue
Block a user