meleki/feuerwerk
1
0 Fork 0
Code Issues 33 Actions Projects 1 Wiki Activity

Let a tilemap layer sort its rows by Y with the objects (#228)

Browse Source 
A tilemap layer was one piece in the draw order, so a figure stood
either in front of a whole layer of trees or behind all of it. For a
top-down game the trees in front of the figure's feet have to cover
it and the ones behind must not.

- A new "Sort by Y" box under the layer list sets `sortByY` on the
  painted layer. Every change is its own undo step.
- Such a layer comes as one draw slot per row. On its `z`, the rows
  and all objects on that `z` are sorted by where they stand: the
  bottom of an object's box, the bottom of a row. Ties keep the
  hierarchy order, and other `z` values are untouched.
- A layer drawn as one piece and the map's own node stay behind the
  sorted ones on the same `z`, since neither has a single place to
  stand. Ground belongs on a lower `z` or stays unsorted.
- A new tile property "Sort offset" (whole rows, -16 to 16) lets a
  crown sort with the trunk below it.
- `TilemapField` draws a container per row for such a layer, and
  picking takes the row into account, so a click picks what is drawn
  in front. Scene view, game view and play share the same rule.

Limits: on a rotated map "down" is world Y. A layer sorted by Y costs
about one draw call per row and tile instead of one per tile.

Tests:
- ./check.sh: 160 files, 2350 tests, CHECK EXIT 0 (before 2340).
- 10 new unit tests in tests/viewport/sort-by-y.test.ts.
- e2e 39-43: ALL PASSED, 148 checks. New check 40p-iii ticks the box
  and finds the slot of row 0, undo brings back the whole layer.
- Counter checks: without the Y sort 5 unit tests fail, with the
  offset ignored 5, with no row in picking 1. If TilemapField draws
  no rows, exactly 40p-iii fails in e2e.
- The e2e sum in the README is 1378, counted, not yet seen in CI.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
This commit is contained in:
adminandClaude Opus 5.5 committed 2026-09-24 19:32:37 +02:00
1 parent ffb5bbe039
commit 50854389bb
16 files changed
+467 -51
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

src/viewport/tilemap.ts
+45 -28
View File
@@ -6,7 +6,8 @@
*/
import { Container, Mesh, MeshGeometry, type Texture } from 'pixi.js';
import { pictureIndexAt, type TilePicture } from '../core/model/tile';
import { cellOrigin, tilemapTileSize } from '../core/model/tilemap';
import { cellOrigin, type TileDraw, tilemapTileSize } from '../core/model/tilemap';
import { layerRows } from './drawOrder';
import type { DrawItem, TilemapTile } from './items';
import { placeNode } from './symbols';
import type { TextureLibrary } from './TextureLibrary';
@@ -30,6 +31,7 @@ export function layerAlpha(layerId: string, focus: LayerFocus | null): number {
/**
* One container per layer rather than one per map: each layer has a `z` of its own (#174) and is
* sorted in among the other objects on its own – where is the viewport's call, not this one's.
* A layer sorted by Y has one container per row instead (#228), keyed like its draw slot.
*/
export class TilemapField {
private readonly layers = new Map<string, Container>();
@@ -49,9 +51,9 @@ export class TilemapField {
for (const layer of this.layers.values()) layer.visible = shown;
}
/** The container a layer draws into; null for a layer the last sync did not draw. */
layerContainer(layerId: string): Container | null {
return this.layers.get(layerId) ?? null;
/** The container a layer, or one row of it, draws into; null for one the last sync did not draw. */
layerContainer(layerId: string, row: number | null = null): Container | null {
return this.layers.get(rowKey(layerId, row)) ?? null;
}
/**
@@ -67,27 +69,37 @@ export class TilemapField {
const alive = new Set<string>();
const aliveLayers = new Set<string>();
for (const layer of draw?.layers ?? []) {
aliveLayers.add(layer.id);
// Each layer sits under a node of its own carrying the map's transform, so that is applied
// once per layer rather than baked into every vertex.
const container = this.layerFor(item.id, layer.id);
placeNode(container, item.m);
const parts: [number | null, TileDraw[]][] =
draw && layer.sortByY ? [...layerRows(draw, layer)] : [[null, layer.tiles]];
const alpha = layerAlpha(layer.id, focus);
if (alpha === 0) continue;
for (const [tileId, tiles] of groupByTile(layer.tiles)) {
const source = draw?.tiles.get(tileId);
const picture = source && pictureNow(source, now);
const texture = picture ? textures.get(picture.ref) : null;
if (!source || !picture || !texture) continue;
if (source.info.pictures.length > 1) this.animated = true;
const key = `${layer.id}|${tileId}`;
alive.add(key);
const { positions, uvs, indices } = tileMesh(tiles, tile, origin, sheetOf(source, picture, texture));
const mesh = this.meshFor(key, new MeshGeometry({ positions, uvs, indices }), texture);
// Per mesh rather than per layer: the meshes of one layer never overlap, so fading each
// one looks the same as fading the layer as a whole.
mesh.alpha = alpha;
drawn.push({ layer: container, mesh });
for (const [row, cells] of parts) {
const part = rowKey(layer.id, row);
aliveLayers.add(part);
// Each part sits under a node of its own carrying the map's transform, so that is applied
// once per part rather than baked into every vertex.
const container = this.layerFor(item.id, part);
placeNode(container, item.m);
if (alpha === 0) continue;
for (const [tileId, tiles] of groupByTile(cells)) {
const source = draw?.tiles.get(tileId);
const picture = source && pictureNow(source, now);
const texture = picture ? textures.get(picture.ref) : null;
if (!source || !picture || !texture) continue;
if (source.info.pictures.length > 1) this.animated = true;
const key = `${part}|${tileId}`;
alive.add(key);
const { positions, uvs, indices } = tileMesh(
tiles,
tile,
origin,
sheetOf(source, picture, texture),
);
const mesh = this.meshFor(key, new MeshGeometry({ positions, uvs, indices }), texture);
// Per mesh rather than per layer: the meshes of one layer never overlap, so fading each
// one looks the same as fading the layer as a whole.
mesh.alpha = alpha;
drawn.push({ layer: container, mesh });
}
}
}
for (const [key, mesh] of this.meshes) {
@@ -106,15 +118,15 @@ export class TilemapField {
this.drawCalls = drawn.length;
}
private layerFor(objectId: string, layerId: string): Container {
let layer = this.layers.get(layerId);
private layerFor(objectId: string, part: string): Container {
let layer = this.layers.get(part);
if (!layer) {
layer = new Container();
layer.eventMode = 'none';
// The draw order reports it by this, next to the object's own id.
layer.label = `${objectId}#${layerId}`;
layer.label = `${objectId}#${part}`;
layer.visible = this.shown;
this.layers.set(layerId, layer);
this.layers.set(part, layer);
}
return layer;
}
@@ -140,6 +152,11 @@ export class TilemapField {
}
}
/** A whole layer is keyed by its id, as before; a row of a layer sorted by Y by id and row. */
function rowKey(layerId: string, row: number | null): string {
return row === null ? layerId : `${layerId}#${row}`;
}
/**
* The block this tile shows right now. A quarter is cut from it by uvs rather than by the
* texture library, so what is wanted here is the picture of the step and nothing finer.