@funpixel/tools 0.0.0-stage → 0.1.1

package/dist/look/player.js

@@ -0,0 +1,32 @@
+export const PLAYER_WORDS = 'player|hero|avatar';
+const escape = (s) => s.replace(/[.*+?^${}()|[\]\\]/g, '\\$&');
+export function playerOf(manifest) {
+    const set = manifest?.actors?.player;
+    if (typeof set === 'string' && set.trim())
+        return { pattern: set.trim(), from: 'actors', name: set.trim() };
+    const checks = Array.isArray(manifest?.checks) ? manifest.checks : [];
+    const counts = new Map();
+    for (const c of checks) {
+        const s = typeof c?.subject === 'string' ? c.subject.trim() : '';
+        if (s && !/^[#.[]/.test(s))
+            counts.set(s, (counts.get(s) ?? 0) + 1);
+    }
+    const subject = [...counts].sort((a, b) => b[1] - a[1])[0]?.[0];
+    if (subject)
+        return { pattern: `^${escape(subject)}$`, from: 'subject', name: subject };
+    return { pattern: PLAYER_WORDS, from: 'default', name: null };
+}
+export function playerSaid(p) {
+    if (p.from === 'actors')
+        return `"${p.name}" (funpixel.json actors.player)`;
+    if (p.from === 'subject')
+        return `"${p.name}" (the checks' subject; funpixel.json has no actors.player)`;
+    return `the usual words (${PLAYER_WORDS})`;
+}
+export function playerHint(p) {
+    if (p.from === 'actors')
+        return `no node is labelled "${p.name}": fix funpixel.json "actors": { "player" } to the player's Pixi .label / Three .name (the checks' "subject" names the same node)`;
+    if (p.from === 'subject')
+        return `the checks' subject "${p.name}" stands in for the player here; if the player is another node, set funpixel.json "actors": { "player": "<its label>" }`;
+    return 'name the player node player|hero|avatar, or set funpixel.json "actors": { "player": "<its label>" } — a check\'s "subject" is read as the player too when actors.player is unset';
+}

package/dist/look/png.js

@@ -0,0 +1,117 @@
+import { deflateSync, inflateSync } from 'node:zlib';
+const SIGNATURE = Buffer.from([0x89, 0x50, 0x4e, 0x47, 0x0d, 0x0a, 0x1a, 0x0a]);
+const CHANNELS = { 0: 1, 2: 3, 3: 1, 4: 2, 6: 4 };
+function paeth(a, b, c) {
+    const p = a + b - c, pa = Math.abs(p - a), pb = Math.abs(p - b), pc = Math.abs(p - c);
+    return pa <= pb && pa <= pc ? a : pb <= pc ? b : c;
+}
+export function decodePng(buf) {
+    const b = Buffer.from(buf.buffer, buf.byteOffset, buf.byteLength);
+    if (!b.subarray(0, 8).equals(SIGNATURE))
+        throw new Error('not a PNG');
+    let width = 0, height = 0, depth = 0, type = 0, interlace = 0;
+    let palette = null, alpha = null;
+    const idat = [];
+    for (let at = 8; at < b.length;) {
+        const len = b.readUInt32BE(at), kind = b.toString('latin1', at + 4, at + 8), body = b.subarray(at + 8, at + 8 + len);
+        if (kind === 'IHDR') {
+            width = body.readUInt32BE(0);
+            height = body.readUInt32BE(4);
+            depth = body[8];
+            type = body[9];
+            interlace = body[12];
+        }
+        else if (kind === 'PLTE')
+            palette = body;
+        else if (kind === 'tRNS')
+            alpha = body;
+        else if (kind === 'IDAT')
+            idat.push(body);
+        else if (kind === 'IEND')
+            break;
+        at += 12 + len;
+    }
+    const channels = CHANNELS[type];
+    if (!channels || depth > 8 || (depth < 8 && type !== 0 && type !== 3))
+        throw new Error(`PNG colour type ${type} at ${depth} bits is not read here`);
+    if (interlace)
+        throw new Error('interlaced PNG is not read here');
+    const raw = inflateSync(Buffer.concat(idat));
+    const bpp = Math.max(1, (channels * depth) >> 3);
+    const stride = Math.ceil((width * channels * depth) / 8);
+    const rows = Buffer.alloc(stride * height);
+    let prev = Buffer.alloc(stride);
+    for (let y = 0; y < height; y++) {
+        const filter = raw[y * (stride + 1)], src = raw.subarray(y * (stride + 1) + 1, (y + 1) * (stride + 1));
+        const row = rows.subarray(y * stride, (y + 1) * stride);
+        for (let x = 0; x < stride; x++) {
+            const a = x >= bpp ? row[x - bpp] : 0, up = prev[x], c = x >= bpp ? prev[x - bpp] : 0;
+            row[x] = (src[x] + (filter === 1 ? a : filter === 2 ? up : filter === 3 ? (a + up) >> 1 : filter === 4 ? paeth(a, up, c) : 0)) & 0xff;
+        }
+        prev = row;
+    }
+    const data = new Uint8Array(width * height * 4);
+    const sample = (row, i) => {
+        if (depth === 8)
+            return row[i];
+        const bit = i * depth;
+        return (row[bit >> 3] >> (8 - depth - (bit & 7))) & ((1 << depth) - 1);
+    };
+    const scale = depth < 8 && type === 0 ? 255 / ((1 << depth) - 1) : 1;
+    for (let y = 0; y < height; y++) {
+        const row = rows.subarray(y * stride, (y + 1) * stride);
+        for (let x = 0; x < width; x++) {
+            const o = (y * width + x) * 4;
+            if (type === 3) {
+                const i = sample(row, x);
+                data[o] = palette?.[i * 3] ?? 0;
+                data[o + 1] = palette?.[i * 3 + 1] ?? 0;
+                data[o + 2] = palette?.[i * 3 + 2] ?? 0;
+                data[o + 3] = alpha && i < alpha.length ? alpha[i] : 255;
+            }
+            else if (type === 0 || type === 4) {
+                const g = Math.round(sample(row, x * channels) * scale);
+                data[o] = data[o + 1] = data[o + 2] = g;
+                data[o + 3] = type === 4 ? row[x * 2 + 1] : 255;
+            }
+            else {
+                data[o] = row[x * channels];
+                data[o + 1] = row[x * channels + 1];
+                data[o + 2] = row[x * channels + 2];
+                data[o + 3] = type === 6 ? row[x * 4 + 3] : 255;
+            }
+        }
+    }
+    return { width, height, data };
+}
+const CRC = new Int32Array(256).map((_, n) => {
+    let c = n;
+    for (let k = 0; k < 8; k++)
+        c = c & 1 ? 0xedb88320 ^ (c >>> 1) : c >>> 1;
+    return c;
+});
+function crc32(b) {
+    let c = -1;
+    for (const byte of b)
+        c = CRC[(c ^ byte) & 0xff] ^ (c >>> 8);
+    return (c ^ -1) >>> 0;
+}
+function chunk(kind, body) {
+    const head = Buffer.alloc(8);
+    head.writeUInt32BE(body.length, 0);
+    head.write(kind, 4, 'latin1');
+    const crc = Buffer.alloc(4);
+    crc.writeUInt32BE(crc32(Buffer.concat([head.subarray(4), body])), 0);
+    return Buffer.concat([head, body, crc]);
+}
+export function encodePng(img) {
+    const ihdr = Buffer.alloc(13);
+    ihdr.writeUInt32BE(img.width, 0);
+    ihdr.writeUInt32BE(img.height, 4);
+    ihdr[8] = 8;
+    ihdr[9] = 6;
+    const raw = Buffer.alloc((img.width * 4 + 1) * img.height);
+    for (let y = 0; y < img.height; y++)
+        Buffer.from(img.data.buffer, img.data.byteOffset + y * img.width * 4, img.width * 4).copy(raw, y * (img.width * 4 + 1) + 1);
+    return Buffer.concat([SIGNATURE, chunk('IHDR', ihdr), chunk('IDAT', deflateSync(raw)), chunk('IEND', Buffer.alloc(0))]);
+}

package/dist/look/readability.js

@@ -0,0 +1,100 @@
+export const READ_MIN_DELTA_E = 25;
+const lin = (c) => { const v = c / 255; return v <= 0.04045 ? v / 12.92 : ((v + 0.055) / 1.055) ** 2.4; };
+const f = (t) => (t > 216 / 24389 ? Math.cbrt(t) : (841 / 108) * t + 4 / 29);
+export function lab(r, g, b) {
+    const R = lin(r), G = lin(g), B = lin(b);
+    const x = f((0.4124 * R + 0.3576 * G + 0.1805 * B) / 0.95047);
+    const y = f(0.2126 * R + 0.7152 * G + 0.0722 * B);
+    const z = f((0.0193 * R + 0.1192 * G + 0.9505 * B) / 1.08883);
+    return [116 * y - 16, 500 * (x - y), 200 * (y - z)];
+}
+const dE = (p, q) => Math.hypot(p[0] - q[0], p[1] - q[1], p[2] - q[2]);
+const percentile = (xs, q) => { const s = [...xs].sort((a, b) => a - b); return s.length ? s[Math.min(s.length - 1, Math.floor(q * s.length))] : NaN; };
+const median = (xs) => percentile(xs, 0.5);
+const round1 = (n) => Math.round(n * 10) / 10;
+const hex = (c) => `#${c.map((v) => Math.round(v).toString(16).padStart(2, '0')).join('')}`;
+export const parseHex = (h) => {
+    const m = /^#?([0-9a-f]{6})$/i.exec(h.trim());
+    return m ? [0, 2, 4].map((i) => parseInt(m[1].slice(i, i + 2), 16)) : null;
+};
+function pixels(img, x0, y0, x1, y1, skip, max = 6000) {
+    const out = [];
+    const area = Math.max(1, (x1 - x0) * (y1 - y0));
+    const step = Math.max(1, Math.floor(Math.sqrt(area / max)));
+    for (let y = y0; y < y1; y += step) {
+        for (let x = x0; x < x1; x += step) {
+            if (skip(x, y))
+                continue;
+            const o = (y * img.width + x) * 4;
+            if (img.data[o + 3] === 0)
+                continue;
+            out.push([img.data[o], img.data[o + 1], img.data[o + 2]]);
+        }
+    }
+    return out;
+}
+const medianColour = (px) => [0, 1, 2].map((i) => median(px.map((p) => p[i])));
+export function boxContrast(img, box) {
+    const x0 = Math.max(0, Math.floor(box.x)), y0 = Math.max(0, Math.floor(box.y));
+    const x1 = Math.min(img.width, Math.ceil(box.x + box.w)), y1 = Math.min(img.height, Math.ceil(box.y + box.h));
+    if (x1 - x0 < 3 || y1 - y0 < 3)
+        return null;
+    const pad = Math.max(6, Math.round(0.35 * Math.max(x1 - x0, y1 - y0)));
+    const inside = (x, y) => x >= x0 && x < x1 && y >= y0 && y < y1;
+    const ring = pixels(img, Math.max(0, x0 - pad), Math.max(0, y0 - pad), Math.min(img.width, x1 + pad), Math.min(img.height, y1 + pad), inside);
+    const body = pixels(img, x0, y0, x1, y1, () => false);
+    if (ring.length < 8 || body.length < 4)
+        return null;
+    const groundRgb = medianColour(ring);
+    const ground = lab(...groundRgb);
+    const noise = Math.max(6, percentile(ring.map((p) => dE(lab(...p), ground)), 0.9));
+    const scored = body.map((p) => { const l = lab(...p); return { d: dE(l, ground), dl: Math.abs(l[0] - ground[0]) }; }).sort((a, b) => b.d - a.d);
+    const standing = scored.filter((s) => s.d > noise).length;
+    const figure = scored.slice(0, Math.max(1, standing, Math.round(scored.length * 0.1)));
+    return { delta_e: round1(median(figure.map((s) => s.d))), delta_l: round1(median(figure.map((s) => s.dl))), ground: hex(groundRgb) };
+}
+export function colourContrast(img, colour, tolerance = 12, reach = 6) {
+    const target = lab(...colour);
+    const near = (x, y) => {
+        const o = (y * img.width + x) * 4;
+        return dE(lab(img.data[o], img.data[o + 1], img.data[o + 2]), target) <= tolerance;
+    };
+    const step = Math.max(1, Math.floor(Math.sqrt((img.width * img.height) / 40_000)));
+    let hits = 0, seen = 0;
+    const ground = [];
+    for (let y = 0; y < img.height; y += step) {
+        for (let x = 0; x < img.width; x += step) {
+            seen++;
+            if (!near(x, y))
+                continue;
+            hits++;
+            for (const [dx, dy] of [[reach, 0], [-reach, 0], [0, reach], [0, -reach]]) {
+                const u = x + dx, v = y + dy;
+                if (u < 0 || v < 0 || u >= img.width || v >= img.height || near(u, v))
+                    continue;
+                const o = (v * img.width + u) * 4;
+                ground.push([img.data[o], img.data[o + 1], img.data[o + 2]]);
+            }
+        }
+    }
+    const share = hits / Math.max(1, seen);
+    if (share < 0.0005 || ground.length < 4)
+        return null;
+    const g = medianColour(ground), gl = lab(...g);
+    return { delta_e: round1(dE(target, gl)), delta_l: round1(Math.abs(target[0] - gl[0])), ground: hex(g), share: Math.round(share * 10000) / 10000 };
+}
+export function judgeRoles(measured, min = READ_MIN_DELTA_E) {
+    const out = [];
+    for (const role of ['player', 'threat']) {
+        const mine = measured.filter((m) => m.role === role);
+        if (!mine.length)
+            continue;
+        const de = median(mine.map((m) => m.contrast.delta_e));
+        const weakest = mine.reduce((a, b) => (b.contrast.delta_e < a.contrast.delta_e ? b : a));
+        out.push({
+            role, measured: mine.length, delta_e: round1(de), delta_l: round1(median(mine.map((m) => m.contrast.delta_l))),
+            weakest: { name: weakest.name, delta_e: weakest.contrast.delta_e }, pass: de >= min,
+        });
+    }
+    return out;
+}

package/dist/look/roles.js

@@ -0,0 +1,109 @@
+const VERDICTS = ['animated', 'slides', 'still'];
+const ENGINES = ['pixi', 'three', 'none'];
+const isRecord = (v) => typeof v === 'object' && v !== null && !Array.isArray(v);
+export function recordProblems(r) {
+    if (!isRecord(r))
+        return ['not a JSON object'];
+    const out = [];
+    const engine = r.engine;
+    if (typeof engine !== 'string' || !ENGINES.includes(engine))
+        out.push(`engine must be one of ${ENGINES.join(', ')}`);
+    const none = engine === 'none';
+    if (!Number.isInteger(r.samples) || r.samples < (none ? 0 : 1))
+        out.push(`samples must be an integer of at least ${none ? 0 : 1}`);
+    if (!Array.isArray(r.actors))
+        return [...out, 'actors must be a list'];
+    r.actors.forEach((a, i) => {
+        const at = `actor ${i + 1}`;
+        if (!isRecord(a) || typeof a.name !== 'string' || !a.name.trim() || typeof a.role !== 'string') {
+            out.push(`${at}: needs a name and a role`);
+            return;
+        }
+        const moved = a.moved_px, frames = a.frames;
+        if (typeof moved !== 'number' || !Number.isFinite(moved) || moved < 0)
+            out.push(`${at} (${a.name}): moved_px must be a finite number ≥ 0`);
+        if (!Number.isInteger(frames) || frames < 1)
+            out.push(`${at} (${a.name}): frames must be an integer ≥ 1`);
+        if (typeof a.pose !== 'boolean')
+            out.push(`${at} (${a.name}): pose must be true or false`);
+        if (typeof a.verdict !== 'string' || !VERDICTS.includes(a.verdict)) {
+            out.push(`${at} (${a.name}): verdict must be one of ${VERDICTS.join(', ')}`);
+            return;
+        }
+        if (typeof moved === 'number' && Number.isInteger(frames) && typeof a.pose === 'boolean') {
+            const expect = frames > 1 || a.pose ? 'animated' : moved > 2 ? 'slides' : 'still';
+            if (expect !== a.verdict)
+                out.push(`${at} (${a.name}): verdict ${a.verdict} disagrees with its numbers (${expect})`);
+        }
+    });
+    return out;
+}
+const section = (note, heading) => note.match(new RegExp(`^## ${heading}[^\\n]*\\n([\\s\\S]*?)(?=^## |(?![\\s\\S]))`, 'mi'))?.[1];
+const cells = (line) => line.trim().replace(/^\||\|$/g, '').split('|').map((c) => c.trim());
+const placeholder = (s) => !s || /<[^>]*>|^…$|^:?-+:?$/.test(s);
+export function intentOf(cell) {
+    const c = cell.toLowerCase().trim();
+    const first = c.match(/^[a-z]+/)?.[0];
+    if (first === 'moves' || first === 'animates' || first === 'still')
+        return first;
+    if (placeholder(c))
+        return null;
+    if (/\b(anim|pose|cycle|frames?|sheet|alive|breath|blink|bob)/.test(c))
+        return 'animates';
+    if (/\b(still|rests?|static|at rest|stationary|no motion|does not move|doesn't move)\b/.test(c))
+        return 'still';
+    if (/\b(mov|slid|walk|run|fl[iy]|fall|drift|chase|roll|swim|hop|jump)/.test(c))
+        return 'moves';
+    return null;
+}
+export function declaredActors(note) {
+    const table = section(note, 'Actors');
+    if (table === undefined)
+        return [];
+    const rows = table.split('\n').filter((l) => l.trim().startsWith('|')).map(cells);
+    const header = rows[0] ?? [];
+    const motion = header.findIndex((c) => /motion|moves?\b/i.test(c));
+    if (motion < 0)
+        return [];
+    const role = header.findIndex((c) => /role/i.test(c));
+    return rows.slice(1).flatMap((r) => {
+        const intent = intentOf(r[motion] ?? '');
+        if (placeholder(r[0] ?? '') || !intent)
+            return [];
+        return [{ name: r[0], role: role >= 0 ? r[role] ?? '' : '', motion: intent }];
+    });
+}
+const words = (s) => s.toLowerCase().replace(/\(.*?\)/g, ' ').match(/[a-z][a-z0-9]{2,}/g) ?? [];
+const base = (s) => s.toLowerCase().replace(/[\d_\-#.\s]+$/g, '');
+const sampledRole = (declared) => /player/i.test(declared) ? 'player' : /enem|threat|hazard|obstacle|foe/i.test(declared) ? 'threat' : /pick|collect|coin|reward|gem/i.test(declared) ? 'pickup' : '';
+function matches(d, sampled) {
+    const keys = words(d.name);
+    const byName = sampled.filter((s) => { const n = base(s.name); return n.length > 1 && keys.some((k) => n.includes(k) || k.includes(n)); });
+    if (byName.length)
+        return byName;
+    const role = sampledRole(d.role);
+    return role ? sampled.filter((s) => s.role === role) : [];
+}
+export function judgeMotion(record, declared, seconds = 1) {
+    const moving = declared.filter((d) => d.motion !== 'still');
+    if (record.engine === 'none' || record.samples < 1) {
+        return { defects: [], unobserved: [moving.length ? `motion of ${moving.map((d) => d.name).join(', ')} (no scene graph)` : 'motion (no scene graph)'] };
+    }
+    if (!declared.length)
+        return { defects: [], unobserved: ['motion by role (no Motion column in the design note\'s ## Actors table)'] };
+    const defects = [], unobserved = [];
+    for (const d of moving) {
+        const seen = matches(d, record.actors);
+        if (!seen.length) {
+            unobserved.push(`motion of ${d.name} (declared ${d.motion}; not found in the sample)`);
+            continue;
+        }
+        if (d.motion === 'moves' && seen.every((s) => s.verdict === 'still')) {
+            defects.push(`${d.name} is declared to move but stood still for ${seconds} s of play`);
+        }
+        else if (d.motion === 'animates' && !seen.some((s) => s.verdict === 'animated')) {
+            defects.push(`${d.name} is declared to animate but ${seen.some((s) => s.verdict === 'slides') ? 'only slid as one picture' : 'never changed picture or pose'} in ${seconds} s of play`);
+        }
+    }
+    return { defects, unobserved };
+}

package/dist/look/sheet.js

@@ -0,0 +1,104 @@
+import { boxContrast } from "./readability.js";
+export const NEUTRAL = [0x7a, 0x74, 0x6c];
+export const SHEET_SIZES = [24, 48, 96];
+const PAD = 12;
+export function trim(img) {
+    let x0 = img.width, y0 = img.height, x1 = -1, y1 = -1;
+    for (let y = 0; y < img.height; y++)
+        for (let x = 0; x < img.width; x++) {
+            if (img.data[(y * img.width + x) * 4 + 3] <= 8)
+                continue;
+            if (x < x0)
+                x0 = x;
+            if (x > x1)
+                x1 = x;
+            if (y < y0)
+                y0 = y;
+            if (y > y1)
+                y1 = y;
+        }
+    if (x1 < 0)
+        return null;
+    const width = x1 - x0 + 1, height = y1 - y0 + 1, data = new Uint8Array(width * height * 4);
+    for (let y = 0; y < height; y++)
+        data.set(img.data.subarray(((y0 + y) * img.width + x0) * 4, ((y0 + y) * img.width + x1 + 1) * 4), y * width * 4);
+    return { width, height, data };
+}
+export function crop(img, x, y, w, h) {
+    const x0 = Math.max(0, Math.floor(x)), y0 = Math.max(0, Math.floor(y));
+    const width = Math.max(0, Math.min(img.width - x0, Math.floor(w))), height = Math.max(0, Math.min(img.height - y0, Math.floor(h)));
+    const data = new Uint8Array(width * height * 4);
+    for (let r = 0; r < height; r++)
+        data.set(img.data.subarray(((y0 + r) * img.width + x0) * 4, ((y0 + r) * img.width + x0 + width) * 4), r * width * 4);
+    return { width, height, data };
+}
+export function toHeight(img, h) {
+    const height = Math.max(1, Math.round(h)), width = Math.max(1, Math.round((img.width * height) / img.height));
+    const data = new Uint8Array(width * height * 4), sx = img.width / width, sy = img.height / height;
+    for (let y = 0; y < height; y++)
+        for (let x = 0; x < width; x++) {
+            let r = 0, g = 0, b = 0, a = 0, n = 0;
+            for (let yy = Math.floor(y * sy); yy < Math.min(img.height, Math.ceil((y + 1) * sy)); yy++) {
+                for (let xx = Math.floor(x * sx); xx < Math.min(img.width, Math.ceil((x + 1) * sx)); xx++) {
+                    const o = (yy * img.width + xx) * 4, al = img.data[o + 3];
+                    r += img.data[o] * al;
+                    g += img.data[o + 1] * al;
+                    b += img.data[o + 2] * al;
+                    a += al;
+                    n++;
+                }
+            }
+            const o = (y * width + x) * 4;
+            if (a > 0) {
+                data[o] = Math.round(r / a);
+                data[o + 1] = Math.round(g / a);
+                data[o + 2] = Math.round(b / a);
+            }
+            data[o + 3] = n ? Math.round(a / n) : 0;
+        }
+    return { width, height, data };
+}
+function fill(img, x, y, w, h, c) {
+    for (let yy = y; yy < y + h; yy++)
+        for (let xx = x; xx < x + w; xx++) {
+            const o = (yy * img.width + xx) * 4;
+            img.data[o] = c[0];
+            img.data[o + 1] = c[1];
+            img.data[o + 2] = c[2];
+            img.data[o + 3] = 255;
+        }
+}
+function blit(dst, src, x, y) {
+    for (let yy = 0; yy < src.height; yy++)
+        for (let xx = 0; xx < src.width; xx++) {
+            const s = (yy * src.width + xx) * 4, d = ((y + yy) * dst.width + x + xx) * 4, a = src.data[s + 3] / 255;
+            for (let k = 0; k < 3; k++)
+                dst.data[d + k] = Math.round(src.data[s + k] * a + dst.data[d + k] * (1 - a));
+        }
+}
+export function composeSheet(sprites, ground, sizes = SHEET_SIZES) {
+    const scaled = sprites.map((s) => ({ name: s.name, at: sizes.map((h) => toHeight(s.img, h)) }));
+    const rowW = (at) => at.reduce((w, i) => w + i.width + PAD * 3, PAD * 3);
+    const width = Math.max(64, ...scaled.map((s) => rowW(s.at)));
+    const rowH = Math.max(...sizes) + PAD * 3;
+    const bandH = scaled.length * rowH + PAD * 3;
+    const img = { width, height: bandH * 2, data: new Uint8Array(width * bandH * 2 * 4) };
+    fill(img, 0, 0, width, bandH, NEUTRAL);
+    fill(img, 0, bandH, width, bandH, ground);
+    const cells = [];
+    for (const [band, top] of [['neutral', 0], ['ground', bandH]]) {
+        scaled.forEach((s, row) => {
+            let x = PAD * 3;
+            const base = top + PAD * 3 + row * rowH + Math.max(...sizes);
+            s.at.forEach((spr, k) => {
+                const y = base - spr.height;
+                blit(img, spr, x, y);
+                cells.push({ name: s.name, size: sizes[k], band, x, y, w: spr.width, h: spr.height, contrast: null });
+                x += spr.width + PAD * 3;
+            });
+        });
+    }
+    for (const c of cells)
+        c.contrast = boxContrast(img, { x: c.x, y: c.y, w: c.w, h: c.h });
+    return { img, cells };
+}