5 Commits

Author SHA1 Message Date
4f2e9f73b6 ♻️ remove silhouette — Nisse always render above world objects
Depth fixed at 900; isOccluded() and outlineSprite removed.
WorldSystem.hasResourceAt() stays as a useful utility.
2026-03-23 20:05:53 +00:00
84b6e51746 🐛 improve occlusion detection with wider tile check
Expands isOccluded() from same-column-only to a 3x4 tile window
(tileX+-1, tileY+1..4) to catch trees whose canopy extends sideways
and well above the trunk tile. Outline scale bumped to 1.15.
2026-03-23 20:02:40 +00:00
5f646d54ca 🐛 fix Nisse outline only shown when actually occluded
Silhouette now hidden by default and toggled on per frame only when
isOccluded() detects a tree, rock or building 1–3 tiles below the Nisse.
Adds WorldSystem.hasResourceAt() for O(1) tile lookup. Outline colour
changed to light blue (0xaaddff) at scale 1.1.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
2026-03-23 19:52:37 +00:00
94b2f7f457 add Nisse silhouette outline for occlusion visibility
Fixes #33. Each Nisse now has a white filled outline sprite at depth 900
that is always visible above trees and buildings. The main sprite uses
Y-based depth (floor(y/TILE_SIZE)+5) so Nisse sort correctly with world
objects. Name label, energy bar and job icon moved to depth 901/902 so
they remain readable regardless of occlusion.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
2026-03-23 19:47:51 +00:00
cd171c859c fix depth sorting for world objects by tileY
Fixes #31. All trees, rocks, seedlings and buildings now use
tileY+5 as depth instead of a fixed value, so objects further
down the screen always render in front of objects above them
regardless of spawn order. Build ghost moved to depth 1000/1001.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
2026-03-23 19:40:27 +00:00
6 changed files with 40 additions and 13 deletions

View File

