From c45d86f70c552c70f33a2baf0d2979fba5136852 Mon Sep 17 00:00:00 2001 From: sganggs Date: Tue, 13 Oct 2026 03:30:48 +0800 Subject: [PATCH] =?UTF-8?q?0.2.6-dev:=20impostor=20slots=20sized=20from=20?= =?UTF-8?q?every=20clip=20a=20unit=20plays=20and=20clipped=20to=20themselv?= =?UTF-8?q?es=20(GitHub=20#542=20by=20@ImPQlc:=20in=20a=20crowd=20?= =?UTF-8?q?=E9=87=8E=E9=AC=83's=20idle=20flag,=20=E6=B5=8A=E5=BF=83?= =?UTF-8?q?=E6=96=AF=E5=8D=A1=E8=92=82's=20S3=20flight=20and=20=E9=9A=90?= =?UTF-8?q?=E7=8E=B0's=20pistol=20were=20cut,=20offset=20or=20left=20stray?= =?UTF-8?q?=20pixels)=20=E2=80=94=20spine.js=20measures=20each=20skeleton'?= =?UTF-8?q?s=20clips=20once=20within=20a=202.5=20ms=20frame=20budget,=20un?= =?UTF-8?q?its.js=20impostorBox=20covers=20the=20setup=20pose=20and=20the?= =?UTF-8?q?=20played=20clips=20(a=20clip=20past=204=C3=97=20/=202=C3=97=20?= =?UTF-8?q?of=20that=20core=20is=20drawn=20directly=20while=20it=20plays,?= =?UTF-8?q?=20the=20slot=20kept),=20impostor.js=20draws=20each=20slot's=20?= =?UTF-8?q?skeleton=20under=20a=20scissor=20rect=20of=20the=20slot;=20gold?= =?UTF-8?q?en:=20unchanged?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- public/js/render/app.js | 5 +- public/js/render/impostor.js | 55 +++- public/js/render/spine.js | 178 +++++++++++ public/js/render/units.js | 210 ++++++++++++- test/render/boardart.test.js | 4 +- test/render/impostor-bounds-models.test.js | 158 ++++++++++ test/render/impostor-bounds.browser.test.js | 233 ++++++++++++++ test/render/impostor-bounds.test.js | 332 ++++++++++++++++++++ 8 files changed, 1153 insertions(+), 22 deletions(-) create mode 100644 test/render/impostor-bounds-models.test.js create mode 100644 test/render/impostor-bounds.browser.test.js create mode 100644 test/render/impostor-bounds.test.js diff --git a/public/js/render/app.js b/public/js/render/app.js index a8cb77f9..1f480624 100644 --- a/public/js/render/app.js +++ b/public/js/render/app.js @@ -103,7 +103,8 @@ // Assault prep = the boss field). // Battle device boxes (`ctx.createBox`) follow the board layer (switchableBox), so a 3D ⇄ 2D switch keeps crates. // Crowds and clipped Spine skeletons render through the shared impostor atlas (render/impostor.js), flushed once per -// frame before the main pass. +// frame before the main pass; each frame also measures queued Spine clips within a small time budget +// (spine.js stepClipBounds: the impostor boxes, GitHub #542). // canPlace: `(uid, target, piece) => bool` (the game UI's form: target = {area:'board',row,col}|{area:'hand',idx}) // or `(piece, row, col, target) => bool` (functions declaring ≥ 3 parameters). Throwing ⇒ illegal. // Piece shape (DESIGN §8.3): { uid, kind: 'chess'|'item'|'token', id, golden, tier, items: [{uid,id}], count, ownerUid }. @@ -125,6 +126,7 @@ import { backdropTextures, shadowTexture, refreshTierChips, refreshDownLabels, s import { TILE_H, TIER_COLORS, COLORS } from './style.js'; import { loadBoardArt } from './boardArt.js'; import { ImpostorAtlas } from './impostor.js'; +import { stepClipBounds } from './spine.js'; import { loadThree, loadBoardPack, loadScenePack, webgl2Available, boardArtListed } from './board3d/load.js'; import { BoardScene } from './board3d/scene.js'; import { unionAreas } from './board3d/layout.js'; @@ -1744,6 +1746,7 @@ export async function createFieldView(host, options = {}) { if (leader && !leaderHidden) leader.view.update(dt, cam, clock); tiles.update(dt); fx.update(dt); + stepClipBounds(); impostors.flush(); } catch (err) { if (!frame.warned) { frame.warned = true; console.error('[render] frame failed', err); } diff --git a/public/js/render/impostor.js b/public/js/render/impostor.js index 6c9f56ae..4fc8d386 100644 --- a/public/js/render/impostor.js +++ b/public/js/render/impostor.js @@ -6,14 +6,22 @@ // load/store on tiled GPUs. Instead of one RenderTexture per unit (one framebuffer switch each), every due // impostor of a frame is drawn into slots of a few shared atlas pages in ONE render call per page, before the // main pass starts: -// page = RenderTexture (2048² physical px) + a batch container [erasers…, skeletons…] -// slot = shelf-packed rect (16 px grid) owned by one unit; erased (ERASE blend quad) then redrawn when due +// page = RenderTexture (2048² physical px) + a batch container [erasers…, slot boxes…] +// slot = shelf-packed rect (16 px grid) owned by one unit; erased (ERASE blend quad over exactly the slot) then +// redrawn when due. The skeleton is drawn inside the slot's own box — a container masked by the slot +// rectangle, which PIXI turns into a scissor rect (an axis-aligned rectangle mask: no stencil, no render-pass +// break) — so nothing a unit draws can land outside its slot: a pose wider than the unit's box (render/units.js +// _impBox) is cut at the slot's edge instead of painting into the neighbouring slots or the free space +// around them, where no eraser ever cleared it again (GitHub #542: 野鬃's flag, 浊心斯卡蒂's S3 flight). +// Every redraw therefore starts from an empty slot: its eraser clears all the slot can hold. // Pages are created on demand (≤ MAX_PAGES); when every page is full `alloc` returns null and the unit renders // directly (still correct, just not batched). A shelf whose last slot is freed is emptied for reuse, and empty shelves // at the top of a page are given back (a page whose slots are all freed — every battle / prep rebuild — starts over): // without that, zooming a crowd in and out (the enemy pen camera) left pages full of shelves of stale sizes and the // next battle's units fell back to one private render target each. Clipped skeletons get slots on small separate "clip" pages: their -// stencil clears break the page's render pass, and the cost of a break scales with the page size. +// stencil clears break the page's render pass, and the cost of a break scales with the page size. The scissor of the +// slot box also bounds those stencil clears to the slot. Cost of the clipping: one batch flush per drawn slot (each +// skeleton is its own draw call or calls; skeletons sharing an atlas texture no longer batch across slots). // // const imp = new ImpostorAtlas(renderer) // const slot = imp.alloc(w, h) // CSS px; null when full @@ -49,9 +57,9 @@ export class ImpostorAtlas { try { rt.framebuffer.enableStencil(); } catch { /* masks fall back to scissor */ } const batch = new P.Container(); const erasers = new P.Container(); - const bodies = new P.Container(); - batch.addChild(erasers, bodies); - const page = { kind, size, rt, batch, erasers, bodies, shelves: [], nextY: 0, queued: 0, cleared: false, index: this.pages.length }; + const boxes = new P.Container(); + batch.addChild(erasers, boxes); + const page = { kind, size, rt, batch, erasers, boxes, shelves: [], nextY: 0, queued: 0, cleared: false, index: this.pages.length }; this.pages.push(page); this.stats.pages = this.pages.length; return page; @@ -97,9 +105,25 @@ export class ImpostorAtlas { eraser.width = w; eraser.height = h; eraser.visible = false; page.erasers.addChild(eraser); + // the slot's own pass: its skeleton is drawn in `box`, clipped to the slot rectangle (a scissor rect) + const mask = new P.Graphics(); + mask.beginFill(0xffffff, 1); + mask.drawRect(x, y, w, h); + mask.endFill(); + const box = new P.Container(); + box.addChild(mask); + box.mask = mask; + box.visible = false; + page.boxes.addChild(box); const tex = new P.Texture(page.rt.baseTexture, new P.Rectangle(x, y, w, h)); sh.live = (sh.live || 0) + 1; - return { page, shelf: sh, clip: page.kind === 'clip', x, y, w, h, eraser, tex, freed: false }; + return { page, shelf: sh, clip: page.kind === 'clip', x, y, w, h, eraser, box, mask, tex, freed: false }; + } + + /** Back to the parking lot: every skeleton queued in a slot's box (never destroyed here — the actors own them). */ + _unqueue(slot) { + for (const b of [...slot.box.children]) if (b !== slot.mask) this.park(b); + slot.box.visible = false; } free(slot) { @@ -107,6 +131,11 @@ export class ImpostorAtlas { slot.freed = true; this.stats.slots = Math.max(0, this.stats.slots - 1); try { slot.eraser.destroy(); } catch { /* ignore */ } + try { + this._unqueue(slot); // a skeleton queued this frame (its unit left impostor mode) is not destroyed with the box + slot.box.mask = null; + slot.box.destroy({ children: true }); + } catch { /* ignore */ } try { slot.tex.destroy(false); } catch { /* ignore */ } const page = slot.page; const sh = slot.shelf && page.shelves.includes(slot.shelf) ? slot.shelf : page.shelves.find((s) => s.y === slot.y); @@ -135,7 +164,8 @@ export class ImpostorAtlas { obj.position.set(slot.x + m.tx, slot.y + m.ty); obj.scale.set(m.a, m.d); obj.visible = true; - if (obj.parent !== page.bodies) page.bodies.addChild(obj); + if (obj.parent !== slot.box) slot.box.addChild(obj); + slot.box.visible = true; page.queued++; } @@ -152,14 +182,19 @@ export class ImpostorAtlas { page.queued = 0; for (const e of page.erasers.children) e.visible = false; // back to the parking lot until due again - for (const b of [...page.bodies.children]) this.park(b); + for (const box of page.boxes.children) { + if (!box.visible) continue; + box.visible = false; + for (const b of [...box.children]) if (b !== box.mask) this.park(b); + } } this.stats.drawn = drawn; } destroy() { for (const page of this.pages) { - try { page.batch.destroy({ children: false }); } catch { /* ignore */ } + for (const box of page.boxes.children) for (const b of [...box.children]) if (b !== box.mask) box.removeChild(b); + try { page.batch.destroy({ children: true }); } catch { /* ignore */ } try { page.rt.destroy(true); } catch { /* ignore */ } } this.pages = []; diff --git a/public/js/render/spine.js b/public/js/render/spine.js index 1ef36256..e97854f3 100644 --- a/public/js/render/spine.js +++ b/public/js/render/spine.js @@ -33,6 +33,8 @@ // update(dt) advances the skeleton (autoUpdate is off: one clock for everything) // poseHeld() true while the pose cannot change (render/units.js then neither re-poses nor // redraws the model, only advances `clock`) +// clipBounds(names) skeleton-space bounds of the setup pose and of those clips (sampled once per +// skeleton data, see "clip bounds" below; render/units.js sizes the impostor box) // Each attack plays its clip once, then the end clip (if any) and base — except the attacks of a skill // with its own idle clip, which go straight back to that idle: the skill's end clip closes the skill, not each spell of // attacks while it runs. @@ -110,6 +112,161 @@ function slotCentre(slot, att, buf, out) { return Number.isFinite(out[0]) && Number.isFinite(out[1]); } +// ---- clip bounds (GitHub #542) ------------------------------------------------------------------------------------ +// What a skeleton can draw, in skeleton space (pixi-spine's y-down world; rects are [x0, y0, x1, y1]): its setup pose and +// each clip, sampled once per skeleton data and shared by every actor built from it. render/units.js sizes a unit's +// impostor slot from the clips the unit plays — a slot sized from the first pose drawn (plus a margin) cut 野鬃's idle +// flag and 浊心斯卡蒂's head in her S3 flight, and 598 of the roster's 681 skeletons play a clip that leaves a slot sized +// that way from their idle's first frame. A clip is posed on a scratch skeleton of the same runtime (never an actor's +// own) CLIP_SAMPLE_HZ times a second, at most CLIP_SAMPLE_MAX + 1 times (a longer clip is sampled more sparsely); every +// slot that is drawn (alpha > 0) counts — a region with its whole attachment rectangle (the atlas trim only makes the +// drawn sprite smaller), a mesh with its world vertices. (Skeleton.getBounds() cannot be used: pixi-spine never computes +// the RegionAttachment offsets it reads, its sprites do not need them.) Requests are queued; `stepClipBounds(ms)`, called +// by render/app.js once per frame, samples within that time budget: the clips a unit plays take ≈ 9 ms per skeleton on +// the current roster (53 ms at most), so a model is measured a few frames after it loads, long before a crowd needs its +// impostor. [ASSUMED] the rate, the cap and the budget (a pose between two samples is covered by the box's padding, +// units.js IMP_BOX, and anything past it is cut by the atlas slot's scissor, never left behind). +export const CLIP_SAMPLE_HZ = 60; +export const CLIP_SAMPLE_MAX = 48; +export const CLIP_BOUNDS_BUDGET_MS = 2.5; +const ATT_REGION = 0, ATT_MESH = 2; // pixi-spine AttachmentType +const boundsOf = new WeakMap(); // skeleton data → { data, Skeleton, skel, setup, rects: Map, todo, job, failed } +const boundsQueue = []; // records with clips still to sample, oldest request first +const nowMs = () => (globalThis.performance ? globalThis.performance.now() : Date.now()); +const emptyRect = () => [Infinity, Infinity, -Infinity, -Infinity]; +const rectOk = (r) => !!r && Number.isFinite(r[0]) && Number.isFinite(r[1]) && Number.isFinite(r[2]) && Number.isFinite(r[3]) && r[0] <= r[2] && r[1] <= r[3]; + +/** Grow `r` by everything `skel` draws in its current pose (see "clip bounds"); `buf.v` is a scratch vertex buffer. */ +function poseRect(skel, r, buf) { + const grow = (x, y) => { if (x < r[0]) r[0] = x; if (x > r[2]) r[2] = x; if (y < r[1]) r[1] = y; if (y > r[3]) r[3] = y; }; + for (const slot of skel.drawOrder) { + const bone = slot.bone; + if (!bone || bone.active === false) continue; + const att = typeof slot.getAttachment === 'function' ? slot.getAttachment() : slot.attachment; + if (!att || (slot.color ? slot.color.a : 1) * (att.color ? att.color.a : 1) <= 0.004) continue; + if (att.type === ATT_MESH && typeof att.computeWorldVertices === 'function') { + const n = att.worldVerticesLength | 0; + if (n < 2) continue; + if (buf.v.length < n) buf.v = new Float32Array(n); + const v = buf.v; + att.computeWorldVertices(slot, 0, n, v, 0, 2); + for (let k = 0; k < n; k += 2) grow(v[k], v[k + 1]); + } else if (att.type === ATT_REGION && bone.matrix) { + // the attachment rectangle (width × height × scale, rotated, at x / y) through the bone (a PIXI matrix) + const m = bone.matrix; + const hw = (att.width * att.scaleX) / 2, hh = (att.height * att.scaleY) / 2; + const rad = (att.rotation * Math.PI) / 180, c = Math.cos(rad), s = Math.sin(rad); + for (let q = 0; q < 4; q++) { + const px = q === 0 || q === 3 ? -hw : hw, py = q < 2 ? -hh : hh; + const lx = px * c - py * s + att.x, ly = px * s + py * c + att.y; + grow(m.a * lx + m.c * ly + m.tx, m.b * lx + m.d * ly + m.ty); + } + } + } + return r; +} + +/** The scratch skeleton of a bounds record (made on demand, dropped once its queued clips are sampled). */ +function scratchSkeleton(rec) { + if (rec.skel) return rec.skel; + const Skeleton = rec.Skeleton; + if (typeof Skeleton !== 'function' || Skeleton === Object) throw new Error('no Spine runtime'); + const skel = new Skeleton(rec.data); + if (!Array.isArray(skel.drawOrder) || typeof skel.setToSetupPose !== 'function' || typeof skel.updateWorldTransform !== 'function') throw new Error('no Spine runtime'); + rec.skel = skel; + return skel; +} + +/** The bounds record of skeleton data `data` (its setup pose measured at once); `failed` when it cannot be posed here. */ +function boundsRecord(data, Skeleton) { + let rec = boundsOf.get(data); + if (rec) return rec; + rec = { data, Skeleton, skel: null, setup: null, rects: new Map(), todo: [], job: null, failed: false, buf: { v: new Float32Array(256) } }; + try { + const skel = scratchSkeleton(rec); + skel.setToSetupPose(); + skel.updateWorldTransform(); + const r = poseRect(skel, emptyRect(), rec.buf); + rec.setup = rectOk(r) ? r : null; + } catch { + rec.failed = true; + rec.skel = null; + } + boundsOf.set(data, rec); + return rec; +} + +/** + * Start sampling clip `name`: { name, anim, d, n, i, r } (posed at t = d·i/n for i = 0…n; `r` grows), or null when the + * skeleton has no such clip. + */ +function startClip(rec, name) { + const anim = typeof rec.data.findAnimation === 'function' ? rec.data.findAnimation(name) : null; + if (!anim || typeof anim.apply !== 'function') return null; + const d = Number.isFinite(anim.duration) && anim.duration > 0 ? anim.duration : 0; + const n = d > 0 ? Math.min(CLIP_SAMPLE_MAX, Math.max(1, Math.ceil(d * CLIP_SAMPLE_HZ))) : 0; + scratchSkeleton(rec).setToSetupPose(); + return { name, anim, d, n, i: 0, r: emptyRect() }; +} + +/** + * Queue clips `names` of skeleton data `data` (pixi-spine runtime class `Skeleton`) for sampling — those neither sampled + * nor queued yet — and return its record (`setup`, `rects`, `failed`). + */ +export function requestClipBounds(data, Skeleton, names) { + const rec = boundsRecord(data, Skeleton); + if (rec.failed) return rec; + let added = false; + for (const n of names) { + if (typeof n === 'string' && !rec.rects.has(n) && !rec.todo.includes(n) && !(rec.job && rec.job.name === n)) { rec.todo.push(n); added = true; } + } + if (added && !boundsQueue.includes(rec)) boundsQueue.push(rec); + return rec; +} + +/** + * Sample queued clips for up to `budgetMs` (render/app.js calls it once per frame): pose after pose, a clip resumed on the + * next call when the budget runs out inside it; at least one pose per call. + * @returns {number} clips finished + */ +export function stepClipBounds(budgetMs = CLIP_BOUNDS_BUDGET_MS) { + if (!boundsQueue.length) return 0; + const end = nowMs() + budgetMs; + let finished = 0, posed = 0; + while (boundsQueue.length) { + const rec = boundsQueue[0]; + if (!rec.job) { + const name = rec.todo.shift(); + if (name === undefined) { boundsQueue.shift(); rec.skel = null; continue; } + try { rec.job = startClip(rec, name); } catch { rec.job = null; } + if (!rec.job) { rec.rects.set(name, null); finished++; continue; } + } + const j = rec.job; + try { + const skel = scratchSkeleton(rec); + while (j.i <= j.n) { + const t = j.n ? (j.d * j.i) / j.n : 0; + j.anim.apply(skel, t, t, false, null, 1, 0, 0); // MixBlend.setup, MixDirection.mixIn: the clip's own pose at t + skel.updateWorldTransform(); + poseRect(skel, j.r, rec.buf); + j.i++; + posed++; + if (nowMs() >= end) break; + } + } catch { j.i = j.n + 1; j.r = emptyRect(); } + if (j.i > j.n) { + rec.rects.set(j.name, rectOk(j.r) ? j.r : null); + rec.job = null; + finished++; + } + if (posed && nowMs() >= end) break; + } + return finished; +} + +/** Clips still waiting to be sampled, the one in progress included (dev / tests). */ +export function pendingClipBounds() { return boundsQueue.reduce((s, r) => s + r.todo.length + (r.job ? 1 : 0), 0); } + export class SpineActor { /** * @param {any} spineData PIXI.spine skeleton data @@ -695,6 +852,27 @@ export class SpineActor { this._clipHidden.clear(); } + /** + * Skeleton-space bounds of the setup pose and of clips `names` ("clip bounds" above; render/units.js _impBox): `{ setup, + * clips: Map }` once every clip is sampled; null while some still wait — they are queued here and + * render/app.js samples them (stepClipBounds); false when this runtime cannot be posed off-screen (a test double). + * @param {string[]} names + */ + clipBounds(names) { + const sp = this.spine; + const data = sp && sp.spineData; + if (!data) return false; + let rec = boundsOf.get(data); + if (!rec || names.some((n) => !rec.rects.has(n))) rec = requestClipBounds(data, sp.skeleton && sp.skeleton.constructor, names); + if (rec.failed) return false; + const clips = new Map(); + for (const n of names) { + if (!rec.rects.has(n)) return null; + clips.set(n, rec.rects.get(n)); + } + return { setup: rec.setup, clips }; + } + /** Model height in skeleton units (setup-pose bounds, else a chibi default). */ get height() { const b = this.entry.bounds; diff --git a/public/js/render/units.js b/public/js/render/units.js index adf55a38..f59b26e8 100644 --- a/public/js/render/units.js +++ b/public/js/render/units.js @@ -59,7 +59,11 @@ // animated or drawn at all (its clock catches up, ≤ 0.5 s, when it comes back); `opts.lod: 'idle'` (the enemy preview // pen: idle loops only) animates through the impostor atlas every 3rd frame; under the view's adaptive load level // (`ctx.loadLevel()` 1–3, app.js) small / far units (< ~56 px per tile) animate every 2nd frame, and from level 2 on -// every unit does. +// every unit does. An impostor's slot is sized from the setup pose and every clip the unit can play (`impostorBox`, GitHub +// #542: a slot sized from the first pose drawn cut 野鬃's idle flag and 浊心斯卡蒂's S3 flight, and what crossed its edge +// was left in the neighbouring slots); its skeleton's clips are measured once, a few frames after the model loads +// (spine.js clipBounds) — until then the unit is drawn directly —, and a clip too large for the box is drawn directly +// while it plays. // // Picking is by tile (render/pick.js, user playtest #4 item 1): views carry no hit shapes; `bounds()` is the drawn body's // screen rect for tooltips and overlays (view.pieceScreenRect). A dragged (lifted) item plate is drawn centred on its @@ -414,6 +418,86 @@ export const FORMS = Object.freeze({ enemy_1121_lifbos_2: PRISONER_COLOURED, }); +/** + * The clips a unit can play, clip name → true for a one-off clip (GitHub #542: its impostor box is sized from them, + * `impostorBox`): every role of its manifest entry (`anims`, with every skill's set — `skills` — and the Run cycle) and of + * its model forms (`forms` = FORMS[id]: their clip sets and their change, closing and leaving clips). One-off = the deploy + * clip, a skill's, stun's, move's or run's begin and end clips and a form's change, closing and leaving clips; everything + * else loops or is held (idle, attack — its begin and end come with every attack —, a skill's loop and idle, the move and + * run loops, the stun loop, the death clip a knocked-out operator lies in). A name with both kinds of role loops. + * @returns {Map} + */ +export function playedClips(anims, forms = null) { + const out = new Map(); + const add = (name, once) => { if (typeof name === 'string' && name) out.set(name, out.has(name) ? out.get(name) && once : once); }; + const clip = (c, endsOnce) => { + if (!c || typeof c !== 'object') return; + add(c.loop, false); add(c.idle, false); add(c.begin, endsOnce); add(c.end, endsOnce); + }; + const roles = (r) => { + if (!r || typeof r !== 'object') return; + add(r.idle, false); add(r.deploy, true); add(r.die, false); + clip(r.attack, false); clip(r.skill, true); clip(r.move, true); clip(r.run, true); clip(r.stun, true); + if (r.skills && typeof r.skills === 'object') for (const s of Object.values(r.skills)) clip(s, true); + }; + roles(anims); + if (forms && typeof forms === 'object') { + for (const f of Object.values(forms)) { + if (!f || typeof f !== 'object') continue; + add(f.change, true); add(f.end, true); add(f.leave, true); + roles(f.roles); + } + } + return out; +} + +/** + * Impostor box limits (GitHub #542, `impostorBox`): a clip enters a unit's box while the box stays within `steady` × the + * area of its setup pose ∪ idle clip (a looping or held clip), `transient` × for a one-off clip; `pad` × the box's longer + * side + `padMin` skeleton units is added on every side for the poses between two samples (spine.js CLIP_SAMPLE_HZ). + * [ASSUMED] the values: on the current roster they keep every looping / held clip of 675 of the 681 skeletons in the box + * (the 6 others hold a screen-wide skill or death effect) and leave out 319 of the 681 deploy clips (mostly the drop from + * above, up to 1700 units tall); the boxes add up to 1.86 × the area of boxes sized from the idle's first frame (the + * median skeleton's 1.39 ×). + */ +export const IMP_BOX = Object.freeze({ steady: 4, transient: 2, pad: 0.03, padMin: 8 }); + +/** + * A unit's impostor box (GitHub #542) in skeleton space, from rects [x0, y0, x1, y1] (y down; null = nothing drawn): the + * setup pose and the idle clip always (the core — never a box smaller than the setup pose); then each other clip the unit + * plays (`clips`: [name, rect, once], `playedClips`) in the order of the area it adds, taken while the box stays within + * IMP_BOX.steady × the core's area (IMP_BOX.transient × for a one-off clip). A clip that does not fit and is not inside + * the box anyway is `over`: its unit is drawn directly while it plays (units.js _updateImpostor), so a rare huge clip + * (a deploy drop from above, a screen-wide sweep) does not grow every refresh of the unit's slot. Padded by IMP_BOX.pad. + * Without a setup pose or idle clip that draws anything, the looping clips make the core. null when nothing is drawn. + * @returns {{ x0: number, y0: number, w: number, h: number, over: Set } | null} + */ +export function impostorBox(setup, idle, clips = []) { + const ok = (r) => Array.isArray(r) && r.length === 4 && r.every(Number.isFinite) && r[0] <= r[2] && r[1] <= r[3]; + const join = (a, b) => [Math.min(a[0], b[0]), Math.min(a[1], b[1]), Math.max(a[2], b[2]), Math.max(a[3], b[3])]; + const area = (r) => Math.max(1, r[2] - r[0]) * Math.max(1, r[3] - r[1]); + let core = null; + for (const r of [setup, idle]) if (ok(r)) core = core ? join(core, r) : r.slice(); + if (!core) for (const [, r, once] of clips) if (!once && ok(r)) core = core ? join(core, r) : r.slice(); + if (!core) return null; + const limit = area(core); + const order = clips.filter(([, r]) => ok(r)).map(([name, r, once]) => ({ name, r, once, grow: area(join(core, r)) })) + .sort((a, b) => a.grow - b.grow || (a.name < b.name ? -1 : a.name > b.name ? 1 : 0)); + let box = core; + const left = []; + for (const c of order) { + const u = join(box, c.r); + if (area(u) <= (c.once ? IMP_BOX.transient : IMP_BOX.steady) * limit) box = u; + else left.push(c); + } + const over = new Set(); + for (const c of left) if (c.r[0] < box[0] || c.r[1] < box[1] || c.r[2] > box[2] || c.r[3] > box[3]) over.add(c.name); + const pad = IMP_BOX.pad * Math.max(box[2] - box[0], box[3] - box[1]) + IMP_BOX.padMin; + return { x0: box[0] - pad, y0: box[1] - pad, w: box[2] - box[0] + 2 * pad, h: box[3] - box[1] + 2 * pad, over }; +} +/** No clip is drawn past the box (a pen figure; the legacy box of a runtime that cannot be sampled). Never added to. */ +const NO_CLIPS = new Set(); + /** * Keep `obj` in the right layer: the surface container of block row round(y) when it lies on a raised top at * height `z` (drawn after that row's blocks), else `fallback`. Reparents only on change. @@ -695,6 +779,9 @@ export class UnitView { this.spineReady = true; this.swapT = swap ? 1 : 0; this.actor.spine.alpha = swap ? 1 : 0; + // measure the clips it can play now (sampled over the next frames, render/app.js stepClipBounds): its impostor box + // is ready before a crowd needs it (_impBox) + try { this.actor.clipBounds([...this._clipNames().keys()]); } catch { /* _impBox asks again */ } // a mode the unit is already in (a model built or rebuilt after the change): its clip set, no change clip — a dead // one lies in the form it died in (a 替身 knocked out: the sim resets the form at once, but the Front model it lies // down with facing UP, §22.1, is built a frame later; a model rebuilt while it is down) @@ -1271,16 +1358,13 @@ export class UnitView { // a pose that cannot change (a knocked-out operator lying in its held Die pose, a frozen model) is neither re-posed // nor redrawn — it would draw the same pixels again; the actor's clock still runs const held = !clipFlip && this.actor.poseHeld(); - if (interval > 0 && this.ctx.renderer) { + // (an impostor needs its box: while its model's clips are still being measured the unit is drawn directly) + if (interval > 0 && this.ctx.renderer && this._impBox()) { if (clipFlip && this.imp) this.imp.dirty = true; // masks on / off: the slot is redrawn either way this._updateImpostor(sc, flip, tint, animDt, interval, held); } else { if (this.imp) this._leaveImpostor(); - this.actor.spine.alpha = this.swapT; - this.actor.spine.scale.set(sc * flip, sc * this.modelKY); - if (held) this.actor.clock += animDt; - else this.actor.update(animDt); - if (this._tint !== tint) { this._tint = tint; this.actor.spine.tint = tint; } + this._drawDirect(sc, flip, tint, animDt, held); } } // the diamond is only needed while no model shows (a cross-fade keeps whatever diamond was already up) @@ -1649,9 +1733,58 @@ export class UnitView { // impostor atlas (render/impostor.js) every `interval` frames (staggered per unit; every frame for clipped // skeletons, whose stencil masks must stay out of the main pass) and shown as one sprite. Without a free atlas // slot the unit keeps a private RenderTexture (same visuals, one extra framebuffer switch). + // The slot is sized from the unit's box (GitHub #542, `impostorBox`): its setup pose and every clip it can play, as + // measured once per skeleton (spine.js clipBounds) — no pose it plays is cut, and the atlas clips every slot to itself. + // A clip too large for the box (`over`) is drawn directly while it plays; the slot stays the unit's (_impBypass). + /** The impostor box ({ x0, y0, w, h, over } in skeleton units), null while the model's clips are still measured. */ _impBox() { if (this._box) return this._box; + const a = this.actor; + const names = this._clipNames(); + const b = typeof a.clipBounds === 'function' ? a.clipBounds([...names.keys()]) : false; + if (b === null) return null; + let box = null; + if (b) { + const idle = this._idleClip(); + const rest = []; + for (const [name, once] of names) if (name !== idle) rest.push([name, b.clips.get(name) || null, once]); + box = impostorBox(b.setup, idle ? b.clips.get(idle) || null : null, rest); + } + this._box = box || this._legacyBox(); + return this._box; + } + + /** The idle clip of the model's own roles (the impostor box's core with the setup pose), else null. */ + _idleClip() { + const a = this.actor, idle = a.entry && a.entry.anims ? a.entry.anims.idle : null; + return a.has(idle) ? idle : a.has('Idle') ? 'Idle' : null; + } + + /** + * The clips this view's model can play that its skeleton has (`playedClips` of its entry and FORMS, the actor's + * fallbacks 'Idle' / 'Die' included), name → one-off; a pen figure (lod idle) plays its idle clip only. + */ + _clipNames() { + const a = this.actor; + if (this._clipsOf === a) return this._clips; + const anims = (a.entry && a.entry.anims) || {}; + const idle = this._idleClip(); + const out = new Map(); + if (idle) out.set(idle, false); + if (!this.lodIdle) { + for (const [name, once] of playedClips(anims, FORMS[this.info.spine || this.info.defId] || null)) { + if (a.has(name)) out.set(name, out.has(name) ? out.get(name) && once : once); + } + if (!anims.die && a.has('Die')) out.set('Die', false); + } + this._clipsOf = a; + this._clips = out; + return out; + } + + /** The box sized from the pose drawn now, for a runtime whose clips cannot be measured (the pre-#542 rule). */ + _legacyBox() { let b = null; try { b = this.actor.spine.getLocalBounds(); } catch { b = null; } let x0 = -220, y0 = -420, x1 = 220, y1 = 40; @@ -1660,8 +1793,52 @@ export class UnitView { x0 = Math.min(b.x - padX, -140); x1 = Math.max(b.x + b.width + padX, 140); y0 = Math.min(b.y - padY, -260); y1 = Math.max(b.y + b.height + padY * 0.4, 30); } - this._box = { x0, y0, w: x1 - x0, h: y1 - y0 }; - return this._box; + return { x0, y0, w: x1 - x0, h: y1 - y0, over: NO_CLIPS }; + } + + /** Is a clip outside the box (`over`) on screen — the track's clip or one it is still mixing out of? */ + _impOver() { + const over = this._box && this._box.over; + if (!over || !over.size) return false; + const tracks = this.actor.spine && this.actor.spine.state ? this.actor.spine.state.tracks : null; + for (let e = tracks && tracks[0], d = 0; e && d < 4; e = e.mixingFrom, d++) if (e.animation && over.has(e.animation.name)) return true; + return false; + } + + /** + * Draw the skeleton directly while a clip too large for the box plays (`on`), back to the impostor after it: the + * skeleton leaves the atlas' parking lot for the body and the impostor sprite hides; the slot stays allocated, and is + * redrawn on the way back. + */ + _impBypass(on) { + const imp = this.imp, sp = this.actor.spine, atlas = this.ctx.impostors || null; + if (!imp || !!imp.bypass === on) return; + imp.bypass = on; + if (on) { + if (atlas) atlas.unpark(sp); + sp.visible = true; + sp.position.set(0, 0); + this.body.addChild(sp); + imp.sprite.visible = false; + } else { + if (sp.parent === this.body) this.body.removeChild(sp); + if (atlas) atlas.park(sp); + imp.sprite.visible = true; + imp.dirty = true; + imp.acc = 0; + } + } + + /** Draw the skeleton itself this frame (no impostor, or bypassing it): posed by `animDt` unless `held` / `posed`. */ + _drawDirect(sc, flip, tint, animDt, held, posed = false) { + const sp = this.actor.spine; + sp.alpha = this.swapT; + sp.scale.set(sc * flip, sc * this.modelKY); + if (!posed) { + if (held) this.actor.clock += animDt; + else this.actor.update(animDt); + } + if (this._tint !== tint) { this._tint = tint; sp.tint = tint; } } _updateImpostor(sc, flip, tint, animDt, interval, held = false) { @@ -1672,9 +1849,16 @@ export class UnitView { if (this.actor.spine.parent) this.actor.spine.parent.removeChild(this.actor.spine); if (atlas) atlas.park(this.actor.spine); this.body.addChild(sprite); - this.imp = { sprite, slot: null, rt: null, sc: 0, acc: 0, phase: (Math.random() * 64) | 0, dirty: true, last: 0 }; + this.imp = { sprite, slot: null, rt: null, sc: 0, acc: 0, phase: (Math.random() * 64) | 0, dirty: true, last: 0, bypass: false }; } const imp = this.imp; + // a clip too large for the box plays: drawn directly until it is over (then redrawn into the slot) + if (this._impOver()) { + this._impBypass(true); + this._drawDirect(sc, flip, tint, animDt, held); + return; + } + if (imp.bypass) this._impBypass(false); imp.acc += animDt; const frame = this.ctx.frameNo ? this.ctx.frameNo() : 0; // the view's slot in this frame's update order (app.js impostorSlot) spreads the refreshes evenly over the interval; @@ -1691,6 +1875,12 @@ export class UnitView { imp.acc = 0; imp.dirty = false; imp.last = frame; + // the update reached a clip too large for the box (a queued clip began): this frame already draws it directly + if (this._impOver()) { + this._impBypass(true); + this._drawDirect(sc, flip, tint, 0, held, true); + return; + } this._renderImpostor(sc, atlas); } const k = imp.sc > 0 ? sc / imp.sc : 1; diff --git a/test/render/boardart.test.js b/test/render/boardart.test.js index a4530dcd..3a032245 100644 --- a/test/render/boardart.test.js +++ b/test/render/boardart.test.js @@ -205,6 +205,7 @@ describe('impostor atlas allocator', () => { globalThis.PIXI = { Container: Obj, Sprite: class extends Obj { constructor(t) { super(); this.texture = t; } }, + Graphics: class extends Obj { beginFill() { return this; } drawRect(x, y, w, h) { this.rect = [x, y, w, h]; return this; } endFill() { return this; } }, Texture: class { constructor(b, f) { this.baseTexture = b; this.frame = f; } destroy() {} static WHITE = {} }, Rectangle: class { constructor(x, y, w, h) { Object.assign(this, { x, y, width: w, height: h }); } }, RenderTexture: { create: (o) => ({ ...o, baseTexture: { id: Math.random() }, framebuffer: { enableStencil() {} }, destroy() {} }) }, @@ -227,7 +228,7 @@ describe('impostor atlas allocator', () => { const body = new Obj(); atlas.park(body); atlas.draw(c, body, { a: 0.3, d: 0.3, tx: 40, ty: 90 }); - assert.equal(body.parent, c.page.bodies); + assert.equal(body.parent, c.box, 'drawn inside its slot\'s box (clipped to the slot, GitHub #542)'); atlas.flush(); assert.deepEqual(rendered, [true]); assert.equal(body.parent, atlas.parked); @@ -254,6 +255,7 @@ describe('impostor atlas allocator', () => { globalThis.PIXI = { Container: Obj, Sprite: class extends Obj { constructor(t) { super(); this.texture = t; } }, + Graphics: class extends Obj { beginFill() { return this; } drawRect() { return this; } endFill() { return this; } }, Texture: class { constructor(b, f) { this.baseTexture = b; this.frame = f; } destroy() {} static WHITE = {} }, Rectangle: class { constructor(x, y, w, h) { Object.assign(this, { x, y, width: w, height: h }); } }, RenderTexture: { create: (o) => ({ ...o, baseTexture: {}, framebuffer: { enableStencil() {} }, destroy() {} }) }, diff --git a/test/render/impostor-bounds-models.test.js b/test/render/impostor-bounds-models.test.js new file mode 100644 index 00000000..c4db8904 --- /dev/null +++ b/test/render/impostor-bounds-models.test.js @@ -0,0 +1,158 @@ +// test/render/impostor-bounds-models.test.js — GitHub #542 on the three reported models (野鬃 char_496_wildmn, 浊心斯卡蒂 +// char_1012_skadi2, 隐现 char_498_inside), read by @pixi-spine/runtime-3.8 and played by its real Spine and AnimationState +// inside the real SpineActor (headless, as test/render/eyemask.test.js): every pose a unit of them plays — each clip of +// its roles at 30 Hz, measured with Spine's own vertex math (RegionAttachment.computeWorldVertices with the region offsets +// pixi-spine never computes, MeshAttachment.computeWorldVertices) — lies inside the impostor box UnitView._impBox builds +// from the clip bounds of render/spine.js, except the clips the box leaves to a direct draw (`over`); the old rule (the +// pose shown first + a margin) cut 野鬃's idle flag and 浊心斯卡蒂's S3 flight when that pose was the setup pose. +// The skeletons are not in the repository (public/assets: `npm run assets`): without them these tests skip. +// Run: node --test test/render/impostor-bounds-models.test.js + +import { test, describe, before } from 'node:test'; +import assert from 'node:assert/strict'; +import { existsSync, readFileSync } from 'node:fs'; +import path from 'node:path'; +import { createRequire } from 'node:module'; +import { fileURLToPath } from 'node:url'; + +const ROOT = path.resolve(path.dirname(fileURLToPath(import.meta.url)), '../..'); +const require = createRequire(path.join(ROOT, 'package.json')); +const ASSETS = JSON.parse(readFileSync(path.join(ROOT, 'data/assets.json'), 'utf8')); +const dirOf = (id) => path.join(ROOT, 'public', 'assets', 'spine', 'op', id, 'front'); +const have = (id) => existsSync(path.join(dirOf(id), `${id}.skel`)) && existsSync(path.join(dirOf(id), `${id}.atlas`)); +const MODELS = ['char_496_wildmn', 'char_1012_skadi2', 'char_498_inside']; + +let spine, units, rt, base, core; +before(async () => { + class HeadlessCanvas { constructor() { this.width = 16; this.height = 16; } getContext(kind) { return kind === '2d' ? { fillStyle: '', fillRect() {}, clearRect() {}, drawImage() {} } : null; } } + globalThis.HTMLCanvasElement ??= HeadlessCanvas; + globalThis.document ??= { createElement: () => new HeadlessCanvas() }; + rt = require('@pixi-spine/runtime-3.8'); + base = require('@pixi-spine/base'); + core = require('@pixi/core'); + globalThis.PIXI = { spine: { Spine: rt.Spine } }; + spine = await import('../../public/js/render/spine.js'); + units = await import('../../public/js/render/units.js'); +}); + +const cache = new Map(); +function skeletonData(id) { + if (!cache.has(id)) { + const atlas = new base.TextureAtlas(readFileSync(path.join(dirOf(id), `${id}.atlas`), 'utf8'), (line, cb) => cb(new core.BaseTexture(null, { width: 1024, height: 1024 }))); + cache.set(id, new rt.SkeletonBinary(new rt.AtlasAttachmentLoader(atlas)).readSkeletonData(new Uint8Array(readFileSync(path.join(dirOf(id), `${id}.skel`))))); + } + return cache.get(id); +} +const measured = new Set(); +/** + * A real actor of `id` and the impostor box its battle view builds (UnitView._impBox on a stand-in view): the first actor + * of a skeleton waits for its clips to be sampled (stepClipBounds, once per frame); later ones share the result. + */ +function unit(id) { + const a = new spine.SpineActor(skeletonData(id), ASSETS.chars[id].spine.front); + const view = Object.assign(Object.create(units.UnitView.prototype), { actor: a, lodIdle: false, info: { spine: id, defId: id } }); + const t0 = performance.now(); + let box = view._impBox(); + if (!measured.has(id)) assert.equal(box, null, 'measured over the next frames, not at once'); + measured.add(id); + let frames = 0; + while (!box) { spine.stepClipBounds(); frames++; box = view._impBox(); } + return { a, view, box, frames, ms: performance.now() - t0 }; +} +const V = new Float32Array(1 << 14); +/** The skeleton's drawn geometry now (Spine's own vertex math; slots drawn at alpha 0 skipped), as [x0, y0, x1, y1]. */ +function drawn(skel) { + const r = [Infinity, Infinity, -Infinity, -Infinity]; + for (const slot of skel.drawOrder) { + const att = slot.getAttachment(); + if (!att || !slot.bone.active || slot.color.a * att.color.a <= 0.004) continue; + let n = 0; + if (att instanceof rt.RegionAttachment) { + if (!att.offsetDone) { att.updateOffset(); att.offsetDone = true; } + att.computeWorldVertices(slot.bone, V, 0, 2); + n = 8; + } else if (att instanceof rt.MeshAttachment) { + n = att.worldVerticesLength; + att.computeWorldVertices(slot, 0, n, V, 0, 2); + } + for (let k = 0; k < n; k += 2) { r[0] = Math.min(r[0], V[k]); r[2] = Math.max(r[2], V[k]); r[1] = Math.min(r[1], V[k + 1]); r[3] = Math.max(r[3], V[k + 1]); } + } + return r; +} +/** The pose `t` s into `clip`, played by the actor's own Spine (AnimationState, no mix), as drawn([x0, y0, x1, y1]). */ +function drawnAt(a, clip, t) { + const sp = a.spine; + sp.state.clearTracks(); + sp.skeleton.setToSetupPose(); + const e = sp.state.setAnimation(0, clip, false); + e.mixDuration = 0; + sp.update(t); + return drawn(sp.skeleton); +} +const rectOf = (b) => [b.x0, b.y0, b.x0 + b.w, b.y0 + b.h]; +const past = (r, p) => Math.max(r[0] - p[0], p[2] - r[2], r[1] - p[1], p[3] - r[3]); +/** The pre-#542 box: the bounds of the pose shown when the unit became an impostor + its margins. */ +function oldBox(p) { + const w = p[2] - p[0], h = p[3] - p[1]; + const padX = Math.max(60, w * 0.3), padY = Math.max(50, h * 0.22); + return [Math.min(p[0] - padX, -140), Math.min(p[1] - padY, -260), Math.max(p[2] + padX, 140), Math.max(p[3] + padY * 0.4, 30)]; +} +/** What a freshly built model shows before its first update: the setup pose. */ +function setupDrawn(a) { + const sp = a.spine; + sp.state.clearTracks(); + sp.skeleton.setToSetupPose(); + sp.skeleton.updateWorldTransform(); + return drawn(sp.skeleton); +} + +describe('the reported operators: every pose they play fits their impostor box', { skip: !MODELS.every(have) && 'the operator skeletons are not in public/assets (npm run assets)' }, () => { + test('野鬃 idling: the flag at 0.27 s of Idle is in the box — the old box from the setup pose cut it by 103 units', (t) => { + const { a, box, frames, ms } = unit('char_496_wildmn'); + t.diagnostic(`measured in ${frames} frames (${ms.toFixed(1)} ms with the box)`); + const flag = drawnAt(a, 'Idle', 0.273); + assert.ok(flag[0] < -420, `the flag reaches x ${flag[0].toFixed(0)}`); + assert.ok(past(rectOf(box), flag) <= 0, `inside the box (${past(rectOf(box), flag).toFixed(1)})`); + const before = past(oldBox(setupDrawn(a)), flag); + assert.ok(before > 80, `the old box cut it by ${before.toFixed(0)} units`); + assert.ok(box.over.has('Start'), 'its deploy drop (1700 units tall) is drawn directly instead'); + }); + + test('浊心斯卡蒂 S3 (Skill_3_Begin, the flight): her head at 3.5 s is in the box — the old box cut it', () => { + const { a, box } = unit('char_1012_skadi2'); + const head = drawnAt(a, 'Skill_3_Begin', 3.527); + assert.ok(head[1] < -680, `the hat reaches y ${head[1].toFixed(0)}`); + assert.ok(past(rectOf(box), head) <= 0, 'inside the box'); + assert.ok(past(oldBox(setupDrawn(a)), head) > 150, 'the old box cut it'); + assert.ok(!box.over.has('Skill_3_Begin') && !box.over.has('Skill_3_Loop'), 'her skill plays as an impostor'); + }); + + test('隐现 S2: the pistol with its silencer is in the box (her own box held it before too: the stray pixels came from neighbours)', () => { + const { a, box } = unit('char_498_inside'); + for (const [clip, at] of [['Skill_2_Begin', 0.658], ['Skill_2_Loop', 0.333], ['Attack_Begin', 0.1]]) { + const p = drawnAt(a, clip, at); + assert.ok(past(rectOf(box), p) <= 0, `${clip} at ${at} inside the box`); + } + assert.equal(box.over.size, 0, 'no clip of hers is drawn directly'); + }); + + test('all three: every clip they play, at 30 Hz, inside the box unless left to a direct draw', (t) => { + for (const id of MODELS) { + const { a, view, box } = unit(id); + const r = rectOf(box); + let poses = 0, worst = -Infinity, at = ''; + for (const name of view._clipNames().keys()) { + if (box.over.has(name)) continue; + const d = a.dur(name); + for (let k = 0; k <= Math.ceil(d * 30); k++) { + const time = Math.min(d, k / 30); + const e = past(r, drawnAt(a, name, time)); + poses++; + if (e > worst) { worst = e; at = `${name} ${time.toFixed(2)} s`; } + } + } + t.diagnostic(`${id}: ${poses} poses, closest to the edge ${(-worst).toFixed(1)} units inside (${at}); over: ${[...box.over].join(', ') || '—'}`); + assert.ok(worst <= 0, `${id}: ${at} is ${worst.toFixed(1)} units past the box`); + } + }); +}); diff --git a/test/render/impostor-bounds.browser.test.js b/test/render/impostor-bounds.browser.test.js new file mode 100644 index 00000000..41c30be1 --- /dev/null +++ b/test/render/impostor-bounds.browser.test.js @@ -0,0 +1,233 @@ +// test/render/impostor-bounds.browser.test.js — GitHub #542 (reported by @ImPQlc) in headless Chrome, real WebGL: a crowd +// drawn through the impostor atlas (public/dev/render-demo.html?scene=stress: 120 units, impostor interval ≥ 2) with the +// three reported operators in it (&ops=: 野鬃, 浊心斯卡蒂, 隐现), each held in its widest pose — 野鬃's flag at 0.27 s of +// Idle, 浊心斯卡蒂 at 3.5 s of Skill_3_Begin (the S3 flight), 隐现 at 0.33 s of Skill_2_Loop (the silenced pistol). +// Checks: every pose lies inside its unit's slot; after every page is cleared and every impostor redrawn once, no atlas +// pixel lies outside a live slot (render/impostor.js clips each slot's skeleton to the slot rectangle — a scissor rect); +// the scissor itself on a bare atlas page (a quad 9× its slot paints only the slot, a redraw clears the slot, a neighbour +// keeps its pixels); a clip too large for the box (野鬃's deploy drop) is drawn directly while it plays, then the impostor +// comes back. Pictures → test/e2e/out/impostor-542-after-*.png (each operator in the crowd, the atlas pages with the slot +// outlines). The same pictures of the code before #542 are made by checking out its parent and running this file. +// +// Opt-in (starts Chrome, needs the downloaded assets): RENDER_E2E=1 node --test test/render/impostor-bounds.browser.test.js +// Chrome path: $CHROME_PATH or the macOS default. + +import { test, describe, before, after } from 'node:test'; +import assert from 'node:assert/strict'; +import { existsSync, mkdirSync, writeFileSync } from 'node:fs'; +import path from 'node:path'; +import { fileURLToPath } from 'node:url'; + +const ROOT = path.resolve(path.dirname(fileURLToPath(import.meta.url)), '../..'); +const OUT = path.join(ROOT, 'test/e2e/out'); +const CHROME = process.env.CHROME_PATH || '/Applications/Google Chrome.app/Contents/MacOS/Google Chrome'; +const enabled = process.env.RENDER_E2E === '1' && existsSync(CHROME) && existsSync(path.join(ROOT, 'public/assets')); +const skip = enabled ? false : 'set RENDER_E2E=1 (needs Chrome and downloaded assets)'; +const TAG = process.env.IMPOSTOR_SHOT_TAG || 'after'; // file name tag of the pictures ('before' on the parent commit) + +// [unit id (render-demo &ops= places), chessId, label, clip, loop, seconds into it] +const OPS = [ + [6, 'chess_char_1_19_a', 'wildmn-idle', 'Idle', true, 0.273], + [8, 'chess_char_6_04_a', 'skadi2-s3begin', 'Skill_3_Begin', false, 3.527], + [10, 'chess_char_1_01_a', 'inside-s2loop', 'Skill_2_Loop', true, 0.333], +]; +const wait = (ms) => new Promise((r) => setTimeout(r, ms)); + +describe('impostor boxes and slot clipping in headless Chrome (GitHub #542)', { skip }, () => { + let srv, browser, page; + const problems = []; + before(async () => { + const puppeteer = (await import('puppeteer-core')).default; + const { startServer } = await import('../../server/index.js'); + srv = await startServer({ port: 0, host: '127.0.0.1', quiet: true }); + await srv.assetIndex?.whenReady(); + browser = await puppeteer.launch({ executablePath: CHROME, headless: true, args: ['--no-first-run'] }); + mkdirSync(OUT, { recursive: true }); + page = await browser.newPage(); + page.on('console', (m) => { if (m.type() === 'error') problems.push(`console: ${m.text()}`); }); + page.on('pageerror', (e) => problems.push(`pageerror: ${e.message}`)); + page.on('response', (r) => { if (r.status() >= 400) problems.push(`HTTP ${r.status()} ${r.url()}`); }); + await page.setViewport({ width: 1600, height: 900 }); + await page.goto(`http://127.0.0.1:${srv.port}/dev/render-demo.html?scene=stress&panel=0&ops=${OPS.map((o) => o[1]).join(',')}`); + await page.waitForFunction('window.__demo && (window.__demo.ready || window.__demo.error)', { timeout: 30000 }); + assert.equal(await page.evaluate(() => window.__demo.error || null), null, 'demo boot'); + // the crowd loads, its clips are measured, every unit becomes an impostor + await page.waitForFunction((ids) => { + const v = window.__demo.view; + if (v.stats().impostor < 2) return false; + for (const id of ids) { const u = v.debug.views.get(id); if (!u || !u.spineReady || !u.imp || u.imp.bypass) return false; } + return true; + }, { timeout: 40000, polling: 200 }, OPS.map((o) => o[0])); + await wait(2500); // the crowd attacks and casts for a while + await page.evaluate(() => window.__demo.pause()); + await wait(300); + }); + after(async () => { + await browser?.close(); + await srv?.close(); + }); + + test('the three operators held in their widest poses: inside their slots; no atlas pixel outside a live slot', async () => { + await page.evaluate((ops) => { + const views = window.__demo.view.debug.views; + for (const [id, , , clip, loop, t] of ops) { + const v = views.get(id); + v.actor.mode = 'base'; + v.actor._play(clip, loop, { timeScale: 0, mix: 0, start: t }); + if (v.imp) v.imp.dirty = true; + } + }, OPS); + await wait(800); + // a clean slate: every page cleared, every impostor redrawn once — what lies outside the live slots afterwards was + // painted by these redraws (a freed slot's old pixels would count otherwise) + await page.evaluate(() => { + const view = window.__demo.view; + const R = view.debug.app.renderer; + for (const pg of view.debug.ctx.impostors.pages) R.render(new PIXI.Container(), { renderTexture: pg.rt, clear: true }); + for (const v of view.debug.views.values()) if (v.imp) v.imp.dirty = true; + }); + await wait(600); + const info = await page.evaluate((ops) => { + const view = window.__demo.view; + const atlas = view.debug.ctx.impostors; + const R = view.debug.app.renderer; + const res = atlas.res; + const units = ops.map(([id, , label, clip]) => { + const v = view.debug.views.get(id); + const b = v.actor.spine.getLocalBounds(); + const s = v.imp && v.imp.slot, box = v._box, sc = v.imp ? v.imp.sc : 0, yK = v.modelKY || 1; + const track = v.actor.spine.state.tracks[0]?.animation?.name; + if (!s || !box) return { label, track, clip, slot: null }; + const x0 = (b.x - box.x0) * sc, y0 = (b.y - box.y0) * sc * yK, x1 = x0 + b.width * sc, y1 = y0 + b.height * sc * yK; + return { label, track, clip, slot: [s.x, s.y, s.w, s.h], over: Math.max(-x0, -y0, x1 - s.w, y1 - s.h), sc }; + }); + const live = []; + for (const v of view.debug.views.values()) if (v.imp && v.imp.slot && !v.imp.slot.freed) live.push(v.imp.slot); + const pages = [], images = []; + for (const pg of atlas.pages) { + if (!pg.cleared) continue; + const px = R.extract.pixels(pg.rt); + const W = Math.round(pg.size * res); + const mine = live.filter((s) => s.page === pg); + const inSlot = new Uint8Array(W * W); + for (const s of mine) for (let y = Math.floor(s.y * res); y < Math.ceil((s.y + s.h) * res); y++) inSlot.fill(1, y * W + Math.floor(s.x * res), y * W + Math.ceil((s.x + s.w) * res)); + let stray = 0; + for (let i = 0; i < W * W; i++) if (!inSlot[i] && px[i * 4 + 3] > 8) stray++; + pages.push({ index: pg.index, kind: pg.kind, slots: mine.length, stray }); + // picture: the page over a dark checker, the live slots outlined, the three operators' slots in colour + const c = R.extract.canvas(pg.rt); + const o = document.createElement('canvas'); + o.width = c.width; o.height = c.height; + const g = o.getContext('2d'); + for (let y = 0; y < o.height; y += 16) for (let x = 0; x < o.width; x += 16) { g.fillStyle = ((x + y) / 16) % 2 ? '#2a2a2e' : '#222226'; g.fillRect(x, y, 16, 16); } + g.drawImage(c, 0, 0); + g.strokeStyle = 'rgba(255,255,255,0.35)'; + for (const s of mine) g.strokeRect(s.x * res + 0.5, s.y * res + 0.5, s.w * res - 1, s.h * res - 1); + const colours = ['#ff4d4d', '#4dd2ff', '#ffd24d']; + ops.forEach(([id, , label], k) => { + const s = view.debug.views.get(id)?.imp?.slot; + if (!s || s.page !== pg) return; + g.strokeStyle = colours[k]; g.lineWidth = 2; + g.strokeRect(s.x * res + 1, s.y * res + 1, s.w * res - 2, s.h * res - 2); + g.fillStyle = colours[k]; g.font = '12px sans-serif'; g.fillText(label, s.x * res + 4, s.y * res + 14); + g.lineWidth = 1; + }); + images.push({ index: pg.index, url: o.toDataURL('image/png') }); + } + return { units, pages, images, screens: ops.map(([id]) => ({ ...view.debug.views.get(id).screen })) }; + }, OPS); + for (const im of info.images) writeFileSync(path.join(OUT, `impostor-542-${TAG}-atlas-page${im.index}.png`), Buffer.from(im.url.split(',')[1], 'base64')); + // each operator alone on the field (the crowd keeps drawing into the atlas, hidden in the main pass; bars hidden) + await page.evaluate((ids) => { + const view = window.__demo.view; + for (const [id, v] of view.debug.views) if (!ids.includes(id)) { v.root.visible = false; v.shadow.visible = false; } + view.debug.ctx.layers.bars.visible = false; + }, OPS.map((o) => o[0])); + await wait(300); + const rect = await page.evaluate(() => { const r = document.querySelector('#field canvas').getBoundingClientRect(); return { left: r.left, top: r.top }; }); + for (const [k, [, , label]] of OPS.entries()) { + const s = info.screens[k]; + const w = s.s * 3.4, h = s.s * 3.6; + await page.screenshot({ path: path.join(OUT, `impostor-542-${TAG}-${label}.png`), clip: { x: Math.max(0, rect.left + s.x - w / 2), y: Math.max(0, rect.top + s.y - h * 0.84), width: w, height: h } }); + } + await page.evaluate((ids) => { + const view = window.__demo.view; + for (const [id, v] of view.debug.views) if (!ids.includes(id)) { v.root.visible = true; v.shadow.visible = true; } + view.debug.ctx.layers.bars.visible = true; + }, OPS.map((o) => o[0])); + for (const u of info.units) { + assert.equal(u.track, u.clip, `${u.label}: holding ${u.clip}`); + assert.ok(u.slot, `${u.label}: drawn through the atlas`); + assert.ok(u.over <= 0.5, `${u.label}: the pose is ${u.over.toFixed(1)} px past its slot`); + } + for (const p of info.pages) assert.equal(p.stray, 0, `${p.kind} page ${p.index}: ${p.stray} px outside the live slots`); + assert.deepEqual(problems, []); + }); + + test('the scissor on a bare atlas page: a quad 9× its slot paints only the slot; a redraw clears it; a neighbour keeps its pixels', async () => { + const r = await page.evaluate(async () => { + const { ImpostorAtlas } = await import('/js/render/impostor.js'); + const R = window.__demo.view.debug.app.renderer; + const atlas = new ImpostorAtlas(R); + try { + const a = atlas.alloc(64, 64), b = atlas.alloc(64, 64); + // 16 px white quads, scaled by the draw transform (atlas.draw sets the scale, as for a skeleton) + const quad = (tint) => { const s = new PIXI.Sprite(PIXI.Texture.WHITE); s.tint = tint; return s; }; + const big = quad(0xff0000), small = quad(0x00ff00), nb = quad(0x0000ff); + for (const s of [big, small, nb]) atlas.park(s); + const read = () => { + const px = R.extract.pixels(a.page.rt), W = Math.round(a.page.size * atlas.res), k = atlas.res; + const at = (x, y) => { const i = (Math.floor(y * k) * W + Math.floor(x * k)) * 4; return [px[i], px[i + 1], px[i + 2], px[i + 3]]; }; + let outside = 0; + for (let y = 0; y < Math.round(160 * k); y++) for (let x = 0; x < Math.round(256 * k); x++) { + const cx = x / k, cy = y / k; + const inA = cx >= a.x && cx < a.x + a.w && cy >= a.y && cy < a.y + a.h, inB = cx >= b.x && cx < b.x + b.w && cy >= b.y && cy < b.y + b.h; + if (!inA && !inB && px[(y * W + x) * 4 + 3] > 8) outside++; + } + return { outside, aCorner: at(a.x + 60, a.y + 60), aCentre: at(a.x + 8, a.y + 8), bCentre: at(b.x + 32, b.y + 32) }; + }; + // b: a blue square, drawn once; then a alone: a red quad 3× the slot each way, offset so that, unclipped, it would + // paint over b (not redrawn: its eraser stays off) and the free space right of and below the slots + atlas.draw(b, nb, { a: 4, d: 4, tx: 0, ty: 0 }); // 64 px: all of b + atlas.flush(); + atlas.draw(a, big, { a: 12, d: 12, tx: -32, ty: -32 }); // 192 px from (−32, −32) + atlas.flush(); + const first = read(); + // a again with a 16 px green quad in its corner: the rest of the slot must be empty + atlas.draw(a, small, { a: 1, d: 1, tx: 0, ty: 0 }); + atlas.flush(); + const second = read(); + return { first, second, a: [a.x, a.y, a.w, a.h], b: [b.x, b.y, b.w, b.h] }; + } finally { + atlas.destroy(); + } + }); + assert.deepEqual(r.a.slice(2), [64, 64]); + assert.equal(r.first.outside, 0, 'nothing painted outside the slots'); + assert.deepEqual(r.first.aCorner.slice(0, 1).concat(r.first.aCorner[3]), [255, 255], 'slot a filled red'); + assert.deepEqual(r.first.bCentre, [0, 0, 255, 255], 'slot b keeps its blue: a\'s spill was cut at a\'s edge'); + assert.equal(r.second.aCorner[3], 0, 'the redraw cleared the rest of slot a'); + assert.deepEqual(r.second.aCentre, [0, 255, 0, 255], 'and drew the new quad'); + assert.deepEqual(r.second.bCentre, [0, 0, 255, 255], 'b untouched'); + assert.equal(r.second.outside, 0); + }); + + test('a clip too large for the box (野鬃\'s deploy drop) is drawn directly while it plays, then the impostor is back', async () => { + const r = await page.evaluate(async () => { + const v = window.__demo.view.debug.views.get(6); + const over = [...v._box.over]; + v.actor._play('Idle', true, { mix: 0 }); + v.onDeploy(); // the Start clip, as b.ev 'deploy' + await new Promise((ok) => setTimeout(ok, 120)); + const during = { bypass: !!v.imp?.bypass, sprite: v.imp?.sprite.visible, inBody: v.actor.spine.parent === v.body, slot: !!v.imp?.slot }; + await new Promise((ok) => setTimeout(ok, 1600)); // 1 s clip at the demo's 2× clock, then its mix out + const afterwards = { bypass: !!v.imp?.bypass, sprite: v.imp?.sprite.visible, track: v.actor.spine.state.tracks[0]?.animation?.name }; + return { over, during, afterwards }; + }); + assert.ok(r.over.includes('Start'), `over: ${r.over}`); + assert.deepEqual(r.during, { bypass: true, sprite: false, inBody: true, slot: true }, 'drawn directly, its slot kept'); + assert.equal(r.afterwards.bypass, false); + assert.equal(r.afterwards.sprite, true, 'the impostor again'); + assert.deepEqual(problems, []); + }); +}); diff --git a/test/render/impostor-bounds.test.js b/test/render/impostor-bounds.test.js new file mode 100644 index 00000000..fa51e3d0 --- /dev/null +++ b/test/render/impostor-bounds.test.js @@ -0,0 +1,332 @@ +// test/render/impostor-bounds.test.js — impostor boxes and slot clipping (GitHub #542, reported by @ImPQlc): on quality +// 高 with many units on the field (round 7 on), 野鬃's flag while idling, 浊心斯卡蒂's head in her S3 flight and 隐现's +// pistol were cut, offset or left stray pixels. A unit's impostor slot was sized from the pose it showed when it first +// became an impostor (plus a margin, render/units.js _impBox); a later pose past it was cut at the slot's edge and painted +// into the neighbouring slots, whose erasers covered only their own slot (render/impostor.js), so what fell outside every +// slot stayed and what fell into another unit's slot showed on that unit until it was redrawn. +// Now every clip a unit plays is measured once per skeleton (render/spine.js clipBounds; sampled within a frame budget by +// stepClipBounds), the box covers them (units.js impostorBox — a clip too large for it is drawn directly while it plays), +// and the atlas draws each slot's skeleton inside a box masked by the slot rectangle (a scissor rect). +// Synthetic Spine 3.8 skeletons (@pixi-spine/runtime-3.8) and the headless fake PIXI (test/render/fakepixi.js); the three +// reported operators through the real runtime: test/render/impostor-bounds-models.test.js. + +import { test, describe, before, after } from 'node:test'; +import assert from 'node:assert/strict'; +import path from 'node:path'; +import { createRequire } from 'node:module'; +import { fileURLToPath } from 'node:url'; +import { installFakePixi, fakeViewCtx } from './fakepixi.js'; +import { presetCamera } from '../../public/js/render/projection.js'; + +const ROOT = path.resolve(path.dirname(fileURLToPath(import.meta.url)), '../..'); +const rt = createRequire(path.join(ROOT, 'package.json'))('@pixi-spine/runtime-3.8'); + +let fake, spine, units, ImpostorAtlas; +before(async () => { + fake = installFakePixi(); + spine = await import('../../public/js/render/spine.js'); + units = await import('../../public/js/render/units.js'); + ({ ImpostorAtlas } = await import('../../public/js/render/impostor.js')); +}); +after(() => fake.restore()); + +/** + * A synthetic skeleton: a 100 × 200 body on the root (setup x −50…50, y −200…0 in pixi-spine's y-down world), a 50 × 50 + * flag on the 'arm' bone at x 100 (75…125), a 'flash' slot that is empty in the setup pose, and a 'ghost' slot drawn at + * alpha 0. Clips: 'Wave' (the arm out to x + 300 at 0.5 s and back), 'Flash' (the flash shown 0.50–0.55 s only, at + * x 900), 'Ghost' (the ghost bone moved far out: never drawn), 'Still'. + */ +function skeleton() { + const data = new rt.SkeletonData(); + const bone = (i, name, parent) => { const b = new rt.BoneData(i, name, parent); data.bones.push(b); return b; }; + const root = bone(0, 'root', null), arm = bone(1, 'arm', root), ghostBone = bone(2, 'ghost', root); + const slot = (i, name, b, att) => { const s = new rt.SlotData(i, name, b); s.attachmentName = att; data.slots.push(s); return s; }; + slot(0, 'body', root, 'body'); slot(1, 'flag', arm, 'flag'); slot(2, 'flash', root, null); + slot(3, 'ghost', ghostBone, 'ghost').color.a = 0; + const skin = new rt.Skin('default'); + const region = (name, w, h, x, y) => { const a = new rt.RegionAttachment(name); a.width = w; a.height = h; a.x = x; a.y = y; return a; }; + skin.setAttachment(0, 'body', region('body', 100, 200, 0, 100)); + skin.setAttachment(1, 'flag', region('flag', 50, 50, 100, 0)); + skin.setAttachment(2, 'flash', region('flash', 20, 20, 900, 0)); + skin.setAttachment(3, 'ghost', region('ghost', 10, 10, 0, 0)); + data.skins.push(skin); + data.defaultSkin = skin; + const wave = new rt.TranslateTimeline(3); + wave.boneIndex = 1; + wave.setFrame(0, 0, 0, 0); wave.setFrame(1, 0.5, 300, 0); wave.setFrame(2, 1, 0, 0); + const flash = new rt.AttachmentTimeline(3); + flash.slotIndex = 2; + flash.setFrame(0, 0, null); flash.setFrame(1, 0.5, 'flash'); flash.setFrame(2, 0.55, null); + const ghost = new rt.TranslateTimeline(2); + ghost.boneIndex = 2; + ghost.setFrame(0, 0, 5000, 0); ghost.setFrame(1, 1, 5000, 0); + data.animations.push(new rt.Animation('Wave', [wave], 1), new rt.Animation('Flash', [flash], 1), + new rt.Animation('Ghost', [ghost], 1), new rt.Animation('Still', [], 0)); + return data; +} +const near = (a, b, msg) => { for (let i = 0; i < 4; i++) assert.ok(Math.abs(a[i] - b[i]) < 1e-3, `${msg}: [${a}] vs [${b}]`); }; +/** Sample every queued clip now. */ +const drain = () => { while (spine.pendingClipBounds()) spine.stepClipBounds(Infinity); spine.stepClipBounds(Infinity); }; + +describe('clip bounds (render/spine.js): what a skeleton draws, measured once per skeleton data', () => { + test('setup pose at once; a clip by every pose it samples — a short-lived attachment counts, an invisible slot does not', () => { + const data = skeleton(); + const rec = spine.requestClipBounds(data, rt.Skeleton, ['Wave', 'Flash', 'Ghost', 'Still', 'Nope']); + assert.equal(rec.failed, false); + near(rec.setup, [-50, -200, 125, 25], 'setup: the body and the flag (the empty flash and the alpha-0 ghost do not count)'); + drain(); + near(rec.rects.get('Wave'), [-50, -200, 425, 25], 'Wave: the flag 300 units out at 0.5 s'); + near(rec.rects.get('Flash'), [-50, -200, 910, 25], 'Flash: shown for 0.05 s of its 1 s, still measured (49 poses)'); + near(rec.rects.get('Ghost'), [-50, -200, 125, 25], 'Ghost: a bone moved 5000 units out with an alpha-0 slot adds nothing'); + near(rec.rects.get('Still'), [-50, -200, 125, 25], 'Still: a 0-s clip is its single pose'); + assert.equal(rec.rects.get('Nope'), null, 'a clip the skeleton does not have'); + assert.equal(rec.skel, null, 'the scratch skeleton is dropped once its clips are sampled'); + // the same data again: nothing new to sample + spine.requestClipBounds(data, rt.Skeleton, ['Wave', 'Flash']); + assert.equal(spine.pendingClipBounds(), 0); + }); + + test('the queue samples pose by pose within the frame budget — a clip resumes on the next call —, oldest request first', () => { + const a = skeleton(), b = skeleton(); + const recA = spine.requestClipBounds(a, rt.Skeleton, ['Wave', 'Still']); + spine.requestClipBounds(b, rt.Skeleton, ['Still']); + assert.equal(spine.pendingClipBounds(), 3); + // a spent budget still poses once per call: 'Wave' (1 s: 48 + 1 poses) takes 49 calls + let calls = 0, finished = 0; + while (!finished) { finished = spine.stepClipBounds(0); calls++; } + assert.equal(calls, spine.CLIP_SAMPLE_MAX + 1); + near(recA.rects.get('Wave'), [-50, -200, 425, 25], 'Wave across 49 calls'); + assert.equal(spine.pendingClipBounds(), 2); + assert.equal(spine.stepClipBounds(0), 1, 'Still: one pose'); + assert.equal(spine.stepClipBounds(0), 1, 'then the next skeleton\'s'); + assert.equal(spine.pendingClipBounds(), 0); + assert.equal(spine.stepClipBounds(), 0, 'an empty queue costs nothing'); + }); + + test('SpineActor.clipBounds: null while queued, then { setup, clips }; false for a runtime that cannot be posed', () => { + const data = skeleton(); + const stand = { spine: { spineData: data, skeleton: new rt.Skeleton(data) } }; + const clipBounds = spine.SpineActor.prototype.clipBounds; + assert.equal(clipBounds.call(stand, ['Wave', 'Still']), null, 'queued, not sampled yet'); + drain(); + const b = clipBounds.call(stand, ['Wave', 'Still']); + near(b.setup, [-50, -200, 125, 25], 'setup'); + near(b.clips.get('Wave'), [-50, -200, 425, 25], 'Wave'); + // the fake PIXI's Spine has a plain-object skeleton: no runtime to pose + const actor = new spine.SpineActor({ animations: [{ name: 'Idle' }] }, { anims: { idle: 'Idle' }, animations: { Idle: 1 } }); + assert.equal(actor.clipBounds(['Idle']), false); + }); +}); + +describe('impostor box (render/units.js impostorBox, playedClips)', () => { + test('playedClips: every role of the entry and of its forms; one-off = deploy, begin / end of skills, stun, move; a shared name loops', () => { + const anims = { + idle: 'Idle', deploy: 'Start', die: 'Die', + attack: { begin: 'Attack_Begin', loop: 'Attack_Loop', end: 'Attack_End' }, + skill: { begin: 'Skill_2_Begin', loop: 'Skill_2_Loop', end: 'Skill_2_End', idle: 'Skill_2_Idle' }, + skills: { 0: { begin: 'Skill_1_Begin', loop: 'Skill_1_Loop', end: null, idle: null }, 1: { begin: 'Skill_2_Begin', loop: 'Skill_2_Loop', end: 'Skill_2_End', idle: 'Skill_2_Idle' } }, + move: { begin: 'Move_Begin', loop: 'Move_Loop', end: 'Move_End' }, run: { loop: 'Run_Loop' }, + stun: { begin: 'Stun_Begin', loop: 'Stun', end: null }, attackDown: { loop: 'Attack_Down' }, + }; + const m = units.playedClips(anims, units.FORMS.char_4016_kazema); + const once = [...m].filter(([, o]) => o).map(([n]) => n).sort(); + const loops = [...m].filter(([, o]) => !o).map(([n]) => n).sort(); + assert.deepEqual(once, ['Move_Begin', 'Move_End', 'Skill_1_Begin', 'Skill_2_Begin', 'Skill_2_End', 'Start', 'Start_B', 'Stun_Begin']); + assert.deepEqual(loops, ['Attack_B', 'Attack_Begin', 'Attack_End', 'Attack_Loop', 'Die', 'Die_B', 'Idle', 'Idle_B', 'Move_Loop', 'Run_Loop', 'Skill_1_Loop', 'Skill_2_Idle', 'Skill_2_Loop', 'Stun']); + assert.ok(!m.has('Attack_Down'), 'attackDown is no clip the renderer plays'); + // a name that is the deploy clip and the idle clip loops + assert.equal(units.playedClips({ idle: 'Idle', deploy: 'Idle' }).get('Idle'), false); + assert.equal(units.playedClips(null).size, 0); + }); + + const box = (b) => [b.x0, b.y0, b.x0 + b.w, b.y0 + b.h]; + const inside = (outer, r) => outer[0] <= r[0] && outer[1] <= r[1] && outer[2] >= r[2] && outer[3] >= r[3]; + + test('the setup pose and the idle clip always; then each clip while the box stays within 4× (looping) / 2× (one-off) of that core', () => { + const setup = [-100, -400, 100, 0], idle = [-150, -380, 120, 10]; // core −150…120 × −400…10: 270 × 410 + const clips = [ + ['Attack', [-150, -420, 400, 10], false], // 550 × 430 = 2.1 × the core: looping, taken + ['Skill', [-300, -500, 120, 10], false], // with the attack 550 × 510 = 2.5 ×: taken + ['Start', [-100, -1800, 100, 0], true], // a drop from above: 1810 tall, one-off, 9 ×: drawn directly + ['Die', [-120, -200, 90, 5], false], // inside the box anyway + ['Huge', [-3000, -400, 3000, 0], false], // a screen-wide effect: past 4 ×, left out + ['Gone', null, true], // draws nothing + ]; + const b = units.impostorBox(setup, idle, clips); + const r = box(b); + assert.ok(inside(r, setup) && inside(r, idle), 'never smaller than the setup pose or the idle clip'); + for (const n of ['Attack', 'Skill', 'Die']) assert.ok(inside(r, clips.find((c) => c[0] === n)[1]), `${n} inside the box`); + assert.deepEqual([...b.over].sort(), ['Huge', 'Start'], 'the clips drawn directly while they play'); + // padding: 3 % of the longer side (700) + 8 units on every side + const pad = 0.03 * 700 + 8; + near(r, [-300 - pad, -500 - pad, 400 + pad, 10 + pad], 'padded box'); + }); + + test('a one-off clip fits under the 2× limit, a looping one up to 4×; a clip inside the box is never left out', () => { + const core = [-100, -100, 100, 100]; // area 40000 + const once = units.impostorBox(core, null, [['Begin', [-100, -260, 100, 100], true]]); // 1.8 × + assert.equal(once.over.size, 0); + const tooBig = units.impostorBox(core, null, [['Begin', [-100, -340, 100, 100], true]]); // 2.2 × + assert.deepEqual([...tooBig.over], ['Begin']); + const loop = units.impostorBox(core, null, [['Loop', [-100, -660, 100, 100], false]]); // 3.8 × + assert.equal(loop.over.size, 0); + // ordered by the area they add: the small one first, then a big one-off that the big loop already covers + const both = units.impostorBox(core, null, [['Begin', [-100, -500, 100, 100], true], ['Loop', [-100, -660, 100, 100], false]]); + assert.equal(both.over.size, 0, 'Begin lies inside the box the loop made'); + }); + + test('without a measurable setup pose or idle clip the looping clips make the core; nothing drawn → null', () => { + const b = units.impostorBox(null, null, [['Attack', [-10, -50, 30, 0], false], ['Start', [-10, -900, 10, 0], true]]); + assert.deepEqual([...b.over], ['Start']); + assert.ok(b.w > 40 && b.h > 50 && b.h < 100); + assert.equal(units.impostorBox(null, null, [['Start', null, true]]), null); + assert.equal(units.impostorBox([NaN, 0, 1, 1], null, []), null); + }); +}); + +describe('impostor atlas (render/impostor.js): every slot is cleared and clipped to itself', () => { + /** An atlas on the fake PIXI with a renderer that records what each page render contained. */ + function atlas() { + const renders = []; + const R = { resolution: 1, render: (obj, o) => renders.push({ clear: o.clear, boxes: obj.children[1].children.filter((b) => b.visible).length }) }; + return { imp: new ImpostorAtlas(R), renders }; + } + + test('a slot owns an eraser and a box masked by exactly its rectangle (PIXI draws a rectangle mask as a scissor rect)', () => { + const { imp } = atlas(); + const drawn = []; + const drawRect = fake.P.Graphics.prototype.drawRect; + fake.P.Graphics.prototype.drawRect = function (x, y, w, h) { drawn.push(this); this.rect = [x, y, w, h]; return this; }; + try { + const a = imp.alloc(100, 110), b = imp.alloc(60, 40); + for (const s of [a, b]) { + assert.deepEqual(s.mask.rect, [s.x, s.y, s.w, s.h], 'mask = the slot'); + assert.equal(s.box.mask, s.mask); + assert.equal(s.mask.parent, s.box, 'the mask lives in the box (its transform follows the page)'); + assert.deepEqual([s.eraser.x, s.eraser.y, s.eraser.width, s.eraser.height], [s.x, s.y, s.w, s.h], 'the eraser clears all of it'); + assert.equal(s.box.visible, false, 'nothing drawn until queued'); + } + assert.equal(drawn.length, 2); + } finally { fake.P.Graphics.prototype.drawRect = drawRect; } + }); + + test('a queued skeleton is drawn inside its slot box, then parked; freeing a slot never destroys a skeleton queued in it', () => { + const { imp, renders } = atlas(); + const s = imp.alloc(100, 110), t = imp.alloc(100, 110); + const body = new fake.P.Container(), other = new fake.P.Container(); + imp.park(body); imp.park(other); + imp.draw(s, body, { a: 0.3, d: 0.3, tx: 40, ty: 90 }); + assert.equal(body.parent, s.box); + assert.ok(s.box.visible && s.eraser.visible && !t.box.visible); + assert.deepEqual([body.x, body.y], [s.x + 40, s.y + 90]); + imp.flush(); + assert.deepEqual(renders, [{ clear: true, boxes: 1 }], 'one render of the page: the queued slot only'); + assert.equal(body.parent, imp.parked); + assert.ok(!s.box.visible && !s.eraser.visible && !body.visible); + imp.draw(t, other, { a: 1, d: 1, tx: 0, ty: 0 }); + imp.free(t); // its unit left impostor mode before the flush + assert.ok(!other.destroyed && other.parent === imp.parked, 'the skeleton went back to the lot'); + assert.ok(t.box.destroyed, 'the box and its mask are gone'); + imp.flush(); + assert.deepEqual(renders.at(-1), { clear: false, boxes: 0 }, 'later passes do not clear the page'); + }); +}); + +describe('UnitView impostor mode (render/units.js)', () => { + const tick = () => new Promise((r) => setImmediate(r)); + const cam = () => presetCamera('normal', { width: 1280, height: 720 }); + const ENTRY = { skel: '/s/op.skel', atlas: '/s/op.atlas', textures: ['/s/op.png'], anims: { idle: 'Idle', deploy: 'Start', die: 'Die', attack: { begin: null, loop: 'Attack', end: null } }, animations: { Idle: 1, Start: 1, Die: 0.8, Attack: 1 } }; + const DATA = { animations: [{ name: 'Idle' }, { name: 'Start' }, { name: 'Die' }, { name: 'Attack' }] }; + const MEASURED = { + setup: [-60, -200, 60, 0], + clips: new Map([['Idle', [-70, -210, 70, 0]], ['Attack', [-70, -230, 180, 0]], ['Start', [-70, -1800, 70, 0]], ['Die', [-120, -150, 90, 0]]]), + }; + + /** An operator in a crowd (impostor interval 2) with a recording fake atlas; `bounds()` = what clipBounds answers. */ + async function operator(bounds) { + let frame = 0; + const log = { alloc: 0, free: 0, draw: 0 }; + const atlas = { + alloc: (w, h, o) => { log.alloc++; return { w, h, tex: new fake.P.Texture(), clip: !!o?.clip }; }, + free() { log.free++; }, park(o) { o.visible = false; }, unpark(o) { o.visible = true; }, draw() { log.draw++; }, + }; + const ctx = fakeViewCtx(fake.P, { + cam, frameNo: () => frame, impostors: atlas, impostorInterval: () => 2, + renderer: { resolution: 1, render() {} }, + assets: { picture: () => null, image: async () => null, spineEntry: () => ENTRY, spine: { acquire: async () => DATA, release() {} } }, + }); + const v = new units.UnitView(ctx, { id: 1, side: 'ally', kind: 'chess', defId: 'char_x', tier: 3, x: 5, y: 10, maxHp: 1000, dir: 'RIGHT' }); + await tick(); await tick(); + assert.ok(v.spineReady, 'spine ready'); + v.actor.clipBounds = (names) => { + const b = bounds(); + if (b) for (const n of names) assert.ok(b.clips.has(n), `${n} measured`); + return b; + }; + const step = (n = 1) => { for (let i = 0; i < n; i++) { v.update(1 / 60, cam(), frame / 60); frame++; } }; + return { v, step, log }; + } + + test('while the model\'s clips are still measured the unit is drawn directly; then an impostor sized from them', async () => { + let ready = null; + const { v, step, log } = await operator(() => ready); + step(4); + assert.ok(!v.imp, 'no impostor without a box'); + assert.equal(log.draw, 0); + assert.equal(v.actor.spine.parent, v.body, 'drawn directly'); + ready = MEASURED; + step(2); + assert.ok(v.imp && log.draw >= 1, 'an impostor once measured'); + const b = v._box, r = [b.x0, b.y0, b.x0 + b.w, b.y0 + b.h]; + for (const n of ['Idle', 'Attack', 'Die']) { + const c = MEASURED.clips.get(n); + assert.ok(r[0] <= c[0] && r[1] <= c[1] && r[2] >= c[2] && r[3] >= c[3], `${n} inside the box`); + } + assert.deepEqual([...b.over], ['Start'], 'the deploy drop is drawn directly while it plays'); + }); + + test('a clip too large for the box is drawn directly while it plays — the slot stays the unit\'s — and redrawn into it after', async () => { + const { v, step, log } = await operator(() => MEASURED); + step(4); + const sprite = v.imp.sprite; + assert.ok(v.imp && sprite.visible); + const c0 = { ...log }; + v.onDeploy(); // b.ev 'deploy': the Start clip + step(1); + assert.equal(v.imp.bypass, true); + assert.equal(sprite.visible, false, 'the impostor sprite hides'); + assert.equal(v.actor.spine.parent, v.body, 'the skeleton is drawn in the body'); + assert.equal(v.actor.spine.visible, true); + step(30); + assert.equal(log.draw, c0.draw, 'no atlas redraw while it plays'); + assert.equal(log.free, c0.free, 'its slot is kept'); + step(40); // the 1-s clip is over: back to the idle + assert.equal(v.imp.bypass, false); + assert.ok(sprite.visible && v.actor.spine.parent !== v.body, 'the impostor again'); + assert.ok(log.draw > c0.draw, 'redrawn into its slot'); + assert.equal(log.alloc, c0.alloc, 'the same slot'); + }); + + test('a runtime whose clips cannot be measured keeps the box from the pose shown (the pre-#542 rule)', async () => { + const { v, step } = await operator(() => false); + step(3); + assert.ok(v.imp, 'impostor'); + assert.deepEqual([v._box.x0, v._box.y0, v._box.w, v._box.h], [-140, -260, 280, 290], 'fake getLocalBounds (−50, −100, 100 × 100) + the old margins'); + assert.equal(v._box.over.size, 0); + }); + + test('a pen figure (lod idle) needs its idle clip only', async () => { + let asked = null; + const ctx = fakeViewCtx(fake.P, { + cam, frameNo: () => 0, impostors: { alloc: (w, h) => ({ w, h, tex: new fake.P.Texture(), clip: false }), free() {}, park(o) { o.visible = false; }, unpark(o) { o.visible = true; }, draw() {} }, + renderer: { resolution: 1, render() {} }, + assets: { picture: () => null, image: async () => null, spineEntry: () => ENTRY, spine: { acquire: async () => DATA, release() {} } }, + }); + const v = new units.UnitView(ctx, { id: 'e:0', side: 'enemy', kind: 'enemy', defId: 'enemy_x', tier: 1, x: 9, y: 15, maxHp: 1, facing: -1 }, { prep: true, lod: 'idle' }); + await tick(); await tick(); + v.actor.clipBounds = (names) => { asked = names; return MEASURED; }; + v.update(1 / 60, cam(), 0); + assert.deepEqual(asked, ['Idle']); + assert.ok(v.imp && v._box.over.size === 0); + }); +});