github-such-software/wownerogue
1
0
Fork 0
mirror of https://github.com/Such-Software/wownerogue.git synced 2026-10-20 07:38:34 +02:00
Code Issues Packages Projects Releases Wiki Activity

fix(render): reliable SP camera fill, clean wall torches, subtler wait juice

Browse Source 
Camera: mount the render-kit host with inset:0 (fill #game-display) instead of
min(100%,78vh)+translate(-50%) centering. #game-display is grid-bounded (container is
100vh/overflow-hidden), so filling it gives the camera reliable clientWidth/Height every
frame — fixes the intermittent "player stranded in a top band, black below" off-centering.

Torches (in-game): drop the pack torch SPRITE composite — several sheets place it off-center/
rotated, reading as misaligned. Keep wall base + procedural RK.fx flame: a clean wall-mounted
torch that looks right in every pack.

Wait animations: shrink the juice bursts (18-24 -> 6-7 particles, spread 1.8-2.4 -> 0.6-0.7)
and remove the red death/caught bursts, so a grab/escape reads as a tight glint on the hero
instead of an explosion spraying onto the wall torches.
This commit is contained in:
jwinterm
2026-07-12 21:08:16 -04:00
parent 164cfff8e5
commit e9650f9843
3 changed files with 18 additions and 26 deletions
Download Patch File Download Diff File Expand all files Collapse all files
html/js/display/waitingScreenAnimator.js
+8 -13
View File
@@ -274,10 +274,10 @@ var WaitingScreenAnimator = {
this.updateAnimation();
const anim = this._waitingAnimation;
// JUICE: burst on the beats — treasure grabbed (treasureX flips to -1), escape, or caught.
// JUICE: a SUBTLE, tight sparkle when the hero breaks for the exit with the loot. No red
// "caught" burst — keep it a small glint, not an explosion near the torches.
if (this._epicPhase !== anim.phase) {
if (anim.phase === 'escape') this._burst(anim.playerX, anim.playerY, 'rgba(255,220,90,0.95)', 18, screenWidth, screenHeight, 1.8);
else if (anim.phase === 'caught') this._burst(anim.monsterX, anim.playerY, 'rgba(255,70,70,0.95)', 22, screenWidth, screenHeight, 2.2);
if (anim.phase === 'escape') this._burst(anim.playerX, anim.playerY, 'rgba(255,220,90,0.9)', 6, screenWidth, screenHeight, 0.7);
this._epicPhase = anim.phase;
}
@@ -497,19 +497,14 @@ var WaitingScreenAnimator = {
// Update animation state
this.updatePaymentAnimation();
// JUICE: fire a one-shot particle burst on each dramatic beat (grab / escape / death).
// JUICE: a SUBTLE, tight one-shot sparkle on the treasure grab / clean escape. Kept small and
// low-spread so it reads as a glint on the hero, not an explosion — and never sprays onto the
// wall torches. No red "death" burst (the animation's own red shockwave already covers that).
if (this._payPhase !== anim.phase) {
if (anim.phase === 'grab') this._burst(anim.treasureX, anim.treasureY, 'rgba(255,220,90,0.95)', 18, screenWidth, screenHeight, 1.8);
else if (anim.phase === 'escaped') this._burst(anim.playerX, anim.playerY, 'rgba(130,255,150,0.95)', 22, screenWidth, screenHeight, 2.2);
if (anim.phase === 'grab') this._burst(anim.treasureX, anim.treasureY, 'rgba(255,220,90,0.9)', 6, screenWidth, screenHeight, 0.6);
else if (anim.phase === 'escaped') this._burst(anim.playerX, anim.playerY, 'rgba(130,255,150,0.9)', 7, screenWidth, screenHeight, 0.7);
this._payPhase = anim.phase;
}
const _pGone = (anim.playerX === -1);
if (_pGone && !this._payDeathBurst) {
this._burst(anim.deathX || anim.treasureX, anim.deathY || centerY, 'rgba(255,70,70,0.95)', 24, screenWidth, screenHeight, 2.4);
this._payDeathBurst = true;
} else if (!_pGone) {
this._payDeathBurst = false;
}
// 💎💎💎 MEGA TREASURE - BIG pulsating with intense golden glow
if (!anim.hasTreasure && anim.treasureX >= roomStartX && anim.treasureX <= roomEndX) {
html/js/render/spGameRenderer.js
+5 -6
View File
@@ -26,12 +26,11 @@
if (!host) {
host = doc().createElement('div');
host.id = 'rk-game-host';
// A bounded viewport CENTERED in #game-display (which is position:relative). Absolute
// positioning dodges the flex centering + sibling ROT/FX canvases; capping the height
// (vs filling the very-tall #game-display) keeps the player-centered camera on-screen
// instead of low.
host.style.cssText = 'display:none; position:absolute; top:50%; left:50%;' +
' width:min(100%, 1000px); height:min(100%, 78vh); transform:translate(-50%,-50%);' +
// FILL #game-display exactly (inset:0). #game-display is a definite, grid-bounded height
// (the .container is height:100vh; overflow:hidden), so filling it gives the camera
// reliable clientWidth/clientHeight every frame. The earlier `min(78vh)` + translate(-50%)
// centering could resolve to a wrong/transient size, stranding the view in a top band.
host.style.cssText = 'display:none; position:absolute; inset:0;' +
' overflow:hidden; background:#0a0c0f; z-index:6; touch-action:none; cursor:grab;';
gd.appendChild(host);
}
html/js/render/tileRenderer.js
+5 -7
View File
@@ -117,13 +117,11 @@
ctx.fillStyle = bdef.color || def.color;
ctx.fillRect(px, py, cell, cell);
}
// Fire fixtures (torch/hearth) carry a sprite — draw the sconce/torch tile over
// its base so it reads as a mounted FIXTURE, not a bare procedural flame; RK.fx
// then animates the flame + glow on top. Hazards (lava/poison/spikes) have no sprite.
if (def.fx === 'fire' && useAtlas) {
var fco = pickVariant(tmap[kind], x, y);
if (fco) atlas.draw(ctx, fco[0], fco[1], px, py, cell);
}
// Fire fixtures draw ONLY their base (wall for a dungeon torch) here; RK.fx
// paints the animated flame + warm glow centered on the cell in the flicker
// loop. We deliberately skip the pack's torch SPRITE — several sheets place it
// off-center / rotated, which read as misaligned; the procedural flame on a wall
// base is a clean wall-mounted torch that looks right in every pack.
applyCellLight(ctx, scene, x, y, px, py, cell);
continue;
}