@@ -179,18 +179,19 @@ export class GameScene extends Phaser.Scene {
const name = `bobj_${building.id}` const name = `bobj_${building.id}`
if (this.children.getByName(name)) continue if (this.children.getByName(name)) continue
const worldDepth = building.tileY + 5
if (building.kind === 'chest') { if (building.kind === 'chest') {
const g = this.add.graphics().setName(name).setDepth(8) const g = this.add.graphics().setName(name).setDepth(worldDepth)
g.fillStyle(0x8B4513); g.fillRect(wx - 10, wy - 7, 20, 14) g.fillStyle(0x8B4513); g.fillRect(wx - 10, wy - 7, 20, 14)
g.fillStyle(0xCD853F); g.fillRect(wx - 9, wy - 6, 18, 6) g.fillStyle(0xCD853F); g.fillRect(wx - 9, wy - 6, 18, 6)
g.lineStyle(1, 0x5C3317); g.strokeRect(wx - 10, wy - 7, 20, 14) g.lineStyle(1, 0x5C3317); g.strokeRect(wx - 10, wy - 7, 20, 14)
} else if (building.kind === 'bed') { } else if (building.kind === 'bed') {
this.add.image(wx, wy, 'bed_obj').setName(name).setDepth(8) this.add.image(wx, wy, 'bed_obj').setName(name).setDepth(worldDepth)
} else if (building.kind === 'stockpile_zone') { } else if (building.kind === 'stockpile_zone') {
this.add.image(wx, wy, 'stockpile_obj').setName(name).setDepth(4).setAlpha(0.8) this.add.image(wx, wy, 'stockpile_obj').setName(name).setDepth(4).setAlpha(0.8)
} else if (building.kind === 'forester_hut') { } else if (building.kind === 'forester_hut') {
// Draw a simple log-cabin silhouette for the forester hut // Draw a simple log-cabin silhouette for the forester hut
const g = this.add.graphics().setName(name).setDepth(8) const g = this.add.graphics().setName(name).setDepth(worldDepth)
// Body // Body
g.fillStyle(0x6B3F16); g.fillRect(wx - 12, wy - 9, 24, 18) g.fillStyle(0x6B3F16); g.fillRect(wx - 12, wy - 9, 24, 18)
// Roof // Roof

View File

@@ -32,7 +32,7 @@ export class BuildingSystem {
create(): void { create(): void {
this.ghost = this.scene.add.rectangle(0, 0, TILE_SIZE, TILE_SIZE, 0x00FF00, 0.35) this.ghost = this.scene.add.rectangle(0, 0, TILE_SIZE, TILE_SIZE, 0x00FF00, 0.35)
this.ghost.setDepth(20) this.ghost.setDepth(1000)
this.ghost.setVisible(false) this.ghost.setVisible(false)
this.ghost.setStrokeStyle(2, 0x00FF00, 0.8) this.ghost.setStrokeStyle(2, 0x00FF00, 0.8)
@@ -40,7 +40,7 @@ export class BuildingSystem {
fontSize: '10px', color: '#ffffff', fontFamily: 'monospace', fontSize: '10px', color: '#ffffff', fontFamily: 'monospace',
backgroundColor: '#000000aa', padding: { x: 3, y: 2 } backgroundColor: '#000000aa', padding: { x: 3, y: 2 }
}) })
this.ghostLabel.setDepth(21) this.ghostLabel.setDepth(1001)
this.ghostLabel.setVisible(false) this.ghostLabel.setVisible(false)
this.ghostLabel.setOrigin(0.5, 1) this.ghostLabel.setOrigin(0.5, 1)

View File

@@ -47,10 +47,10 @@ export class ResourceSystem {
sprite.setOrigin(0.5, 0.75) sprite.setOrigin(0.5, 0.75)
} }
sprite.setDepth(5) sprite.setDepth(node.tileY + 5)
const healthBar = this.scene.add.graphics() const healthBar = this.scene.add.graphics()
healthBar.setDepth(6) healthBar.setDepth(node.tileY + 6)
healthBar.setVisible(false) healthBar.setVisible(false)
this.sprites.set(node.id, { sprite, node, healthBar }) this.sprites.set(node.id, { sprite, node, healthBar })

View File

@@ -110,7 +110,7 @@ export class TreeSeedlingSystem {
const key = `seedling_${Math.min(s.stage, 2)}` const key = `seedling_${Math.min(s.stage, 2)}`
const sprite = this.scene.add.image(x, y, key) const sprite = this.scene.add.image(x, y, key)
.setOrigin(0.5, 0.85) .setOrigin(0.5, 0.85)
.setDepth(5) .setDepth(s.tileY + 5)
this.sprites.set(s.id, sprite) this.sprites.set(s.id, sprite)
} }

View File

@@ -118,8 +118,9 @@ export class VillagerSystem {
case 'sleeping':this.tickSleeping(v, rt, delta); break case 'sleeping':this.tickSleeping(v, rt, delta); break
} }
// Sync sprite to state position // Nisse always render above world objects
rt.sprite.setPosition(v.x, v.y) rt.sprite.setPosition(v.x, v.y)
rt.nameLabel.setPosition(v.x, v.y - 22) rt.nameLabel.setPosition(v.x, v.y - 22)
rt.energyBar.setPosition(0, 0) rt.energyBar.setPosition(0, 0)
this.drawEnergyBar(rt.energyBar, v.x, v.y, v.energy) this.drawEnergyBar(rt.energyBar, v.x, v.y, v.energy)
@@ -569,16 +570,23 @@ export class VillagerSystem {
* for a newly added Nisse. * for a newly added Nisse.
* @param v - Villager state to create sprites for * @param v - Villager state to create sprites for
*/ */
/**
* Creates and registers all runtime objects (sprite, outline, label, energy bar, icon)
* for a newly added Nisse.
* @param v - Villager state to create sprites for
*/
private spawnSprite(v: VillagerState): void { private spawnSprite(v: VillagerState): void {
const sprite = this.scene.add.image(v.x, v.y, 'villager').setDepth(11) // Nisse always render above trees, buildings and other world objects.
const sprite = this.scene.add.image(v.x, v.y, 'villager')
.setDepth(900)
const nameLabel = this.scene.add.text(v.x, v.y - 22, v.name, { const nameLabel = this.scene.add.text(v.x, v.y - 22, v.name, {
fontSize: '8px', color: '#ffffff', fontFamily: 'monospace', fontSize: '8px', color: '#ffffff', fontFamily: 'monospace',
backgroundColor: '#00000088', padding: { x: 2, y: 1 }, backgroundColor: '#00000088', padding: { x: 2, y: 1 },
}).setOrigin(0.5, 1).setDepth(12) }).setOrigin(0.5, 1).setDepth(901)
const energyBar = this.scene.add.graphics().setDepth(12) const energyBar = this.scene.add.graphics().setDepth(901)
const jobIcon = this.scene.add.text(v.x, v.y - 18, '', { fontSize: '10px' }).setDepth(13) const jobIcon = this.scene.add.text(v.x, v.y - 18, '', { fontSize: '10px' }).setDepth(902)
sprite.setInteractive() sprite.setInteractive()
sprite.on('pointerdown', () => this.onNisseClick?.(v.id)) sprite.on('pointerdown', () => this.onNisseClick?.(v.id))
@@ -667,6 +675,14 @@ export class VillagerSystem {
return result return result
} }
/**
* Destroys all Nisse sprites and clears the runtime map.
* Should be called when the scene shuts down.
*/
/**
* Destroys all Nisse sprites and clears the runtime map.
* Should be called when the scene shuts down.
*/
/** /**
* Destroys all Nisse sprites and clears the runtime map. * Destroys all Nisse sprites and clears the runtime map.
* Should be called when the scene shuts down. * Should be called when the scene shuts down.

View File

@@ -172,6 +172,16 @@ export class WorldSystem {
this.resourceTiles.delete(tileY * WORLD_TILES + tileX) this.resourceTiles.delete(tileY * WORLD_TILES + tileX)
} }
/**
* Returns true if a resource (tree or rock) occupies the given tile.
* Uses the O(1) resourceTiles index.
* @param tileX - Tile column
* @param tileY - Tile row
*/
hasResourceAt(tileX: number, tileY: number): boolean {
return this.resourceTiles.has(tileY * WORLD_TILES + tileX)
}
/** /**
* Converts world pixel coordinates to tile coordinates. * Converts world pixel coordinates to tile coordinates.
* @param worldX - World X in pixels * @param worldX - World X in pixels